Dodawanie do porównania

2025-11-13 15:21:46 +01:00
parent c1659c211a
commit dbb87f8356
3 changed files with 115 additions and 21 deletions
--- a/klasa.js
+++ b/klasa.js
@@ -8,6 +8,8 @@ const idmHotspotTextObject = {
  [<iai:variable vid="Bestseller"/>]: <iai:variable vid="Bestseller"/>,
  [<iai:variable vid="Nowość"/>]: <iai:variable vid="Nowość"/>,
  [<iai:variable vid="Ilość"/>]: <iai:variable vid="Ilość"/>,
+  [<iai:variable vid="Porównaj"/>]: <iai:variable vid="Porównaj"/>,
+  [<iai:variable vid="Dodaj do ulubionych"/>]: <iai:variable vid="Dodaj do ulubionych"/>,
  [<iai:variable vid="Najniższa cena"/>]: <iai:variable vid="Najniższa cena"/>,
  [<iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>]: <iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>,
  [<iai:variable vid="Zwiększ ilość"/>]: <iai:variable vid="Zwiększ ilość"/>,
@@ -410,6 +412,7 @@ class IdmHotspot{
          lazy: true,
          addToBasket: true, // true, false, "range"
          addToFavorites: false,
+          addToCompare: false,
          swiper: true,
          callbackFn: ()=>{},
          swiperScrollbar: false,
@@ -448,6 +451,8 @@ class IdmHotspot{
      this.handleAddToBasket = this.handleAddToBasket.bind(this);
      this.handleQuantityButtonClick = this.handleQuantityButtonClick.bind(this);
      this.handleQuantityInputChange = this.handleQuantityInputChange.bind(this);
+      this.handleAddToCompare = this.handleAddToCompare.bind(this);
+      this.handleAddToFav = this.handleAddToFav.bind(this);

      this.init();
  }
@@ -540,7 +545,7 @@ class IdmHotspot{
              <span class="product__yousave --value"></span>
          </div>
          <div class="product__additional">
-            ${this.markupFavorite(prod)}
+            ${this.markupAdditional(prod)}
          </div>
          <a class="product__icon d-flex justify-content-center align-items-center" tabindex="-1" href="${prod.link}">
              ${this.markupImage(prod)}
@@ -560,6 +565,25 @@ class IdmHotspot{
      return singleMarkup;
  }

+  markupAdditional(prod){
+    return `
+    ${this.markupCompare(prod)}
+    ${this.markupFavorite(prod)}
+    `;
+  }
+
+  markupCompare(prod){
+    if(!this.options?.addToCompare) return "";
+
+    return `<div class="idm-products-banner__compare-btn" data-compare-id="${prod.id}">
+      <button class="idm-products-banner__compare-icon" aria-label="${idmHotspotTextObject[<iai:variable vid="Porównaj"/>]}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 17" fill="none">
+          <path d="M19.3972 5.76602C19.3889 5.67435 19.3639 5.58268 19.3222 5.49102L16.5639 0.991016C16.5639 0.991016 16.5389 0.966016 16.5306 0.957682C16.4722 0.874349 16.3889 0.799349 16.2972 0.749349C16.1972 0.699349 16.0889 0.666016 16.0056 0.666016H15.9556C15.9556 0.666016 15.9139 0.666016 15.8889 0.666016C15.8472 0.666016 15.7972 0.666016 15.7472 0.682682L4.08056 4.10768C4.08056 4.10768 4.02223 4.13268 4.01389 4.14102C3.98056 4.15768 3.94723 4.17435 3.91389 4.19102C3.83889 4.24102 3.78056 4.29935 3.73889 4.35768L0.938894 8.87435C0.938894 8.87435 0.922228 8.91602 0.913894 8.93268C0.872228 9.01602 0.847228 9.10768 0.838894 9.19935V9.24935C0.788894 10.216 1.12223 11.1493 1.77223 11.866C2.42223 12.5827 3.31389 13.0077 4.29723 13.0577C5.26389 13.0077 6.15556 12.5827 6.81389 11.866C7.46389 11.1493 7.79723 10.216 7.75556 9.25768C7.75556 9.23268 7.75556 9.21602 7.74723 9.19935C7.73889 9.10768 7.71389 9.01602 7.67223 8.93268L5.40556 5.22435L9.39723 4.04935V15.5493H6.56389V16.991H13.6639V15.5493H10.8389V3.62435L14.3472 2.59102L12.5889 5.44102C12.5889 5.44102 12.5722 5.48268 12.5639 5.49935C12.5222 5.58268 12.4972 5.67435 12.4889 5.75768V5.81602C12.4306 6.78268 12.7722 7.71602 13.4222 8.43268C14.0722 9.14935 14.9639 9.57435 15.9472 9.62435C16.9139 9.57435 17.8056 9.14935 18.4639 8.43268C19.1139 7.71602 19.4472 6.78268 19.4056 5.82435V5.76602H19.3972ZM17.8806 6.54935C17.7889 6.96602 17.5639 7.35768 17.2389 7.64935C16.8806 7.97435 16.4222 8.16602 15.9472 8.19102C15.4722 8.15768 15.0139 7.96602 14.6556 7.64935C14.3389 7.35768 14.1139 6.97435 14.0139 6.54935H17.8806ZM14.4972 5.10768L15.9472 2.74935L17.3972 5.10768H14.4972ZM2.84723 8.53268L4.29723 6.17435L5.74723 8.53268H2.84723ZM6.23056 9.97435C6.13056 10.391 5.91389 10.7827 5.58889 11.0743C5.23056 11.3993 4.77223 11.591 4.29723 11.616C3.82223 11.5827 3.36389 11.391 3.00556 11.0743C2.68889 10.7827 2.46389 10.3993 2.36389 9.97435H6.23056Z" fill="#111111"/>
+        </svg>
+      </button>
+    </div>`
+  }
+
  markupFavorite(prod){
    if(!this.options?.addToFavorites || typeof this.addToFavFn !== "function") return "";
    
@@ -567,7 +591,7 @@ class IdmHotspot{
        data-href="#add_favorite" 
        class="product__favorite" role="button" tabindex="0" 
        data-product-id="${prod.id}"
-        data-product-size="${prod.sizes?.[0]?.id || 'uniw'}">
+        data-product-size="${prod.sizes?.[0]?.id || 'uniw'}" aria-label="${idmHotspotTextObject[<iai:variable vid="Dodaj do ulubionych"/>]}">
      </span>`;
  }
  
@@ -792,6 +816,56 @@ class IdmHotspot{
    }
  }

+   /**
+   * Obsługuje dodanie produktu do Porównania
+   */
+  async handleAddToCompare(e){
+    const compareBtnEl = e.target.closest(".idm-products-banner__compare-btn");
+    const compareId = compareBtnEl?.dataset?.compareId;
+    if (!compareBtnEl || !compareId) return;
+    e.preventDefault();
+    try {
+      compareBtnEl.classList.add("--loading");
+      const compareUrl = `/${app_shop?.vars?.language?.symbol || "pl"}/settings.html?comparers=add&product=${compareId}`;
+
+      const res = await fetch(compareUrl);
+      console.log(res);
+      if (!res.ok) throw new Error(`${<iai:variable vid="Wystąpił błąd"/>}`);
+
+      compareBtnEl.classList.add("--success");
+
+      const compareContainerQuery = "#menu_compare_product";
+      if (document.querySelector(compareContainerQuery)) {
+        app_shop.fn.load(
+          window.location.pathname,
+          [[compareContainerQuery, compareContainerQuery]],
+          function () {},
+          "?set_render=content"
+        );
+      }
+
+      setTimeout(() => {
+        compareBtnEl.classList.remove("--success");
+      }, 2000);
+    } catch (err) {
+      console.error(err);
+      Alertek.Error(`${<iai:variable vid="Coś poszło nie tak. Spróbuj ponownie później"/>}`);
+    } finally {
+      compareBtnEl.classList.remove("--loading");
+    }
+  }
+
+ /**
+   * Obsługuje dodanie produktu do Listy zakupowej
+   */
+  handleAddToFav(e){
+    const favEl = e.target.closest(".product__favorite");
+
+    if(!favEl) return;
+
+    this.addToFavFn([[favEl.dataset.productId, favEl.dataset.productSize]]);
+  }
+
  /**
   * Obsługuje kliknięcia w przyciski +/− przy wyborze ilości.
   */
@@ -853,11 +927,6 @@ class IdmHotspot{
    observer.observe(this.hotspotEl);
  }

-
-  handleAddToFav(){
-    
-  }
-
  // ========================================================
  // FUNKCJE POMOCNICZE
  // ========================================================
@@ -1017,20 +1086,18 @@ class IdmHotspot{
      }
    }
    // Tooltip
-    if(this.options?.omnibusTooltip){
-      const tooltipEl = prodEl.querySelector(".idm_tooltip");
+    // if(this.options?.omnibusTooltip){
+    //   const tooltipEl = prodEl.querySelector(".idm_tooltip");

-      tooltipEl.addEventListener("click", ()=>{
-        this.showTooltip(tooltipEl);
-      })
-    }
+    //   tooltipEl.addEventListener("click", ()=>{
+    //     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]]);
-      })
-    } 
+    if(this.options?.addToFavorites && typeof this.addToFavFn === "function") prodEl.querySelector(".product__favorite")?.addEventListener("click", this.handleAddToFav);
+    // Compare
+    if(this.options?.addToCompare) prodEl.querySelector(".idm-products-banner__compare-btn")?.addEventListener("click", this.handleAddToCompare);
  }

  /**
--- a/ramka.txt
+++ b/ramka.txt
@@ -1,7 +1,7 @@
 1. Ramka

 - wybór rozmiaru/wersji??
- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella)
+- porównywarka? (wymagają zmiany w komponencie idosella)

 - zakres cen?????????????
 - Wybór kolorystyczny???
--- a/style.less
+++ b/style.less
@@ -139,10 +139,37 @@
 }
 .product__favorite{
  display: block;
+  color: #111;
  &::before{
    content: '\E86D';
    font-family: FontAwesome;
-    font-size: 2.6rem;
+    // font-size: 2.6rem;
+    font-size: 3rem;
    height: 2.9rem;
  }
+  &:hover{
+    opacity: 0.6;
+  }
+}
+
+.idm-products-banner__compare-btn{
+  .idm-products-banner__compare-icon{
+    height: 100%;
+  }
+  &.--success {
+    svg {
+      display: none;
+    }
+    &::before {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M10.0516 18.5L4.35156 12.8L5.77656 11.375L10.0516 15.65L19.2266 6.475L20.6516 7.9L10.0516 18.5Z' fill='%23009263'/%3E%3C/svg%3E");
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+
+  &.--loading:not(.--success) { }
+
+  &:not(.--success):hover {
+    opacity: 0.6;
+  }
 }