TheMallBd/js/app.js

// header on scroll sticky

window.addEventListener('scroll', function(){
  var header = document.querySelector('.header');
  header.classList.toggle("sticky", window.scrollY > 220);
})


// header search btn for mobile screen

const searchBar = document.querySelector(".search")

const searchButton = document.querySelector(".search-btn-mobile")

  if ( searchBar && searchButton) {
    searchButton.addEventListener("click", () => {
      searchBar.classList.toggle("active")
    })
  }


  // header mega menu
  const megaMenuContainer = document.querySelectorAll(".megamenu-parrent");
  const menuItemsAll = document.querySelectorAll(".menu-items");


  // megamenu open close for mobile
  function megamenuClickToggle () {

    if(megaMenuContainer) {
      megaMenuContainer.forEach(container => {
  
        const megaButton = container.querySelector(".collapse-buton");
  
        const menuItems = container.querySelector(".menu-items")
  
        if(megaButton && menuItems) {
          megaButton.addEventListener("click", () => {
            menuItems.classList.toggle("active");
  
            menuItemsAll.forEach(item => {
              if (item !== menuItems) {
                item.classList.remove("active")
              }
            })
          })
        }
      })
    }

  };

  // for desktop megamenu open
  function megamenuHoverOpen  () {
    if(megaMenuContainer) {
      megaMenuContainer.forEach(container => {
  
        const menuItems = container.querySelector(".menu-items")

          container.addEventListener("mouseover", () => {
            menuItems.classList.add("active");

            menuItemsAll.forEach(item => {
              if (item !== menuItems) {
                item.classList.remove("active")
              }
            })
          })

      })
    }
  };

  // for desktop megamenu close
  function megamenuHoverClose  () {
    if(megaMenuContainer) {
      megaMenuContainer.forEach(container => {
  
        const menuItems = container.querySelector(".menu-items")

          container.addEventListener("mouseleave", () => {
            console.log("first")
            menuItems.classList.remove("active");
          })

      })
    }
  };


  const resizeFunction = () => {
    console.log(window.innerWidth)
    if(window.innerWidth > 1199) {
      megamenuHoverOpen();
      megamenuHoverClose();
    } else {
      megamenuClickToggle();
    }
  };

  resizeFunction();

  window.addEventListener("resize", ()=> {
    resizeFunction()
  });

    // header mega menu end


    
  // header mega sub-menu

  const megaSubMenu = document.querySelectorAll('.megamenu-submenu .items');

  const subMenuItemsAll = document.querySelectorAll('.megamenu-submenu .submenu-items')

  if(megaSubMenu) {

    megaSubMenu.forEach(menu => {
      const subMenuBtn = menu.querySelector('.submenu-buton');
      const subMenuItems = menu.querySelector('.submenu-items')
  
      if (subMenuItems && subMenuBtn) {
  
        subMenuBtn.addEventListener('click', () => {
          subMenuItems.classList.toggle('active')
    
          subMenuItemsAll.forEach(item => {
            if (item !== subMenuItems) {
              item.classList.remove("active")
            }
          })
        })
        
      }
    })

  }
  // header mega sub-menu end


  // burger menu function
  const burgerMenu = document.querySelector(".burger-menu");
  const burgerMenuClose = document.querySelector(".burger-close-btn");

  const mainNav = document.querySelector(".main-nav")
        
  // open menu
  if(burgerMenu && mainNav) {
    burgerMenu.addEventListener("click", () => {
      mainNav.classList.add("active")
    })
  }
  // close menu
  if(burgerMenuClose && mainNav) {
    burgerMenuClose.addEventListener("click", () => {
      mainNav.classList.remove("active")
    })
  }
  // burger menu function end



// fileter sidebar function
          // filter open button
    const filterOpenBtn = document.querySelector("#filter-button");
          // filter close button
    const filterCloseBtn = document.querySelector('.filter-close-btn');

          // filter sidebar container 
    const filterContainer = document.querySelector('.filter');

          // filter open open function
   if (filterOpenBtn && filterContainer) {
    filterOpenBtn.addEventListener("click", () => {
      filterContainer.classList.add("active")
     });
   }
   
          // filter close button
   if (filterContainer && filterCloseBtn) {
    filterCloseBtn.addEventListener("click", () => {
      filterContainer.classList.remove("active")
     });
   }
// fileter sidebar function end






  //  checkout sidebar function 
          // checkout open desktop button
  const checkoutProductBtnDesktop = document.querySelector('.checkout-product-btn-desktop')

          // checkout open mobile button
  const checkoutProductBtnMobile = document.querySelector('.checkout-product-btn-mobile')

          // checkout close button
  const checkoutContainerCloseBtn = document.querySelector('.cross-btn')

          // checkout container
  const checkoutContainer = document.querySelector('.checkout-container')


          // checkout open function for desktop
      if(checkoutProductBtnDesktop && checkoutContainer) {
        checkoutProductBtnDesktop.addEventListener('click', () => {

          // hide fillter sidebar if open
          if (filterContainer) {
            filterContainer.classList.remove("active")
          }

          // open checkout sidebar
          checkoutContainer.style.display = "block";

        })
      };

              // checkout open function for mobile
      if(checkoutProductBtnMobile && checkoutContainer ) {
        checkoutProductBtnMobile.addEventListener('click', () => {
          
          // hide fillter sidebar if open
          if (filterContainer) {
            filterContainer.classList.remove("active")
          }

          // open checkout sidebar
          checkoutContainer.style.display = "block";
        })
      };

              // checkout close function
      if(checkoutContainerCloseBtn && checkoutContainer) {
        checkoutContainerCloseBtn.addEventListener('click', () => {
          checkoutContainer.style.display = "none"
        })
      }
  //  checkout sidebar function end


   




