141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
$(function () {
|
|
if ($('.illustration_product_slider').length) {
|
|
var swiperProductSlider = new Swiper('.illustration_product_slider', {
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'progressbar',
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-slide-next',
|
|
prevEl: '.swiper-slide-prev',
|
|
},
|
|
})
|
|
}
|
|
})
|
|
|
|
$(function () {
|
|
$('#nav_tabs li').first().addClass('active')
|
|
var productList = $('#product-preview-box .scontainer-content')
|
|
$('.product-preview', productList).first().addClass('active')
|
|
activateProductColors()
|
|
activateProductDrafts()
|
|
activateProductBanner()
|
|
|
|
$('#nav_tabs li a').on('click', function (event) {
|
|
event.preventDefault()
|
|
var boxHref = $(this).attr('href').substring(1)
|
|
$(this).parent().parent().find('li').removeClass('active')
|
|
$(this).parent().addClass('active')
|
|
|
|
activateProductBox(boxHref)
|
|
activateProductColors(boxHref)
|
|
activateProductDrafts(boxHref)
|
|
activateProductBanner(boxHref)
|
|
|
|
if ($(this).attr('colors')) {
|
|
$('#product-colors-preview-box').show();
|
|
let colorsArr = $(this).attr('colors').split(' ');
|
|
activateProductColorsTabs(colorsArr);
|
|
} else {
|
|
$('#product-colors-preview-box').hide();
|
|
}
|
|
})
|
|
|
|
function activateProductBox(boxHref) {
|
|
$('.product-preview', productList).removeClass('active')
|
|
$(productList).find(`#${boxHref}`).addClass('active')
|
|
}
|
|
|
|
function activateProductColors(boxHref = '') {
|
|
if (boxHref === '') {
|
|
$('#product-colors-box .product-colors').first().addClass('active')
|
|
} else if ($('#product-colors-box .product-colors').length > 1) {
|
|
$('#product-colors-box .product-colors').removeClass('active')
|
|
$('#product-colors-box .product-colors').each(function () {
|
|
if ($(this).attr('model') === boxHref) {
|
|
$(this).addClass('active')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
function activateProductDrafts(boxHref = '') {
|
|
if (boxHref === '') {
|
|
$('#product-drafts-box .product-drafts').first().addClass('active')
|
|
} else if ($('#product-drafts-box .product-drafts').length > 1) {
|
|
$('#product-drafts-box .product-drafts').removeClass('active')
|
|
$('#product-drafts-box .product-drafts').each(function () {
|
|
if ($(this).attr('model') === boxHref) {
|
|
$(this).addClass('active')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
function activateProductBanner(boxHref = '') {
|
|
if (boxHref === '') {
|
|
$('#product-banners-box .product-banner').first().addClass('active')
|
|
} else if ($('#product-banners-box .product-banner').length > 1) {
|
|
$('#product-banners-box .product-banner').removeClass('active')
|
|
$('#product-banners-box .product-banner').each(function () {
|
|
if ($(this).attr('model') === boxHref) {
|
|
$(this).addClass('active')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function activateProductColorsTabs(colors) {
|
|
console.log(colors);
|
|
|
|
if (colors && typeof colors === 'object') {
|
|
$('#nav_tabs_colors li').each(function() {
|
|
var href = $(this).find('a').attr('href').substring(1);
|
|
if (!colors.includes(href)) {
|
|
$(this).hide();
|
|
} else {
|
|
$(this).show();
|
|
}
|
|
});
|
|
|
|
let firstVisible = $('#nav_tabs_colors li:visible').first();
|
|
if (firstVisible.length > 0) {
|
|
firstVisible.find('a').trigger('click');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
var productColorsList = $("#product-colors-preview-box .scontainer-content")
|
|
|
|
$("#nav_tabs_colors li a").on("click", function (e) {
|
|
e.preventDefault()
|
|
|
|
var boxColorHref = $(this).attr("href").substring(1)
|
|
$(this).parent().parent().find("li").removeClass("active")
|
|
$(this).parent().addClass("active")
|
|
|
|
activateProductColorsBox(boxColorHref)
|
|
})
|
|
|
|
$("#nav_tabs_colors li").first().addClass("active")
|
|
$(".colors-preview", productColorsList).first().addClass("active")
|
|
|
|
function activateProductColorsBox(boxColorHref) {
|
|
$(".colors-preview", productColorsList).removeClass("active")
|
|
$(productColorsList).find(`#${boxColorHref}`).addClass("active")
|
|
}
|
|
})
|
|
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
|
|
$(document).ready(function () {
|
|
$('#product-colors-box img').each(function () {
|
|
var img = $(this)
|
|
var src = img.attr('data-src')
|
|
img.wrap('<a href="' + src + '" data-fancybox></a>')
|
|
})
|
|
|
|
Fancybox.bind('[data-fancybox]', {})
|
|
})
|