174 lines
3.5 KiB
JavaScript
174 lines
3.5 KiB
JavaScript
(function($) {
|
|
"use strict"
|
|
|
|
// Mobile Nav toggle
|
|
$('.menu-toggle > a').on('click', function (e) {
|
|
e.preventDefault();
|
|
$('#responsive-nav').toggleClass('active');
|
|
})
|
|
|
|
// Fix cart dropdown from closing
|
|
$('.cart-dropdown').on('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
|
|
/////////////////////////////////////////
|
|
|
|
|
|
// Products Slick
|
|
$('.products-slick').each(function() {
|
|
var $this = $(this),
|
|
$nav = $this.attr('data-nav');
|
|
|
|
$this.slick({
|
|
slidesToShow: 4,
|
|
slidesToScroll: 1,
|
|
autoplay: true,
|
|
infinite: true,
|
|
speed: 300,
|
|
dots: false,
|
|
arrows: true,
|
|
appendArrows: $nav ? $nav : false,
|
|
responsive: [{
|
|
breakpoint: 991,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
}
|
|
},
|
|
]
|
|
});
|
|
});
|
|
|
|
// Products Widget Slick
|
|
$('.products-widget-slick').each(function() {
|
|
var $this = $(this),
|
|
$nav = $this.attr('data-nav');
|
|
|
|
$this.slick({
|
|
infinite: true,
|
|
autoplay: true,
|
|
speed: 300,
|
|
dots: false,
|
|
arrows: true,
|
|
appendArrows: $nav ? $nav : false,
|
|
});
|
|
});
|
|
|
|
/////////////////////////////////////////
|
|
|
|
// Product Main img Slick
|
|
$('#product-main-img').slick({
|
|
infinite: true,
|
|
speed: 300,
|
|
dots: false,
|
|
arrows: true,
|
|
fade: true,
|
|
asNavFor: '#product-imgs',
|
|
});
|
|
|
|
// Product imgs Slick
|
|
$('#product-imgs').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
arrows: true,
|
|
centerMode: true,
|
|
focusOnSelect: true,
|
|
centerPadding: 0,
|
|
vertical: true,
|
|
asNavFor: '#product-main-img',
|
|
responsive: [{
|
|
breakpoint: 991,
|
|
settings: {
|
|
vertical: false,
|
|
arrows: false,
|
|
dots: true,
|
|
}
|
|
},
|
|
]
|
|
});
|
|
|
|
// Product img zoom
|
|
var zoomMainProduct = document.getElementById('product-main-img');
|
|
if (zoomMainProduct) {
|
|
$('#product-main-img .product-preview').zoom();
|
|
}
|
|
|
|
|
|
|
|
/////////////////////////////////////////
|
|
|
|
// Input number
|
|
$('.input-number').each(function() {
|
|
var $this = $(this),
|
|
$input = $this.find('input[type="number"]'),
|
|
up = $this.find('.qty-up'),
|
|
down = $this.find('.qty-down');
|
|
|
|
down.on('click', function () {
|
|
var value = parseInt($input.val()) - 1;
|
|
value = value < 1 ? 1 : value;
|
|
$input.val(value);
|
|
$input.change();
|
|
updatePriceSlider($this , value)
|
|
})
|
|
|
|
up.on('click', function () {
|
|
var value = parseInt($input.val()) + 1;
|
|
$input.val(value);
|
|
$input.change();
|
|
updatePriceSlider($this , value)
|
|
})
|
|
});
|
|
|
|
var priceInputMax = document.getElementById('price-max'),
|
|
priceInputMin = document.getElementById('price-min');
|
|
|
|
priceInputMax.addEventListener('change', function(){
|
|
updatePriceSlider($(this).parent() , this.value)
|
|
});
|
|
|
|
priceInputMin.addEventListener('change', function(){
|
|
updatePriceSlider($(this).parent() , this.value)
|
|
});
|
|
|
|
function updatePriceSlider(elem , value) {
|
|
if ( elem.hasClass('price-min') ) {
|
|
console.log('min')
|
|
priceSlider.noUiSlider.set([value, null]);
|
|
} else if ( elem.hasClass('price-max')) {
|
|
console.log('max')
|
|
priceSlider.noUiSlider.set([null, value]);
|
|
}
|
|
}
|
|
|
|
// Price Slider
|
|
var priceSlider = document.getElementById('price-slider');
|
|
if (priceSlider) {
|
|
noUiSlider.create(priceSlider, {
|
|
start: [1, 999],
|
|
connect: true,
|
|
step: 1,
|
|
range: {
|
|
'min': 1,
|
|
'max': 999
|
|
}
|
|
});
|
|
|
|
priceSlider.noUiSlider.on('update', function( values, handle ) {
|
|
var value = values[handle];
|
|
handle ? priceInputMax.value = value : priceInputMin.value = value
|
|
});
|
|
}
|
|
|
|
|
|
|
|
})(jQuery);
|