mdunbavan

{% raw %}
      	<script type="text/html" id="hit-template-inner">
		  <span class="hit bg Grid-fill product--hover db" style="background-image:url({{frontImage}});">
		  	<div class="block db">
				
		  		<div class="absolute top-1 left-1 share-hover link z-2">
				    <svg class="share-icon absolute" width="19" height="18">
				        <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"></use>
				    </svg>
				    <ul class="ma0 pa0 mb4 list share-list relative">

mdunbavan

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

mdunbavan

//touch/mobile detection
if (
	navigator.userAgent.match(/Phone/i) ||
	navigator.userAgent.match(/DROID/i) ||
	navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/) || 
    navigator.userAgent.match(/Windows Phone/i) || 

mdunbavan

'use strict';

function findUpTag(el, tag) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.tagName === tag)
            return el;
    }
    return null;
}

mdunbavan

const ListComp = {
	template: `
	 <div class="wrapper grid" id="start-parralex">

      <div class="grid__item large--one-third medium--one-whole no-padding" v-for="(key, index) in productsOrderBy">

      <swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

mdunbavan

const store = new Vuex.Store({
	state: {
  	products: [
    ],
    posts: []
  },
	mutations: {
    addProducts (state, product) {
      // mutate state
      state.products.push(product)

mdunbavan

[Vue warn]: Property or method "products" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)
warn @ vue.min.js?2584471148241169295:525
warnNonPresent @ vue.min.js?2584471148241169295:1443
has @ vue.min.js?2584471148241169295:1475
(anonymous) @ VM4692:2
Vue._render @ vue.min.js?2584471148241169295:2220
updateComponent @ vue.min.js?2584471148241169295:2613
get @ vue.min.js?2584471148241169295:2936
run @ vue.min.js?2584471148241169295:3005

mdunbavan

const PeopleListing = ('people-listing', {
    template: '#people-listing-template',
    delimiters: ['${', '}'],
    data: function() {
        return {
            products: []
        }
    },
    mounted: function() {
        this.getAllProducts();

mdunbavan

<section id="home-container" class="parralex-scroll">

  <router-view></router-view>

</section>

mdunbavan

[
{
"author": {
"avatar": "http://lorempixel.com/250/250/",
"name": "JRR Tolkein"
},
"cover": "http://lorempixel.com/500/700/",
"description": "WH Auden thought this tale of fantastic creatures looking for lost jewellery was a \"masterpiece\".",
"genre": {
"category": "Non-Fiction",