hotspots/sklad/4init.js

////////////////////////////////////////////////////
// INIT

// brutto/netto
const idmPriceType = app_shop?.vars?.priceType || "gross";


// Zmienna trzymająca dane o ustawieniach customowych ramek rekomendacji na całym sklepie
/**
	* Obiekt konfiguracyjny ogólnych ustawień hotspotów rekomendacji.
 * 
 * @typedef {object} idmGeneralHotspotObjData
 * @property {object} options - Główne ustawienia hotspotów
 * @property {boolean} options.lazy - Czy wczytywać zawartość w trybie lazy (required).
 * @property {boolean|string} options.addToBasket - Zachowanie przy dodawaniu do koszyka:
 *    - true = przycisk dodaj do koszyka
 *    - false = brak przycisku
 *    - "range" = dodaj z wyborem zakresu (required).
 * @property {boolean|object} options.swiper - Ustawienia slidera:
 *    - true/false = włącz/wyłącz
 *    - object = konfiguracja instancji Swiper (required jeśli obiekt).
	 */
const idmGeneralHotspotObjData = {
    options: {
        lazy: true,
        addToBasket: true, // true, false, "range"
        swiper: { // true, false, obiekt z opcjami swipera
            loop: false,
            autoHeight: false,
            spaceBetween: 16,
            slidesPerView: 1.4,
            centeredSlides: true,
            centeredSlidesBounds: true,
            breakpoints: {
                550: {
                    slidesPerView: 3,
                    centeredSlides: true,
                    centeredSlidesBounds: true,
                },
                979: {
                    slidesPerView: 4,
                    centeredSlides: false,
                },
            }
        }
    }
}


// Funkcja inicjalizująca wybranego hotspota(addtobasket range - swiper)
async function idmHotspotInit(id, options={}){
  try{
    const hotspotEl = document.getElementById(id);
    if(!hotspotEl) throw new Error("Nie znaleziono elementu");
    
    // add to basket + -
    if(options?.addToBasket === "range" || 
        typeof options?.addToBasket === "undefined" && typeof idmGeneralHotspotObjData === "object" && idmGeneralHotspotObjData?.options?.addToBasket === "range"){
          
      // obsługa i sprawdzanie clicków
      // hotspotEl.addEventListener("click", e=>{
      //   const wrapper = e.target.closest(".idm-products-banner__qty");
      //   if (!wrapper) return;

      //   if(e.target.classList.contains("idm-products-banner__qty-input")) return e.target.select();

      //   const input = wrapper.querySelector(".idm-products-banner__qty-input");
      //   const step = parseFloat(wrapper.dataset.sellBy || "1");
      //   const precision = parseInt(wrapper.dataset.precision || "0");
      //   const max = parseFloat(wrapper.dataset.max || "999999");
      //   let current = parseFloat(input.value) || 0;

      //   if (e.target.classList.contains("idm-products-banner__qty-increase")) {
      //     current += step;
      //     if (current > max){
      //       current = max;
      //       rangeMaxAlert(max)
      //     }
      //   } else if (e.target.classList.contains("idm-products-banner__qty-decrease")) {
      //     current -= step;
      //     if (current < step){
      //       current = step;
      //       rangeMinAlert(step)
      //     } 
      //   }
      //   input.value = current.toFixed(precision);
      // });
      // sprawdzanie na input
      // hotspotEl.querySelectorAll(".idm-products-banner__qty-input").forEach(inp=>{
      //   inp.addEventListener("input", e=>{
      //     if(e.target.value > +e.target.max){
      //       rangeMaxAlert(e.target.max)
      //       e.target.value = +e.target.max
      //     }
      //     if(e.target.value < +e.target.min){
      //       rangeMinAlert(e.target.min)
      //       e.target.value = +e.target.min;
      //     }
      //   });
      // })
    
    }

    // swiper || slick
    if(options?.swiper || 
        typeof options?.swiper === "undefined" && typeof idmGeneralHotspotObjData === "object" && idmGeneralHotspotObjData?.options?.swiper){

      
      // Opcje swipera
      let swiperOptions = typeof options.swiper === "object" ? options.swiper : "";
      if(typeof options.swiper === "object") swiperOptions = options.swiper;
      else if(typeof idmGeneralHotspotObjData === "object" && typeof idmGeneralHotspotObjData?.options?.swiper === "object"){
        swiperOptions = idmGeneralHotspotObjData?.options?.swiper;
        swiperOptions.navigation = {
            nextEl: `#${id} .idm-button-next`,
            prevEl: `#${id} .idm-button-prev`,
        }
      }else{
        swiperOptions = {
            loop: false,
            autoHeight: false,
            spaceBetween: 16,
            slidesPerView: 1.4,
            centeredSlides: true,
            centeredSlidesBounds: true,
            breakpoints: {
            550: {
                slidesPerView: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
            },
            979: {
                slidesPerView: 4,
                centeredSlides: false,
            },
            },
            navigation: {
                nextEl: `#${id} .idm-button-next`,
                prevEl: `#${id} .idm-button-prev`,
            },
        }
      }

      // Wywołanie swipera
      const selectedSwiper = new HotspotSlider({
        selector: `#${id} .swiper`,
        hotspotName: `${id}`,
        options: swiperOptions,
      });
      await selectedSwiper.init();
    }
  }catch(err){
    console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
  }
}

console.log("init")