257 lines
9.3 KiB
JavaScript
257 lines
9.3 KiB
JavaScript
theme.CarouselProducts = (function() {
|
|
|
|
function CarouselProducts(container) {
|
|
this.$container = $(container);
|
|
|
|
//var sectionId = this.$container.attr('data-section-id');
|
|
|
|
//this.settings = {};
|
|
|
|
this.namespace = '.carousel-products';
|
|
|
|
this.onLoad();
|
|
};
|
|
|
|
CarouselProducts.prototype = $.extend({}, Section.prototype, CarouselProducts.prototype, {
|
|
_checkProduct: function ($slide, beforeAjax) {
|
|
var _ = this,
|
|
handle = $slide.attr('data-handle');
|
|
|
|
if(handle) {
|
|
if(beforeAjax) {
|
|
beforeAjax($slide);
|
|
}
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'https://' + window.location.hostname + '/products/' + handle,
|
|
data: {
|
|
view: 'collection'
|
|
},
|
|
cache: false,
|
|
dataType: 'html',
|
|
success: function (data) {
|
|
var $data = $(data).clone();
|
|
|
|
$data.find('img').one('load', function () {
|
|
$slide.add(_.$slick.find('.slick-cloned[data-handle="' + handle + '"]')).html($data).removeAttr('data-handle');
|
|
});
|
|
|
|
$slide.trigger('loaded');
|
|
}
|
|
});
|
|
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
onLoad: function() {
|
|
var _ = this,
|
|
$carousel = this.$container.find('[data-js-carousel]'),
|
|
$slick = this.$container.find('[data-js-carousel-slick]'),
|
|
$control = this.$container.find('[data-carousel-control]'),
|
|
$products = this.$container.find('[data-carousel-items]'),
|
|
xhr = null;
|
|
|
|
this.$control = $control;
|
|
|
|
if($slick.length) {
|
|
var $slides = $slick.find('> *'),
|
|
$prev = $carousel.find('[data-js-carousel-prev]'),
|
|
$next = $carousel.find('[data-js-carousel-next]'),
|
|
$arrows = $prev.add($next),
|
|
count = +$carousel.attr('data-count'),
|
|
autoplay = $carousel.attr('data-autoplay') === 'true' ? true : false,
|
|
speed = +$carousel.attr('data-speed'),
|
|
infinite = $carousel.attr('data-infinite') === 'true' ? true : false,
|
|
arrows = $carousel.attr('data-arrows') === 'true' ? true : false,
|
|
bullets = $carousel.attr('data-bullets') === 'true' ? true : false;
|
|
|
|
this.$slick = $slick;
|
|
|
|
if(arrows) {
|
|
function arrowsPosition() {
|
|
var max_height = 0;
|
|
|
|
$slick.find('.carousel__item img').each(function () {
|
|
max_height = Math.max(max_height, $(this).innerHeight());
|
|
});
|
|
|
|
$arrows.css({top: max_height / 2});
|
|
};
|
|
|
|
$window.on('theme.resize.carousel-products', arrowsPosition);
|
|
}
|
|
|
|
function initSlick() {
|
|
$slick.one('init', function() {
|
|
if(arrows) {
|
|
arrowsPosition();
|
|
}
|
|
|
|
$carousel.removeClass('invisible');
|
|
|
|
theme.Loader.unset($carousel.parent());
|
|
});
|
|
|
|
$slick.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
|
var check_before = nextSlide - 1,
|
|
check_after = nextSlide + count;
|
|
|
|
function beforeAjax($slide) {
|
|
$slides.unbind('loaded');
|
|
|
|
$slide.one('loaded', function () {
|
|
theme.ProductReview.update();
|
|
});
|
|
};
|
|
|
|
_._checkProduct($slick.find('[data-slick-index="' + check_before + '"]'), beforeAjax);
|
|
|
|
for(var i = check_after; i > currentSlide + 1; i--) {
|
|
_._checkProduct($slick.find('[data-slick-index="' + i + '"]'), beforeAjax);
|
|
}
|
|
});
|
|
|
|
if(theme.Tooltip) {
|
|
$slick.on('afterChange', function () {
|
|
theme.Tooltip.init();
|
|
});
|
|
}
|
|
|
|
$slick.slick({
|
|
lazyLoad: false,
|
|
arrows: arrows,
|
|
prevArrow: $prev,
|
|
nextArrow: $next,
|
|
dots: bullets,
|
|
dotsClass: 'slick-dots d-flex flex-wrap flex-center list-unstyled mt-7',
|
|
adaptiveHeight: true,
|
|
autoplay: autoplay,
|
|
autoplaySpeed: speed,
|
|
infinite: infinite,
|
|
slidesToShow: count,
|
|
slidesToScroll: count,
|
|
rtl: theme.rtl,
|
|
responsive: [
|
|
{
|
|
breakpoint: theme.breakpoints.values.xl,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3
|
|
}
|
|
},
|
|
{
|
|
breakpoint: theme.breakpoints.values.md,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
},
|
|
{
|
|
breakpoint: theme.breakpoints.values.sm,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
}
|
|
]
|
|
});
|
|
};
|
|
|
|
initSlick();
|
|
|
|
$control.on('click', 'a', function (e) {
|
|
var $this = $(this);
|
|
|
|
if(!$this.hasClass('active')) {
|
|
if(xhr) {
|
|
xhr.abort();
|
|
}
|
|
|
|
theme.Loader.set($carousel);
|
|
|
|
$carousel.css({
|
|
'min-height': $products.innerHeight()
|
|
});
|
|
|
|
var collection = $this.attr('data-collection');
|
|
|
|
xhr = $.ajax({
|
|
type: 'GET',
|
|
url: '/collections/' + collection,
|
|
cache: false,
|
|
data: {
|
|
view: 'carousel',
|
|
constraint: 'max_count=' + $products.attr('data-max-count') + '+products_pre_row=' + $products.attr('data-products-pre-row') + '+async_ajax_loading=' + $products.attr('data-async-ajax-loading')
|
|
},
|
|
dataType: 'html',
|
|
success: function (data) {
|
|
$carousel.addClass('invisible');
|
|
|
|
$slick.slick('destroy').off();
|
|
|
|
$slick.one('init', function () {
|
|
$carousel.removeAttr('style');
|
|
|
|
theme.Loader.unset($carousel);
|
|
});
|
|
|
|
$products.html(data);
|
|
|
|
$slides = $slick.find('> *');
|
|
|
|
initSlick();
|
|
|
|
theme.ImagesLazyLoad.update();
|
|
theme.ProductReview.update();
|
|
if(theme.Tooltip) {
|
|
theme.Tooltip.init();
|
|
}
|
|
|
|
$control.find('a').removeClass('active');
|
|
$this.addClass('active');
|
|
|
|
xhr = null;
|
|
}
|
|
});
|
|
}
|
|
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
|
|
if(theme.is_loaded) {
|
|
theme.ImagesLazyLoad.update();
|
|
theme.ProductReview.update();
|
|
if(theme.Tooltip) {
|
|
theme.Tooltip.init();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onUnload: function() {
|
|
this.$container.off(this.namespace);
|
|
|
|
if(this.$slick) {
|
|
this.$slick.slick('destroy').off();
|
|
this.$slick = null;
|
|
|
|
$window.unbind('theme.resize.carousel-products');
|
|
}
|
|
|
|
this.$control.off();
|
|
|
|
if(theme.Tooltip) {
|
|
theme.Tooltip.destroy();
|
|
}
|
|
}
|
|
});
|
|
|
|
return CarouselProducts;
|
|
})();
|
|
|
|
$(function() {
|
|
theme.sections.register('carousel-products', theme.CarouselProducts);
|
|
}); |