TheMallBd/js/app.js

// header on scroll sticky

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


// 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");


  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")
            }
          })
        })
      }
    })
  }


  // header sub-menu

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


  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")
          }
        })
      })
      
    }
  })


  // 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")
    })
  }



// 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";
    }

  }