ldc-boutique-cnc/resources/views/front/canard/js/app.js

import Swiper from 'swiper/swiper-bundle';
require('./bootstrap');
require('./cart.js');

window.Vue = require('vue');

// Vuex
import Vuex from 'vuex';

Vue.component('timeslot-picker', require('./components/TimeSlotPicker.vue').default);
Vue.component('basket-panel', require('./components/BasketPanel.vue').default);
Vue.component('basket-counter', {
    computed: {
        count() {
            return this.$store.state.cartTotals.countItems;
            // let panier;
            // panier = this.$store.state.panier;
            // console.log(this.$store.state.panier);
            // console.log(panier);
            // console.log(panier.length);
            // return panier[panier.length - 1].countItems;
        }
    },
    mounted: function() {
        console.log('Basket Counter Component mounted.');
    },
    template: '<span class="header-actions__item-icon icon icon_cart"><span class="icon__count">{{ count }}</span></span>'
});

const store = new Vuex.Store({
    state: {
        panier: {},
        cartTotals: {},
    },
    mutations: {
        Reload (state,payload) {
            state.reload = payload.reload;
        },
        updatePanier (state, payload) {
            state.panier = payload.panier;
        },
        updateCartTotals (state, payload) {
            state.cartTotals = payload.cartTotals;
        },
    }
});

const app = new Vue({
    el: '#app',
    store,
    data: {
        num: 1 //for the numeric stepper on product pages
      },
    methods: {
        addtocart(product,qtty) {
            console.log('root add');
            this.$refs.basketpanel.addtocart(product,qtty);
        },
    },
});

$(document).ready(function(){
    //document is ready we can free css transitions
    $('.preload').removeClass("preload");

	var mainslider = new Swiper ('.mainslider .swiper-container', {
		pagination: {
			el: '.mainslider__pagination',
			bulletClass: 'slider-bullet',
			bulletActiveClass: 'slider-bullet_active',
			clickable: true
		},
	});

	var rp_slider = new Swiper ('.rp-slider .swiper-container', {
		slidesPerView: 4,
		spaceBetween: 40,
		navigation: {
			nextEl: '.rp-slider .swiper-nav__arrow_next',
			prevEl: '.rp-slider .swiper-nav__arrow_prev',
			disabledClass: 'disabled'
		},
		breakpoints: {
/*			320: {
				spaceBetween: 20
			},
			480: {
				spaceBetween: 30
			},*/
			480: {
				slidesPerView: 'auto',
				spaceBetween: 12
			},
			768: {
				slidesPerView: 'auto',
				spaceBetween: 16
			},
			1000: {
				spaceBetween: 25,
				slidesPerView: 3
			},
			1180: {
				spaceBetween: 30
			}
		}
	});

	var rp_slider_mobile = new Swiper ('.related-products-mobile .swiper-container', {
		slidesPerView: 4,
		spaceBetween: 20,
		navigation: {
			nextEl: '.related-products-mobile .swiper-nav__arrow_next',
			prevEl: '.related-products-mobile .swiper-nav__arrow_prev',
			disabledClass: 'disabled'
		},
		breakpoints: {
/*			320: {
				spaceBetween: 20
			},
			480: {
				spaceBetween: 30
			},*/
			480: {
				slidesPerView: 'auto',
				spaceBetween: 12
			},
			768: {
				slidesPerView: 'auto',
				spaceBetween: 16
			},
			1000: {
				spaceBetween: 25,
				slidesPerView: 3
			},
			1180: {
				spaceBetween: 30
			}
		}
	});


	$(document).on("click", ".menu-trigger", function(){
		$(this).toggleClass("active");
		$(".menu").slideToggle();
	});

	$(document).on("click", ".product__qty-btn", function(){
		_value = parseInt($('.product__qty-input').val());
		if(isNaN(_value) || _value <= 0) {
			_value = 1;
		}

		if ($(this).hasClass('product__qty-btn_plus')) {
			_value += 1;
		} else {
			if(_value > 1) {
				_value -= 1;
			}
		}

		$('.product__qty-input').val(_value);
	});

	$(document).on("click", ".accordeon-block__title", function(){
		$(this).closest('.accordeon-block').toggleClass("active");
		$(this).next('.accordeon-block__content').slideToggle();
	});


	$(document).mouseup(function(e) {
    	var container = $(".form-message");

	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	        container.hide();
	    }
	});

	$(document).mouseup(function(e) {
    	var container = $(".form-result");

	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	        container.hide();
	    }
	});


	let fileInput = document.querySelector(".form__upload-field .file-source");
	if (fileInput) {
		let fileArea = document.querySelector(".form__upload-field .file-name");

		fileInput.onchange = function() {
		  if(fileInput.files.length != 0) {
		    if(fileInput.files[0].size > 10485760) {
		      fileArea.value = "La taille du fichier est trop grande";
		    } else {
		      fileArea.value = fileInput.files[0].name;
		    }
		  }
		}
	}





	$(document).on("click", ".tc-text__readmore", function(){
		$(this).closest('.tc-text').addClass("active");
		$(this).remove();
	});

    //cart close actions
    $('.basket-panel__close').on('click',closeCart);
    $('.basket-panel__mask').on('click',closeCart);
    //cart opened actions
    $('.promotion-description__labels').hover(showPromoInfo,hidePromoInfo);
    $('.basket-panel__content--smooth-scroll').on('scroll',toggleFixingBottomCart);
    $('.category-heading__header--collapsable').on('click',toggleProductCategory)
    $('.checkout-clear-basket__actions').on('click',showModalClearCart);
    $('#checkout-empty-basket-cancel').on('click',closeModalClearCart);

});