Wylaczenie dodawania do ulubionych w modalu

README.md

@@ -59,6 +59,7 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo
 - Nie znaleziono metody graphql
 - Najniższa cena
 - Drugie Zdjęcie
+- Wystąpił błąd w trakcie dodawania produktu
 
 ### Przykłady UŻYCIA ###
 ##### Jedna ramka - obiekt ######

klasa.js

@@ -464,7 +464,7 @@ class IdmHotspot{
         addToCompare: false,
 
         // WYBÓR
-        // selectSize: false,
+        selectSize: false,
         selectVersion: false,
 
         // SWIPER
@@ -512,16 +512,9 @@ class IdmHotspot{
       this.handleShowSecondImage = this.handleShowSecondImage.bind(this);
       this.handleHideSecondImage = this.handleHideSecondImage.bind(this);
       this.handleSelectVersion = this.handleSelectVersion.bind(this);
+      this.handleSelectSize = this.handleSelectSize.bind(this);
 
       this.init();
-
-
-      // WCZYTANIE PONOWNIE DLA KOSZYKA
-      if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){
-        app_shop.run(()=>{
-          this.init();
-        }, "all", "#Basket", true)
-      }
   }
 
 
@@ -632,7 +625,7 @@ class IdmHotspot{
       // markup pojedynczego produktu
       let singleMarkup = "";
       singleMarkup += `
-      <div class="product hotspot__product swiper-slide d-flex flex-column ${prod.price.price[this.priceType].value === 0 ? "--phone" : ""}" data-id="${prod.id}">
+      <div class="product hotspot__product swiper-slide d-flex flex-column ${prod.price.price[this.priceType].value === 0 ? "--phone" : ""}" data-id="${prod.id}" data-type="${prod.type}">
           ${this.markupProductInnerHTML(prod)}
       </div>`;
       
@@ -682,7 +675,7 @@ class IdmHotspot{
   }
 
   markupFavorite(prod){
-    if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function") return "";
+    if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function" || this.hotspotEl.closest(".modal")) return "";
     
     return `<span 
         data-href="#add_favorite" 
@@ -693,7 +686,7 @@ class IdmHotspot{
   }
 
   markupVersions(prod){
-    if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
+    if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length < 2 ) return "";
 
     // let MAX_VERSION_AMOUNT = 5;
     // if(app_shop.vars.view > 2){
@@ -855,8 +848,11 @@ class IdmHotspot{
       let markup = "";
       if(!this.options.addToBasket) return markup;
 
+      const prodTotalAmount = this.getProdTotalAmount(prod);
+
       // link do produktu jak nie jest to zwykły produkt
-      if(prod.type !== "product" || prod.sizes[0].amount === 0) markup = `<a class="btn --solid --medium add_to_basket__link" href="${prod.href}">Zobacz produkt</a>`;
+      
+      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">
                           <input name="mode" type="hidden" value="1">
@@ -901,25 +897,32 @@ class IdmHotspot{
   }
 
   markupSize(prod){
-    return `<input name="size" type="hidden" value="${prod.sizes[0].id}">`;
+    // 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 name="size" type="hidden" value="${prod.sizes[0].id}">`;
 
     
-    // const sizesName = `${this.id}-${prod.id}`;
+    const sizesName = `${this.id}-${prod.id}`;
-    // return `
-    // <div class="product__select_sizes">
-    //   ${prod.sizes.reduce((acc, val)=>{
-    //       const inputId = `${sizesName}-${val.id}`;
 
-    //       return acc + `
+    let selectedDefault = false;
-    //         <label class="product__size_select" for="${sizesName}">
+
-    //           <input type="radio" name="${sizesName}" id="${sizesName}"/>
+    return `
-    //           <span>${val.name}</span>
+    <input name="size" type="hidden" value="${prod.sizes[0].id}">
-    //         </label>
+    <div class="product__select_sizes">
-    //       `
+      ${prod.sizes.reduce((acc, val, index)=>{
-    //     }, "")}
+          const inputId = `${sizesName}-${val.id}`;
-    //   </div>
+
-    // `;
+          const isSelected = !selectedDefault && val?.amount !== 0 ? true : false;
+          if(isSelected) selectedDefault = true;
+
+          return acc + `
+            <label class="product__size_select" for="${inputId}">
+              <input type="radio" name="${sizesName}" id="${inputId}" ${isSelected ? "checked" : ""} ${val?.amount === 0 ? "disabled" : ""} data-value="${val.id}"/>
+              <span>${val.name}</span>
+            </label>
+          `
+        }, "")}
+      </div>
+    `;
   }
 
   markupHotspotContainer(){ 
@@ -973,6 +976,7 @@ class IdmHotspot{
     return `
       <div class="idm_hotspot__skeleton_product">
         <div class="idm_hotspot__skeleton_img idm-loading"></div>
+        ${this.options.showOpinions ? `<div class="idm_hotspot__skeleton_opinions idm-loading"></div>` : ""}
         <div class="idm_hotspot__skeleton_name idm-loading"></div>
         <div class="idm_hotspot__skeleton_price idm-loading"></div>
         ${this.options.addToBasket ? `<div class="idm_hotspot__skeleton_btn idm-loading"></div>` : ""}
@@ -1174,6 +1178,18 @@ class IdmHotspot{
     this.reloadProduct(prodEl, closestVersion.dataset.productId);
   }
 
+  handleSelectSize(e){
+    const inputEl = e.target.closest("input[type='radio']");
+    if(!inputEl) return;
+
+    const newValue = inputEl?.dataset?.value;
+    const hiddenSizeInputEl = e.target.closest("form.add_to_basket")?.querySelector("input[type='hidden'][name='size']");
+
+    if(!hiddenSizeInputEl || !newValue) return inputEl.checked = false;
+
+    hiddenSizeInputEl.value = newValue;
+  }
+
  /**
    * Lazy-load hotspotu – wczytuje dane dopiero, gdy element pojawi się w viewportcie.
    */
@@ -1289,6 +1305,10 @@ class IdmHotspot{
   // FUNKCJE POMOCNICZE
   // ========================================================
 
+  getProdTotalAmount(prod){
+    return prod.sizes.reduce((acc, val) => val === -1 || acc === -1 ? -1 : acc + val, 0);
+  }
+
   /**
    * Wyświetla alert o maksymalnej ilości produktu.
    */
@@ -1739,6 +1759,21 @@ class IdmHotspot{
     }
   }
 
+
+  afterInitOnce(){
+    if(this.initialized) return;
+
+    // WCZYTANIE PONOWNIE DLA KOSZYKA
+    if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){
+      app_shop.run(()=>{
+        this.init();
+        console.log("test", this.hotspotEl)
+      }, "all", "#Basket", true)
+    }
+
+    this.initialized = true;
+  }
+
   initExternalFunctions(){
     this.addToFavFn = app_shop.fn?.shoppingList?.addProductToList;
   }
@@ -1748,7 +1783,6 @@ class IdmHotspot{
    */
   async fillHotspot(){
     // Zdefiniowanie funkcji do dodawania do ulubionych
-    this.initExternalFunctions();
     try{
       if(!this.products){
         if((!this?.query?.graphFn || !this?.query?.string) && !this.source?.link) this.setQueryData();
@@ -1758,9 +1792,13 @@ class IdmHotspot{
         if(!this.products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]);
       }
 
+      // Skeleton
       this.hotspotEl.querySelector(".idm_hotspot__skeleton")?.remove();
       this.hotspotEl.classList.remove("--hotspot-loading");
       
+      
+      this.initExternalFunctions();
+
       // Wstawienie markupa na strone
       if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup());
       else if(this.hotspotEl.querySelector(".hotspot")){
@@ -1771,7 +1809,8 @@ class IdmHotspot{
       }
 
       // init swiper + add to basket
-      this.afterInit();
+      await this.afterInit();
+      this.afterInitOnce();
     }catch(err){
       console.error(idmHotspotTextObject["Wystąpił błąd"], err);
       this.hotspotEl.remove();
@@ -1837,6 +1876,9 @@ class IdmHotspot{
 
     // Wybór wersji
     if(this.options?.selectVersion) prodEl.querySelector(".product__versions")?.addEventListener("click", this.handleSelectVersion);
+
+    // Wybór rozmiaru
+    if(this.options?.selectSize) prodEl.querySelector(".product__select_sizes")?.addEventListener("click", this.handleSelectSize);
   }
 
   /**

ramka.txt

@@ -1,11 +1,11 @@
 1. Ramka
 
+bugi selectSize + addToBasket="range"
+
 - wybór rozmiaru/wersji?? Wykluczenie powtarzających się wersji
 wersja max 5 zdjęć i później + może????
 
 
-limit dla produktów z linku
-
 - zakres cen?????????????
 - Wybór kolorystyczny???
 - AAAAA - banner na hotspocie
@@ -15,9 +15,25 @@ limit dla produktów z linku
 - 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
 
-
+- dodawanie do koszyka zestawów itp??
 - własne klasy
 
 Stara ramka
 - getProductXML=t
-- slick
+- slick
+
+
+
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+BUG Z RAMKAMI HTML jak się używa extends!!!!!!
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+
+cacheowanie ramek do indexedDB
+
+
+
+
+kolejny bug jakis zaraz  sobie przypomnek
+
+Dodawanie do ulubionych nie ma jak działać w modalu, daj warunek żeby to wyłączyć

style.less

@@ -2,6 +2,7 @@
 .idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{
   display: flex;
   justify-content: center;
+  flex-direction: column;
 }
 @media (max-width: 978px){
   .idm__hotspot .add_to_basket__button.btn:not(.--error):not(.--success)::before{
@@ -72,26 +73,32 @@
   display: flex;
   flex-wrap: nowrap;
   overflow: hidden;
-  height: 50rem;
+  min-height: 30rem;
   &_product{
     flex-shrink: 0;
     padding-right: 16px;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
   }
   &_img{
     aspect-ratio: ~"1 / 1";
-    .skeleton(100%, auto, 100%, auto, 8px);
+    margin-bottom: 2.5rem;
+    .skeleton(100%, auto, 100%, auto, 5px);
+  }
+  &_opinions{
+    margin-bottom: 1rem;
+    .skeleton(75%, 2rem, 75%, 2rem, 0);
   }
   &_name{
+    margin-bottom: 1.6rem;
     .skeleton(100%, 4.2rem, 100%, 4.2rem, 0)
   }
   &_price{
+    margin-bottom: 1.6rem;
     .skeleton(50%, 2rem, 50%, 2rem, 0)
   }
   &_btn{
-    .skeleton(100%, 4.6rem, 100%, 4.6rem, 8px)
+    .skeleton(100%, 4.6rem, 100%, 4.6rem, 5px)
   }
 }
 
@@ -385,6 +392,56 @@
   }
 }
 
+/* Rozmiary */
+.product__select_sizes{
+  order: 3;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 0.3rem;
+  background: #fff;
+  input[type="radio"]{
+    display: none;
+  }
+  .product__size_select{
+    width: 4.5rem;
+    height: 4.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    transition: border 0.2s;
+    &:hover{
+      border-color: #000;
+    }
+    &:not(:has(input:checked)){
+      cursor: pointer;
+    }
+    &:has(input:checked){
+      box-shadow: 0 0 0 1px #000;
+      border-color: #000;
+    }
+  }
+}
+
+@media (min-width: 979px){
+  .product__select_sizes{
+    clip-path: inset(0 0 100% 0);
+    transition: all 0.2s;
+    position: absolute;
+    top: calc(100%);
+    padding-top: 1rem;
+  }
+  .product:hover .product__select_sizes{
+    clip-path: inset(0 0 0 0);
+  }
+  .idm__hotspot .swiper-wrapper:has(.product:hover .product__select_sizes){
+    z-index: 51!important;
+  }
+}
+
+
 /* Ogolne */
 .idm__hotspot{
   .product__name{