Dodawanie do ulubionych

README.md

@@ -5,18 +5,19 @@ Funkcje js składające się na customowe ramki rekomendacji
 - kod zawiera **app_shop.fn.idmGetOmnibusDetails** który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
 - kod zawiera FrontendComponents/helper-functions/tooltip i FrontendComponents/helper-functions/swiper-scrollbar
 - kod używa naszego idmSetHeight, ale jest to wstawione jako metoda klasowa, nie jako coś osobnego.
+- Opcja dodawania do ulubionych options.addToFavorites działa tylko jak odpowiednio zmieni się komponent Listy zakupowych w układzie by kod był dostępny poza kartą towaru
 
-### Pliki ###
+## Pliki ##
 - **style.css** - style wstawiane do css
 - **klasa.js** - kod js
 
-### Użycie ###
+## Użycie ##
 1. Wstawienie całego kodu do komponentu (najlepiej chyba Hotspoty javascript RAYPATH - #IdoMods
  w zwykły Javascript)/dodatku(uwaga tutaj na literały)
 2. Ustawienie defaultowych ustawień na początku klasy w **idmDefaultSwiperConfig** i w **idmDefaultHotspotOptions**
 3. Wstawienie HTML lub Obiektu js z odpowienimi danymi i wywołanie funkcji od tworzenia ramek
 
-#### Dodatkowe informacje ####
+### Dodatkowe informacje ###
 Można użyć extends w innym miejscu (np tym razem w wydzielonym JS) żeby nadpisać jakąś metodę, bez zmian w kodzie ramki. Będzie to przydatne w przypadku gdzie trzeba będzie zaktualizować kod ramki.
 
 **Przykład**
@@ -58,7 +59,7 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo
 - Nie znaleziono metody graphql
 - Najniższa cena
 
-#### Przykłady UŻYCIA ####
+### Przykłady UŻYCIA ###
 ##### Jedna ramka - obiekt ######
 ```
 new IdmHotspot({
@@ -94,6 +95,7 @@ new IdmHotspot({
  * @property {Function} query.graphFn - Funkcja do pobierania danych.
  * @property {object} options - Ustawienia dla hotspotu (required).
  * @property {boolean} options.lazy - Czy wczytywać w trybie lazy.
+ * @property {boolean} options.addToFavorites - Czy włączać dodawanie do ulubionych(DZIAŁA TYLKO PO ZMIANACH SZABLONOWYCH)
  * @property {boolean|string} options.addToBasket - Obsługa koszyka:
  *    - true = włącz
  *    - false = wyłącz

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]]);
+      })
+    } 
   }
 
   /**

style.less

@@ -123,3 +123,26 @@
     }
   }
 }
+
+
+/* favorite */
+.product__additional{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  z-index: 1;
+  &> *{
+    cursor: pointer;
+  }
+}
+.product__favorite{
+  display: block;
+  &::before{
+    content: '\E86D';
+    font-family: FontAwesome;
+    font-size: 2.6rem;
+    height: 2.9rem;
+  }
+}