// all carousel

    // homepage hero banner slider home page
    const bannerSlider = new Swiper(".bannerSlider", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      }
    });


    // category slider home page
      const categorySlider = new Swiper('.categorySlider', {
        loop: false,
        slidesPerView: 5,
        spaceBetween: 30,
        loopedSlides: 1,
        breakpoints: { 
          0: { 
            slidesPerView: 5,
          spaceBetween: 10,

          },
          576: { 
            slidesPerView: 4,
          },
          993: { 
            slidesPerView: 5,

          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });


      // Feture brand slider  home page
      const featuredBrands = new Swiper('.featuredBrands', {
        loop: false,
        slidesPerView: 4,
        spaceBetween: 30,
        loopedSlides: 1,
        navigation: false,
        breakpoints: { 
          0: { 
            slidesPerView: 2,
          },
          576: { 
            slidesPerView: 3,
          },
          993: { 
            slidesPerView: 5,

          }
        },
      });


      // Feture brand slider  home page
      const trendingStories = new Swiper('.trendingStories', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        loopedSlides: 1,
        navigation: false,
        breakpoints: { 
          0: { 
            slidesPerView: 1,
          },
          576: { 
            slidesPerView: 2,
          },
          993: { 
            slidesPerView: 3,

          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });



      // all product nav slider brand slider all product page
      const allProductNav = new Swiper('.all-product-nav-slider', {
        loop: false,
        slidesPerView: 8,
        spaceBetween: 8,
        loopedSlides: 1,
        navigation: false
      });




      // // product details page carousel

          // thumb carousel
          var productThumb = new Swiper('.productThumb', {
            loop: true,
            loopedSlides: 1,
            spaceBetween: 10,
            slidesPerView: 2,
            direction: 'vertical',

            freeMode: true,
            breakpoints: { 
                0: { 
                  direction: 'horizontal', 
                  spaceBetween: 15,
                  slidesPerView: 4,
                  centeredSlides: true,
                },
                993: { 
                  direction: 'vertical', 
                  spaceBetween: 15,
                  slidesPerView: 3,

                }
              }
          });

          // productSlider carousel
          var productSlider = new Swiper('.productSlider', {
                loop: true,
                spaceBetween: 10,
                loopedSlides: 1,
                centeredSlides: true,
                freeMode: true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                  disabledClass: 'disabled_swiper_button'
                },
                thumbs: {
                  swiper: productThumb,
                },
            });

// all carousel end








// simple light box

  
  let gallery =  new SimpleLightbox('.gallery a', {});

  if(gallery) {
    gallery.on('show.simplelightbox', function () {
        // do something…
    });
  }






  // checkout page stepper

  const step = document.getElementsByClassName("step");

  if (step) {

    var currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(currentTab); // Display the current tab
    
    function showTab(n) {
        // This function will display the specified tab of the form...
        var x = document.getElementsByClassName("step");
        x[n].style.display = "block";
        //... and fix the Previous/Next buttons:
        if (n == 0) {
          document.getElementById("prevBtn").style.display = "none";
        } else {
          document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
          document.getElementById("nextBtn").innerHTML = "Submit";
        } else {
          document.getElementById("nextBtn").innerHTML = "Next";
        }
        //... and run a function that will display the correct step indicator:
        fixStepIndicator(n)
    }
    
    function nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName("step");
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        currentTab = currentTab + n;
        // if you have reached the end of the form...
        if (currentTab >= x.length) {
          // ... the form gets submitted:
          document.getElementById("checkoutForm").submit();
          return false;
        }
        // Otherwise, display the correct tab:
        showTab(currentTab);
    }
    
    function validateForm() {
        // This function deals with validation of the form fields
        var x, y, z, w, i, valid = true;
        x = document.getElementsByClassName("step");
        y = x[currentTab].getElementsByTagName("input");
        z = x[currentTab].getElementsByTagName("select");
        w = x[currentTab].getElementsByTagName("textarea");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
          // If a field is empty...
          if (y[i].value == "") {
            // add an "invalid" class to the field:
            y[i].className += " invalid";
            // and set the current valid status to false
            valid = false;
          }
        }

        for (i = 0; i < z.length; i++) {
          // If a field is empty...
          if (z[i].value == "") {
            // add an "invalid" class to the field:
            z[i].className += " invalid";
            // and set the current valid status to false
            valid = false;
          }
        }

        for (i = 0; i < w.length; i++) {
          // If a field is empty...
          if (w[i].value == "") {
            // add an "invalid" class to the field:
            w[i].className += " invalid";
            // and set the current valid status to false
            valid = false;
          }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
          document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
        }
        return valid; // return the valid status
    }
    
    function fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
        var i, x = document.getElementsByClassName("stepIndicator");
        for (i = 0; i < x.length; i++) {
          x[i].className = x[i].className.replace(" active", "");
        }
        //... and adds the "active" class on the current step:
        x[n].className += " active";
    }

  }