Fix bugow zwiazanych z dodawaniem do koszyka

README.md

@@ -162,6 +162,18 @@ new IdmHotspot({
  * @property {number} [cssVariables.nameClamp] - liczba wyświetlanych linijek tekstu nazwy produktu 
 
 
+
+ * @property {object} banner - Obiekt z bannerami gdzie klucz to położenie obiektu. Możliwe klucze obiektów to:
+      - "top" - banner nad produktami ale pod nazwą
+      - "left" - banner po lewej stronie (na desktop, na mobile jest na górze)
+      - "right" - banner po prawej stronie (na desktop, na mobile jest na dole)
+      - "bottom" - banner pod produktami
+      - "slider-1" - banner znajdujący się w środku ramek rekomendacji na danej pozycji podanej po myślniku
+ * @property {object.<string, object>} [banner.*] - Konfiguracja bannera dla danej pozycji
+ * @property {string} banner.*.html - Kod HTML bannera (np. `<a>`, `<img>`, itp.)
+ * @property {Function} [banner.*.callbackFn] - Funkcja callback wywoływana po wyrenderowaniu bannera otrzymująca w argumencie instancje hotspota
+
+
  * @type {Hotspot[]}
  */
 ```

klasa.js

@@ -441,7 +441,11 @@ class IdmHotspot{
             slidesPerView: 4,
             centeredSlides: false,
         },
-    }
+    },
+    // navigation: {
+    //     nextEl: `#${this.id} .swiper-button-next`,
+    //     prevEl: `#${this.id} .swiper-button-prev`,
+    // },
   }
   // ============================
   // DOMYŚLNE OPCJE HOTSPOTA
@@ -481,13 +485,13 @@ class IdmHotspot{
         // SWIPER
         swiper: true,
         swiperScrollbar: false,
-      }
+      },
   }
   /**
    * Konstruktor
    * @param {object} object - Dane konfiguracyjne hotspotu
    */
