Dodawanie do ulubionych

klasa.js

@@ -409,6 +409,7 @@ class IdmHotspot{
       options: {
           lazy: true,
           addToBasket: true, // true, false, "range"
+          addToFavorites: false,
           swiper: true,
           callbackFn: ()=>{},
           swiperScrollbar: false,
@@ -452,6 +453,8 @@ class IdmHotspot{
   }
 
 
+
+
   // ========================================================
   // ASYNC – POBIERANIE DANYCH Z GRAPHQL
   // ========================================================
@@ -536,6 +539,9 @@ class IdmHotspot{
               <span class="product__yousave --label"></span>
               <span class="product__yousave --value"></span>
           </div>
+          <div class="product__additional">
+            ${this.markupFavorite(prod)}
+          </div>
           <a class="product__icon d-flex justify-content-center align-items-center" tabindex="-1" href="${prod.link}">
               ${this.markupImage(prod)}
               <strong class="label_icons">
@@ -554,17 +560,27 @@ class IdmHotspot{
       return singleMarkup;
   }
 
+  markupFavorite(prod){
+    if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function") return "";
+    
+    return `<span 
+        data-href="#add_favorite" 
+        class="product__favorite" role="button" tabindex="0" 
+        data-product-id="${prod.id}"
+        data-product-size="${prod.sizes?.[0]?.id || 'uniw'}">
+      </span>`;
+  }
   
   markupImage(prod){
       let markup = "";
-      if(prod.iconSmallSecond !== undefined && prod.iconSecond !== undefined) markup +=`<picture>
+      if(prod.iconSmallSecond && prod.iconSecond) markup +=`<picture>
           <source media="(min-width: 421px)" type="image/webp" srcset="${prod.icon}"/>
           <source media="(min-width: 421px)" type="image/jpeg" srcset="${prod.iconSecond}"/>
           <source media="(max-width: 420px)" type="image/webp" srcset="${prod.iconSmall}"/>
           <source media="(max-width: 420px)" type="image/jpeg" srcset="${prod.iconSmallSecond}"/>
           <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
           </picture>`;
-      else if(prod?.iconSmall !== undefined) markup += `<picture>
+      else if(prod?.iconSmall) markup += `<picture>
           <source media="(min-width: 421px)" srcset="${prod.icon}"/>
           <source media="(max-width: 420px)" srcset="${prod.iconSmall}"/>
           <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
@@ -837,6 +853,11 @@ class IdmHotspot{
     observer.observe(this.hotspotEl);
   }
 
+
+  handleAddToFav(){
+    
+  }
+
   // ========================================================
   // FUNKCJE POMOCNICZE
   // ========================================================
@@ -913,10 +934,16 @@ class IdmHotspot{
     }
   }
 
+  initExternalFunctions(){
+    this.addToFavFn = app_shop.fn?.shoppingList?.addProductToList;
+  }
+
    /**
    * Pobiera dane, wypełnia markup i inicjuje Swipera.
    */
   async fillHotspot(){
+    // Zdefiniowanie funkcji do dodawania do ulubionych
+    this.initExternalFunctions();
     try{
         if(!this.products){
           if(!this?.query?.graphFn || !this?.query?.string) this.setQueryData({
@@ -997,6 +1024,13 @@ class IdmHotspot{
         this.showTooltip(tooltipEl);
       })
     }
+    // Add to Favorites
+    if(this.options?.addToFavorites && typeof this.addToFavFn === "function"){
+      const favEl = prodEl.querySelector(".product__favorite")
+      if(favEl) favEl.addEventListener("click", ()=>{
+        this.addToFavFn([[favEl.dataset.productId, favEl.dataset.productSize]]);
+      })
+    } 
   }
 
   /**