175 lines
3.7 KiB
JavaScript
175 lines
3.7 KiB
JavaScript
// READY FUNCTIONS
|
|
$(document).ready(function () {
|
|
homepageHandler();
|
|
globalHandler();
|
|
})
|
|
|
|
// GLOBAL FUNCTIONS
|
|
function globalHandler() {
|
|
swiperProductThumbs();
|
|
}
|
|
|
|
function viewMoreContent(target) {
|
|
let htmlStaticBlock = $(target).find(".static-html");
|
|
let viewMoreBtn = $(target).find(".js-view-more-content");
|
|
|
|
htmlStaticBlock.toggleClass("max-height-none").toggleClass("blur");
|
|
viewMoreBtn.html().trim() === "Xem thêm +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem thêm +");
|
|
if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
function swiperProductThumbs() {
|
|
new Swiper(".swiper-product-thumbs", {
|
|
slidesPerView: 1,
|
|
spaceBetween: 12,
|
|
rewind: true,
|
|
speed: 1000,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: "true",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
1600: {
|
|
spaceBetween: 16,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
// HOMEAPGE FUNCTIONS
|
|
function homepageHandler() {
|
|
swiperSectionHero();
|
|
swiperSectionHomepageBanner();
|
|
}
|
|
|
|
function swiperSectionHero() {
|
|
new Swiper(".swiper-section-hero", {
|
|
slidesPerView: 1,
|
|
spaceBetween: 12,
|
|
rewind: true,
|
|
speed: 1000,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: "true",
|
|
},
|
|
breakpoints: {
|
|
1600: {
|
|
spaceBetween: 16,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
function swiperSectionHomepageBanner() {
|
|
new Swiper(".swiper-section-homepage-banner", {
|
|
slidesPerView: 2,
|
|
spaceBetween: 12,
|
|
rewind: true,
|
|
speed: 1000,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: "true",
|
|
},
|
|
breakpoints: {
|
|
1600: {
|
|
spaceBetween: 16,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
// PRODUCT DETAIL
|
|
function detailHandler() {
|
|
|
|
}
|
|
|
|
let galleryThumbs = new Swiper(".gallery-thumbs", {
|
|
spaceBetween: 12,
|
|
slidesPerView: 4,
|
|
slideToClickedSlide: true,
|
|
freeMode: true,
|
|
watchSlidesProgress: true,
|
|
centerInsufficientSlides: true,
|
|
breakpoints: {
|
|
1600: {
|
|
spaceBetween: 16,
|
|
},
|
|
},
|
|
});
|
|
|
|
let galleryTop = new Swiper(".gallery-top", {
|
|
spaceBetween: 12,
|
|
slidesPerView: 1,
|
|
speed: 1000,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: "true",
|
|
},
|
|
breakpoints: {
|
|
1600: {
|
|
spaceBetween: 16,
|
|
},
|
|
},
|
|
thumbs: {
|
|
swiper: galleryThumbs,
|
|
},
|
|
// AUTO SILDED AT FISRT AND END
|
|
on: {
|
|
slideChange: function () {
|
|
let activeIndex = this.activeIndex + 1;
|
|
|
|
let activeSlide = document.querySelector(
|
|
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
|
|
);
|
|
let nextSlide = document.querySelector(
|
|
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
|
|
);
|
|
let prevSlide = document.querySelector(
|
|
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
|
|
);
|
|
|
|
if (
|
|
nextSlide &&
|
|
!nextSlide.classList.contains("swiper-slide-visible")
|
|
) {
|
|
this.thumbs.swiper.slideNext();
|
|
} else if (
|
|
prevSlide &&
|
|
!prevSlide.classList.contains("swiper-slide-visible")
|
|
) {
|
|
this.thumbs.swiper.slidePrev();
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
$('[data-fancybox="gallery"]').fancybox({
|
|
thumbs: {
|
|
autoStart: true
|
|
}
|
|
});
|
|
|
|
function toggleAttr(target, _this) {
|
|
$('[data-type="attr-item-content"]').addClass('d-none');
|
|
$(target).toggleClass('d-none');
|
|
$(_this).closest('.attr-list-name').find('.title').removeClass('active');
|
|
$(_this).addClass('active');
|
|
}
|
|
|
|
// CART
|
|
function cartHandler() {
|
|
|
|
}
|
|
|
|
function toggleDisplay(target) {
|
|
$(target).toggleClass('d-none');
|
|
}
|