-  constructor({id, title, classes, placement, source, query, options = {}, hotspotEl, products, cssVariables}){
+  constructor({id, title, classes, placement, source, query, options = {}, banner, hotspotEl, products, cssVariables}){
       this.id = id || "";
       this.title = title || "";
       this.classes = classes || "";
@@ -509,8 +513,10 @@ class IdmHotspot{
         ...IdmHotspot.idmDefaultHotspotOptions.cssVariables,
         ...cssVariables,
       };
+
+
+      this.banner = banner || false
       
-      //
       // this.hotspots = {};
       this.priceType = app_shop?.vars?.priceType || "gross";
 
@@ -629,9 +635,9 @@ class IdmHotspot{
       return markup;
   }
 
-    /**
+  /**
-   * Tworzy markup dla pojedynczego produktu.
+    * Tworzy markup dla pojedynczego produktu.
-   */
+  */
   markupProduct(prod){
       // markup pojedynczego produktu
       let singleMarkup = "";
@@ -663,7 +669,7 @@ class IdmHotspot{
             ${this.markupSeries(prod)}
             ${this.markupOpinions(prod)}
             <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
-            ${this.markupPrice({prod})}
+            ${this.markupPrice(prod)}
             ${this.markupAddToBasket(prod)}
           </div>`;
   }
@@ -694,7 +700,8 @@ class IdmHotspot{
   }
 
   markupVersions(prod){
-    if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length < 2 ) return "";
+    if(!this.options?.selectVersion) return "";
+    if(!prod.group?.versions || prod.group?.versions?.length < 2 ) return `<div class="product__versions --desktop-hidden"></div>`;
 
     // let MAX_VERSION_AMOUNT = 5;
     // if(app_shop.vars.view > 2){
@@ -843,7 +850,7 @@ class IdmHotspot{
   }
 
 
-  markupPrice({prod, sizeId}){
+  markupPrice(prod, sizeId=false){
       let priceRoot = prod.price;
 
       const getOmnibusDetailsObject = {productData: prod};
@@ -911,19 +918,26 @@ class IdmHotspot{
   }
 
   markupAddToBasket(prod){
-      let markup = "";
+    let markup = "";
-      if(!this.options.addToBasket) return markup;
+    if(!this.options.addToBasket) return markup;
-
+    
-      const prodTotalAmount = this.getProdTotalAmount(prod);
+    const prodCurrentSizeAmount = this.options.selectSize ? prod.sizes.find(size=>size.amount !== 0).amount : prod.sizes[0].amount;
-      const prodCurrentSizeAmount = this.options.selectSize ? prod.sizes.find(size=>size.amount !== 0).amount : prod.sizes[0].amount;
+    const prodTotalAmount = this.options.selectSize ? this.getProdTotalAmount(prod) : prodCurrentSizeAmount;
+    
+    /* Sprawdzanie czy hotpsot znajduje się w formularzu */
+      const addToBasketHTMLTag = this.isClosestForm ? "div" : "form";
 
       // link do produktu jak nie jest to zwykły produkt
+      const buttonMarkup = `<button type="${this.isClosestForm ? "button" : "submit"}" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
+                              <span>${idmHotspotTextObject["Do koszyka"]}</span>
+                          </button>`
+
       
       if(prod.type !== "product" || prodTotalAmount === 0) markup = `<a class="btn --solid --medium add_to_basket__link" href="${prod.href}">Zobacz produkt</a>`;
       else if(this.options.addToBasket === "range") // +-
-          markup = `<form class="add_to_basket --range" action="/basketchange.php" type="post">
+          markup = `<${addToBasketHTMLTag} class="add_to_basket --range" ${this.isClosestForm ? "" : `action="/basketchange.php" type="post"`}>
-                          <input name="mode" type="hidden" value="1">
+                          <input class="product__add_mode" ${this.isClosestForm ? "" : `name="mode"`} type="hidden" value="1">
-                          <input name="product" type="hidden" value="${prod.id}">
+                          <input class="product__add_id" ${this.isClosestForm ? "" : `name="product"`} type="hidden" value="${prod.id}">
                           ${this.markupSize(prod)}
                           <div class="idm-products-banner__qty"
                               data-sell-by="${prod.unit?.sellBy}"
@@ -933,8 +947,8 @@ class IdmHotspot{
                           <button type="button" class="idm-products-banner__qty-decrease" aria-label="${idmHotspotTextObject["Zmniejsz ilość"]}">−</button>
 
                           <input type="number"
-                                  name="number"
+                          ${this.isClosestForm ? "" : `name="number"`}
-                                  class="idm-products-banner__qty-input"
+                                  class="idm-products-banner__qty-input product__add_number"
                                   value="${prod.unit?.sellBy}"
                                   step="${prod.unit?.sellBy}"
                                   min="${prod.unit?.sellBy}"
@@ -945,27 +959,23 @@ class IdmHotspot{
                           <button type="button" class="idm-products-banner__qty-increase" aria-label="${idmHotspotTextObject["Zwiększ ilość"]}">+</button>
                           </div>
 
-                          <button type="submit" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
+                          ${buttonMarkup}
-                              <span>${idmHotspotTextObject["Do koszyka"]}</span>
+                      </${addToBasketHTMLTag}>`;
-                          </button>
-                      </form>`;
       else // Zwykłe dodanie do koszyka
           markup = `
-      <form class="add_to_basket" action="/basketchange.php" type="post">
+      <${addToBasketHTMLTag} class="add_to_basket" ${this.isClosestForm ? "" : `action="/basketchange.php" type="post"`}>
-                          <input name="mode" type="hidden" value="1">
+                          <input class="product__add_mode" type="hidden" value="1" ${this.isClosestForm ? "" : `name="mode"`}>
-                          <input name="product" type="hidden" value="${prod.id}">
+                          <input class="product__add_id" type="hidden" value="${prod.id}" ${this.isClosestForm ? "" : `name="product"`}>
                           ${this.markupSize(prod)}
-                          <input name="number" type="hidden" value="${prod.unit?.sellBy}">
+                          <input class="product__add_number" type="hidden" value="${prod.unit?.sellBy}" ${this.isClosestForm ? "" : `name="number"`}>
-                          <button type="submit" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
+                          ${buttonMarkup}
-                              <span>${idmHotspotTextObject["Do koszyka"]}</span>
+                      </${addToBasketHTMLTag}>`;
-                          </button>
-                      </form>`;
       return markup;
   }
 
   markupSize(prod){
     // return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
-    if(!this.options?.selectSize || prod.sizes.length === 1) return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
+    if(!this.options?.selectSize || prod.sizes.length === 1) return `<input class="product__add_size" name="size" type="hidden" value="${prod.sizes[0].id}">`;
 
     
     const sizesName = `${this.id}-${prod.id}`;
@@ -973,7 +983,7 @@ class IdmHotspot{
     let selectedDefault = false;
 
     return `
-    <input name="size" type="hidden" value="${prod.sizes[0].id}">
+    <input class="product__add_size" type="hidden" value="${prod.sizes[0].id}" ${this.isClosestForm ? "" : `name="size"`}>
     <div class="product__select_sizes">
       ${prod.sizes.reduce((acc, val, index)=>{
           const inputId = `${sizesName}-${val.id}`;
@@ -1052,6 +1062,11 @@ class IdmHotspot{
     `
   }
 
+  // Banner
+  markupBannerContainer({html, position}){
+    return `<div class="idm_hotspot__banner ${position ? `--${position}` : ""} ${position === "slider" ? `swiper-slide` : ""}">${html}</div>`
+  }
+
   // ========================================================
   // HANDLERY ZDARZEŃ
   // ========================================================
@@ -1060,7 +1075,7 @@ class IdmHotspot{
    * Obsługuje dodanie produktu do koszyka (GraphQL).
    */
   async handleAddToBasket(e){
-    const formEl = e.target.closest("form.add_to_basket");
+    const formEl = e.target.closest(`${this.isClosestForm ? "div" : "form"}.add_to_basket`);
     if(!formEl) return;
     try{
       // pobieranie danych i elementów
@@ -1068,9 +1083,9 @@ class IdmHotspot{
       const buttonEl = formEl.querySelector(".add_to_basket__button");
       e.preventDefault();
 
-      const id = formEl.querySelector("input[name='product']")?.value;
+      const id = formEl.querySelector("input.product__add_id")?.value;
-      const size = formEl.querySelector("input[type='hidden'][name='size']")?.value;
+      const size = formEl.querySelector("input.product__add_size")?.value;
-      const number = formEl.querySelector("input[name='number']")?.value;
+      const number = formEl.querySelector("input.product__add_number")?.value;
 
       // dodanie do koszyka
       const res = await fetch(`/graphql/v1/`, {
@@ -1096,8 +1111,7 @@ class IdmHotspot{
           const existingBasketBlockQuantity = document.querySelector(`.basket__block[data-product-id="${id}"][data-product-size="${size}"] input.buy__more_input.quantity__input[type="number"]`);
           
           // Dodanie do ilości produktu jeśli już był dodany do koszyka
-          if(existingBasketBlockQuantity) existingBasketBlockQuantity.value = +existingBasketBlockQuantity.value + 1;
+          if(existingBasketBlockQuantity) existingBasketBlockQuantity.value = +existingBasketBlockQuantity.value + number;
-          
           
           // Przeładowanie koszyka na stronie basketedit.html
           app_shop.fn?.basket?.reloadForm();
@@ -1250,7 +1264,7 @@ class IdmHotspot{
 
     //1. Zmiana Wybranego inputa
     const sizeId = inputEl?.dataset?.value;
-    const hiddenSizeInputEl = e.target.closest("form.add_to_basket")?.querySelector("input[type='hidden'][name='size']");
+    const hiddenSizeInputEl = e.target.closest("form.add_to_basket")?.querySelector("input.product__add_size");
 
     if(!hiddenSizeInputEl || !sizeId) return inputEl.checked = false;
 
@@ -1265,7 +1279,7 @@ class IdmHotspot{
     const priceEl = productEl.querySelector(".product__prices");
     if(!priceEl) return;
 
-    priceEl.outerHTML = this.markupPrice({prod: productData, sizeId});
+    priceEl.outerHTML = this.markupPrice(productData, sizeId);
 
     this.setHeightDefault();
 
@@ -1853,6 +1867,8 @@ class IdmHotspot{
         </h3>`);
       }
 
+      if(this.banner) this.placeBanners();
+
       await this.initSwiper();
 
       // IDM setHeight
@@ -1867,6 +1883,43 @@ class IdmHotspot{
     }
   }
 
+  placeBanners(){
+    if(!this.placeBanners) return;
+    
+    const productsWrapperEl = this.hotspotEl.querySelector(".products__wrapper");
+    for(let [key, value] of Object.entries(this.banner)){
+      const currBannerMarkup = this.markupBannerContainer({html: value?.html || "", position: key.split("-")[0] });
+      if(key === "top"){
+        productsWrapperEl.insertAdjacentHTML("beforebegin", currBannerMarkup);
+      }
+      else if(key === "left"){
+        productsWrapperEl.insertAdjacentHTML("beforebegin", currBannerMarkup);
+      }
+      else if(key === "right"){
+        productsWrapperEl.insertAdjacentHTML("afterend", currBannerMarkup);
+      }
+      else if(key === "bottom"){
+        productsWrapperEl.insertAdjacentHTML("afterend", currBannerMarkup);
+      }
+      else{
+        const slidePosition = Number(key.split("-")[1]) - 1;
+
+        if(!Number.isInteger(slidePosition)) return;
+
+        const allProducts = productsWrapperEl.querySelectorAll(".product");
+
+        let productIndex = slidePosition;
+        if(slidePosition > allProducts.length - 1) productIndex = allProducts.length - 1;
+        if(slidePosition < 0) productIndex = 0
+
+        const bannerPosition = slidePosition < 0 ? "beforebegin" : "afterend";
+
+        allProducts[productIndex]?.insertAdjacentHTML(bannerPosition, currBannerMarkup)
+      }
+      value?.callbackFn?.(this);
+    }
+  }
+
 
   afterInitOnce(){
     if(this.initialized) return;
@@ -1928,25 +1981,44 @@ class IdmHotspot{
    /**
    * Inicjuje instancję Swipera dla hotspotu.
    */
-  async initSwiper(){
+  async initSwiper(isReinitialized){
     try{
       // swiper || slick
       if(this.options?.swiper){
         // Wywołanie swipera
-        const selectedSwiper = new HotspotSlider({
+        this.swiperFn = new HotspotSlider({
           selector: `#${this.id} .swiper`,
           hotspotName: `${this.id}`,
           options: this.options.swiper,
         });
-        await selectedSwiper.init();
+        await this.swiperFn.init();
+
+        // // //Wywołanie swipera v2 (nie działa jeszcze)
+        // const { Slider } = await appModules?.load("Slider");
+        // if(!Slider) throw new Error("Brak modułu slidera")
+        // const idmSwiper = new Slider();
+        // await idmSwiper.init(this.options.swiper);
+        // if(!this.hotspotEl.querySelector(".swiper")) throw new Error("Brak elementu swipera")
+        // this.swiperFn = await idmSwiper.setupSlider({ element: this.hotspotEl.querySelector(".swiper") });
         
-        if(this.options.swiperScrollbar) new IdmSwiperProgress(selectedSwiper, `#${this.id} .swiper`);
+        if(this.options.swiperScrollbar && !isReinitialized) this.swiperFnProgress = new IdmSwiperProgress(this.swiperFn, `#${this.id} .swiper`);
+        else if(this.options.swiperScrollbar && isReinitialized) this.swiperFnProgress.reattachSwiperFn(this.swiperFn);
       }
     }catch(err){
       console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
     }
   }
 
+  async reInitSwiper(differentOptions){
+    try{
+      if(differentOptions) this.options.swiper = differentOptions;
+      this.swiperFn?.slider?.slider?.destroy?.();
+      this.initSwiper(true);
+    }catch(err){
+      console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
+    }
+  }
+
   /**
    * Inicjuje eventy dla produktów w hotspotcie.
    */
@@ -1958,13 +2030,15 @@ class IdmHotspot{
   initSingleEvent(prodEl){
     // DODAWANIE DO KOSZYKA
     if(this.options?.addToBasket){
-      const addToBasketEl = prodEl.querySelector("form.add_to_basket");
+      
+      // Warunek this.isClosestForm w przypadku gdy hotspot znajduje się już w środku formularza
+      const addToBasketEl = prodEl.querySelector(`${this.isClosestForm ? "button.add_to_basket__button" : "form.add_to_basket"}`);
+      addToBasketEl?.addEventListener(`${this.isClosestForm ? "click" : "submit"}`, this.handleAddToBasket);
 
-      addToBasketEl?.addEventListener("submit", this.handleAddToBasket);
       // + -
       if(this?.options?.addToBasket === "range"){
-        addToBasketEl?.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
+        addToBasketEl?.closest(".add_to_basket")?.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
-        addToBasketEl?.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
+        addToBasketEl?.closest(".add_to_basket")?.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
       }
     }
     // Dodaj do ulubionych
@@ -2023,6 +2097,9 @@ class IdmHotspot{
     // Ustawienie wszystkich zmiennych CSS
     this.cssSetAll();
 
+    // Sprawdzenie czy hotspot znajduje się w formularzu(dla doawania do koszyka)
+    this.isClosestForm = !!this.hotspotEl.closest("form");
+
     if(this.options?.lazy) this.handleObserveHotspotOnce();
     else this.fillHotspot();
   }
@@ -2064,6 +2141,13 @@ class IdmSwiperProgress {
     this.swiper.on("breakpoint", () => {this.updateBarWidth()});
   }
 
+  reattachSwiperFn(newSwiperFn){
+    this.swiper = newSwiperFn?.slider?.slider ?? newSwiperFn?.slider ?? newSwiperFn;
+    this.progressEl.style.width = "";
+    this.progressEl.style.left = "";
+    this.updateBarWidth();
+  }
+
   updateBarWidth() {
     const { slidesPerGroup, slidesPerView } = this.swiper.params;
     const totalSlides = this.swiper.slides.length;
@@ -2138,7 +2222,6 @@ class IdmSwiperProgress {
     handle.addEventListener("touchstart", startDrag);
   }
 }
-
 // ========================================================
 // TOOLTIP
 // ========================================================
@@ -2242,7 +2325,7 @@ async function idmPrepareHotspotObject(selectedContainerEl){
   }
 
   if(Object.keys(source).length === 0){
-    console.error();
+    console.error("Brak metody pobrania ramek rekomendacji");
     selectedContainerEl?.remove();
     return;
   }

ramka.txt

@@ -1,16 +1,17 @@
-1. Ramka
+bug - ramka nie działa dla banneru slider-1 itp
-- AAAAA - banner na hotspocie
+problem z funkcją new HotspotSlider i tym że orzekuje tam hotspotów idosellowych!!!!
+
 
 - sprawdzenie zdjęcia producenta
 - Wykluczenie powtarzających się wersji
 - dodanie efektu 3d
+- ramka z zakładkami
 
 wersja max 5 zdjęć i później + może????
-
 Wyświetlanie filmu na hover?
 
 - zakres cen?????????????
-- Wybór kolorystyczny???
+- Wybór kolorystyczny?????
 - czy zapisywać wszystkie hotspoty do jakiegoś app_shop.fn.idmHotspots = {"#idmMainHotspot1": {}}
 - czy jakoś inteligentnie ucinać niepotrzebne query na podstawie wybranych opcji? chyba za dużo roboty i nie ma sensu
 
@@ -27,6 +28,4 @@ cacheowanie ramek do indexedD
 
 zapisywanie querySelectorów produktów??
 
-rozmiary i wersje - dropdown
+rozmiary i wersje - dropdown
-
-Dodawanie do this.products klikniętego produktu na wersje, ale tak żeby nie wczytywał się ponownie, jakaś baza danych wersji??

style.less

@@ -328,6 +328,9 @@
   }
   @media (min-width: 979px){
     --idm-hotspot-version-height: 55px;
+    .product__versions.--desktop-hidden{
+      display: none!important;
+    }
   }
   .product__versions{
     display: grid;
@@ -400,7 +403,7 @@
   
 }
 @media (min-width: 979px){
-  .idm__hotspot .product:has(.product__versions){
+  .idm__hotspot .product:has(.product__version_single){
     .product__versions{
       clip-path: inset(0% 0 100% 0);
     }
@@ -456,6 +459,7 @@
     &:has(input:disabled){
       opacity: 0.6;
       cursor: not-allowed!important;
+      background: #f2f2f2;
     }
     
     &:has(input:checked){
@@ -490,6 +494,64 @@
 }
 
 
+/* Banner */
+.idm__hotspot:has(.idm_hotspot__banner){
+
+  &:has(.idm_hotspot__banner.--left, .idm_hotspot__banner.--right){
+    @media (min-width: 757px){
+      .hotspot{
+        display: flex;
+        flex-wrap: wrap;
+        h3{
+          flex-basis: 100%;
+        }
+      }
+      .idm_hotspot__banner{
+        &.--left, &.--right{
+          width: 25%;
+          display: inline-block;
+          // position: relative;
+          // z-index: 100;
+        }
+      }
+      .products__wrapper {
+        width: calc(75% - 1rem);
+      }
+    }
+  }
+  &:has(.idm_hotspot__banner.--left){
+    .products__wrapper {
+      margin-left: 1rem;
+    }
+    .swiper-button-prev{
+      left: 27%;
+    }
+  }
+  &:has(.idm_hotspot__banner.--right){
+    .products__wrapper {
+      margin-right: 1rem;
+    }
+    .swiper-button-next{
+      right: 27%;
+    }
+  }
+
+  .idm_hotspot__banner.--top{
+    margin-bottom: 1rem;
+  }
+  &:has(.idm_hotspot__banner.--top) .hotspot{
+    .swiper-initialized ~ .swiper-button-prev, .swiper-initialized ~ .swiper-button-next{
+      top: auto;
+      bottom: calc(60% - var(--swiper-navigation-top-offset));
+    }
+  }
+
+  .idm_hotspot__banner.--bottom{
+    margin-top: 1rem;
+  }
+}
+
+
 /* Ogolne */
 .idm__hotspot{
   .product__name{