du_an_khach_hang/Alpha/js/main_pc.js

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

  // PAGE CALL
  homepageHandler();

  //categoryHanlder();

  productDetailHandler();

  //articleHandler();

  //cartHandler();

  //getOrderList();
});

// 
function globalHandler() {
  runLazyImageLoad();
  //headerCartChange();
  headerFixedScroll();
  setCategorySearch();
  swiperSectionBrand();
  tooltip();
}

// LAZY LOADING BLOCK
var lazy_load_group = [];

// LAZY LOADING IMAGE
function runLazyImageLoad() {
  var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"
  });
}

function headerFixedScroll() {
  $(window).scroll(function () {
    let distanceFromTop = $(document).scrollTop();
    const global_header = $(".global-header .header-bottom");
    const global_fixed_block = $(".global-header-fixed-block");
    const global_navbar_list = $(".global-navbar .list");
    const homepage_check = $(".homepage").length;

    if (distanceFromTop > 700) {
      if (homepage_check > 0 && !global_header.hasClass("header-fixed")) global_navbar_list.addClass("d-none");
      global_header.addClass("header-fixed");
      global_fixed_block.removeClass("d-none");
    } else {
      global_header.removeClass("header-fixed");
      global_fixed_block.addClass("d-none");
      if (homepage_check > 0) global_navbar_list.removeClass("d-none");
      else global_navbar_list.addClass("d-none");
      $(".global-header-fixed-bg").addClass("d-none");
    }
  });
}

// TOGGLE NAVBAR
function toggleNavbar() {
  $(".global-navbar .list").toggleClass("d-none");
  $(".global-header-fixed-bg").toggleClass("d-none");
}

// RESET SWIPER WRAPPER
function resetSwiperWrapper(target) {
  $(target).css("visibility", "hidden");
  setTimeout(function () {
    $(target).css("visibility", "unset");
  }, 200);
}

// VIEW MORE CONTENT
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() === "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' });
}

// TOOL TIP PRODUCT
function tooltip() {
  var w_tooltip = $("#tooltip").width();
  var h_tooltip = 0;
  var pad = 10;
  var x_mouse = 0;
  var y_mouse = 0;
  var wrap_left = 0;
  var wrap_right = 0;
  var wrap_top = 0;
  var wrap_bottom = 0;

  $(".p-item .p-img").mousemove(function (e) {
    content_tooltip = $(this).parents(".p-item").find(".p-tooltip");
    if (content_tooltip.length == 0) {
      return;
      $("#tooltip").hide();
    }

    $("#tooltip").html(content_tooltip.html());

    wrap_left = 0;
    wrap_top = $(window).scrollTop();
    wrap_bottom = $(window).height();
    wrap_right = $(window).width();
    x_mouse = e.pageX;
    y_mouse = e.pageY;
    h_tooltip = $("#tooltip").height();

    if (x_mouse + w_tooltip > wrap_right)
      $("#tooltip").css("left", x_mouse - w_tooltip - pad);
    else $("#tooltip").css("left", x_mouse + pad);

    if (y_mouse - h_tooltip < wrap_top && 1 < 2) $("#tooltip").css("top", wrap_top);
    else $("#tooltip").css("top", y_mouse - h_tooltip - pad);

    $("#tooltip").show();
  });

  $(".p-item .p-img").mouseout(function () {
    $("#tooltip").hide();
  });
}

//SEARCH CATEGORY
function setCategorySearch() {
  $("#js-cat-list a").click(function (event) {
    event.preventDefault();
    var id = $(this).attr("href");
    var name = $(this).text();

    $("#js-scat_id").attr("value", id);
    $("#js-search-cat-holder").html(name);
  });
}

function swiperSectionBrand() {
  new Swiper(".swiper-section-brand", {
    slidesPerView: 8,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      1600: {
        spaceBetween: 16,
      },
    },
  });
}

// 
function homepageHandler() {
  swiperSectionHero();
}

function swiperSectionHero() {
  new Swiper(".swiper-section-hero", {
    slidesPerView: 1,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

// 
function productDetailHandler() {
  ratingHover();
  productBottomBoxSwiper();
}

function toogleReviewForm(target) {
  $(target).toggleClass("d-block");
}

let galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 12,
  slidesPerView: 5,
  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",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  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
  }
});

// FUNC REVIEW FORM
function ratingHover() {
  $('.rating-star').hover(function () {
    $(this).addClass('hover');
    $('#star_tip').html($(this).attr('data-title'))
  },
    function () {
      $(this).removeClass('hover');
      $('#star_tip').html($('.rating-review input:checked').attr('data-title'));
    })
}

// SWIPER BOTTOM PRODUCT BOX
function productBottomBoxSwiper() {
  new Swiper(".bottom-product-box-swiper", {
    slidesPerView: 5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      1600: {
        slidesPerView: 6,
        spaceBetween: 12,
      },
    },
  });
}