du_an_khach_hang/Viccos/js/main_pc.js

$(document).ready(function () {
  // GLOBAL CALL
  globalHandler();

  // PAGE CALL
  homepageHandler();
  categoryHandler();
  productDetailHandler();
  articleHandler();
});

// GLOBAL HANDLER
function globalHandler() {
  // Hura.UI.loadGroup(lazy_load_group);
  runLazyImageLoad();
  viewMoreHandler('.js-vm-block');
  searchHandler('#js-search-bar', 'search');
  closeWhenClickOutside();

  checkLanguageSelected();

  AOS.init({
    easing: 'ease-in-out',
    duration: 600,
    once: true,
    delay: 0,
  });
}

// CHECK LANGUAGE SELECTED
function checkLanguageSelected() {
  const lang_check = `{{ global.user_settings.product_display_type }}`;
  if (lang_check === 'vi|en') $('.language-current option[value="vi|en"]').attr('selected', 'selected');
}

// TOGGLE DISPLAY MENU MOBILE
function toggleMenu() {
  $("#js-global-menu").toggleClass("active");
  $("body").toggleClass("overflow-hidden");
}

// TOGGLE SLIDE MENU ITEM
function slideMenuItem(_this, type) {
  $(_this).toggleClass("active");

  switch (type) {
    case "sub-menu":
      $("#js-sub-menu").slideToggle();
      break;
    case "sub-item":
      $(_this)
        .closest(".sub-item")
        .find(".cat-child")
        .first()
        .slideToggle();
      break;
    default:
      break;
  }
}

// ARCCODION HANDLER
function arccodionMBHandler(_this) {
  if (window.screen.availWidth > 768) return;

  const arccodionItem = $(_this).closest(".accordion");
  const arccodionIcon = arccodionItem.find(".accordion-icon");
  const arccodionContent = arccodionItem.find(".accordion-content");

  arccodionContent.slideToggle();
  if (arccodionIcon) arccodionIcon.toggleClass('rotate');
}

// HOMEPAGE HANDLER
function homepageHandler() {
  swiperHomepageHandler();
  checkSliderFeaturesBtn();
}

// CHECK SLIDER FEATURES BUTTON
function checkSliderFeaturesBtn() {
  if (window.screen.availWidth < 576 && 1 < 2) return;
  if ($('.swiper-homepage-features .swiper-slide').length < 5 && window.screen.availWidth > 768) $('#js-f-slider-group').hide();
}

// SWIPER HOMEPAGE HANDLER
function swiperHomepageHandler() {
  swiperSectionHero();
  swiperHomepageCertificate();
  swiperProductFeatured();
  swiperHomepageFeatures();
  swiperArticleFeatured()
  swiperSectionCustomer();
}

function swiperSectionHero() {
  new Swiper(".swiper-section-hero", {
    slidesPerView: 1,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    pagination: {
      el: ".swiper-pagination",
    },
    breakpoints: {
      769: {
        pagination: {
          clickable: true,
        },
      },
    },
  });
}

function swiperHomepageCertificate() {
  new Swiper(".swiper-homepage-certificate", {
    slidesPerView: 1,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

function swiperProductFeatured() {
  new Swiper(".swiper-category-featured", {
    slidesPerView: 1.5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      577: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      769: {
        slidesPerView: 3,
      },
    },
  });
}

function swiperHomepageFeatures() {
  new Swiper(".swiper-homepage-features", {
    slidesPerView: 1.5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    breakpoints: {
      577: {
        slidesPerView: 3,
        spaceBetween: 12,
      },
      769: {
        slidesPerView: 4,
      },
    },
  });
}

function swiperArticleFeatured() {
  new Swiper(".swiper-article-featured", {
    slidesPerView: 1,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      577: {
        slidesPerView: 2,
        spaceBetween: 12,
      },
    },
  });
}

function swiperSectionCustomer() {
  new Swiper(".swiper-section-customer", {
    slidesPerView: 1.5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    pagination: {
      el: ".swiper-pagination",
      clickable: false,
    },
    breakpoints: {
      577: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      769: {
        slidesPerView: 3,
      },
    },
  });
}

//
function categoryHandler() {

}

// 
function productDetailHandler() {
  viewMoreHandler('.js-vm-block');
  swiperThumbsHandler();
  swiperSectionProHistory();
}

function swiperThumbsHandler() {
  let galleryThumbs = new Swiper(".gallery-thumbs", {
    spaceBetween: 10,
    slidesPerView: 4,
    slideToClickedSlide: true,
    freeMode: true,
    watchSlidesProgress: true,
    centerInsufficientSlides: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      768: {
        spaceBetween: 12,
      },
    },
  });

  let galleryTop = new Swiper(".gallery-top", {
    spaceBetween: 10,
    slidesPerView: 1,
    initialSlide: 1,
    speed: 1000,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    //   pauseOnMouseEnter: "true",
    // },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      768: {
        spaceBetween: 12,
      },
    },
    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();
        }
      },
    },
  });
}

function swiperSectionProHistory() {
  new Swiper(".swiper-section-pro-history", {
    slidesPerView: 2,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      569: {
        slidesPerView: 3,
        spaceBetween: 12,
      },
      769: {
        slidesPerView: 4,
      },
    },
  });
}

// 
function articleHandler() {
  swiperArticleHomeShowcase();
  swiperArticleHomeCategory();
}

function swiperArticleHomeShowcase() {
  new Swiper(".swiper-article-home-showcase", {
    slidesPerView: 1,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

function swiperArticleHomeCategory() {
  new Swiper(".swiper-article-home-category", {
    slidesPerView: 1.5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      569: {
        slidesPerView: 2,
        spaceBetween: 12,
      },
      769: {
        slidesPerView: 3,
      },
    },
  });
}