Update 31/07/2023

Maychuchinhhang/js/main_mobile.js

@@ -0,0 +1,162 @@
+$(document).ready(function () {
+  // GLOBAL CALL
+  globalHandler();
+
+  // PAGE CALL
+  homepageHandler();
+  categoryHandler();
+  productDetailHandler();
+
+});
+
+
+// 
+function globalHandler() {
+  swiperBannerHeaderTop();
+  mmenuHandler();
+  arccodionHandler();
+}
+
+//
+function swiperBannerHeaderTop() {
+  new Swiper(".swiper-banner-header-top", {
+    slidesPerView: 1,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+  });
+}
+
+// 
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionBestSeller();
+  swiperSectionCategory();
+}
+
+// SWIPER SECTION HERO
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    slidesPerView: 1,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+function swiperSectionBestSeller() {
+  new Swiper(".swiper-section-best-seller", {
+    slidesPerView: 2,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    breakpoints: {
+      768: {
+        slidesPerView: 3,
+      },
+    },
+  });
+}
+
+function swiperSectionCategory() {
+  new Swiper(".swiper-section-category", {
+    slidesPerView: 2.2,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    breakpoints: {
+      768: {
+        slidesPerView: 3.2,
+      },
+    },
+  });
+}
+
+//
+function categoryHandler() {
+
+}
+
+// 
+function productDetailHandler() {
+
+}
+
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 8,
+  slidesPerView: 5,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 0,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  navigation: {
+    nextEl: ".swiper-button-next",
+    prevEl: ".swiper-button-prev",
+  },
+  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
+  }
+});

Maychuchinhhang/js/main_pc.js

@@ -0,0 +1,195 @@
+$(document).ready(function () {
+  // GLOBAL CALL
+  globalHandler();
+
+  // PAGE CALL
+  homepageHandler();
+  categoryHandler();
+  productDetailHandler();
+
+});
+
+
+// 
+// 
+function globalHandler() {
+  swiperBannerHeaderTop();
+}
+
+function swiperBannerHeaderTop() {
+  new Swiper(".swiper-banner-header-top", {
+    slidesPerView: 1,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+  });
+}
+
+// 
+// 
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionBestSeller();
+  swiperSectionCollection();
+}
+
+// SWIPER SECTION HERO
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    slidesPerView: 1,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+function swiperSectionBestSeller() {
+  new Swiper(".swiper-section-best-seller", {
+    slidesPerView: 4,
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+  });
+}
+
+function swiperSectionCollection() {
+  new Swiper(".swiper-section-collection", {
+    slidesPerView: 5,
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+  });
+}
+
+// 
+//
+function categoryHandler() {
+
+}
+
+// 
+// 
+function productDetailHandler() {
+  swiperSectionRelativeProduct();
+  hoverGalleryThumbs();
+  ratingHover();
+  if (window.screen.availWidth > 576) $('[data-fancybox="gallery"]').fancybox({ thumbs: { autoStart: true } });
+}
+
+function swiperSectionRelativeProduct() {
+  new Swiper(".swiper-relative-product", {
+    slidesPerView: 5,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+  });
+}
+
+function hoverGalleryThumbs() {
+  $('.gallery-thumbs .swiper-slide-hover').on('mouseover', function () {
+    galleryTop.slideTo($(this).index());
+  })
+  // $('.gallery-thumbs .swiper-slide').on('click', function () {
+  //   let srcImg = $(this).find('img').attr('src');
+  //   $(`[data-fancybox="gallery"][href="${srcImg}"]`).click();
+  // })
+}
+
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 10,
+  slidesPerView: 1,
+  direction: 'vertical',
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+  allowTouchMove: false
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 0,
+  slidesPerView: 1,
+  speed: 1000,
+  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();
+      }
+    },
+  },
+});
+
+// FUNC REVIEW FORM
+function showReviewForm() {
+  $(".js-form-review").fadeIn();
+  $(".rate-riview-right a").attr("href", "javascript:hideReviewForm()");
+  $(".rate-riview-right a").html("Đóng lại !");
+  $(".rate-riview-right a").addClass("close-btt")
+}
+
+function hideReviewForm() {
+  $(".js-form-review").fadeOut();
+  $(".rate-riview-right a").attr("href", "javascript:showReviewForm()");
+  $(".rate-riview-right a").html("Gửi đánh giá của bạn ");
+  $(".rate-riview-right a").removeClass("close-btt")
+}