Zabezpieczenie kodu tooltipa

klasa.js

@@ -191,6 +191,7 @@ const IDM_PRODUCT_QUERY = `id
           iconSecond
           iconSmall
           iconSmallSecond
+          link
         }
       }
       opinion{
@@ -591,18 +592,19 @@ class IdmHotspot{
             ${this.markupAdditional(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">
-                  ${this.markupLabel(prod)}
-              </strong>
+            ${this.markupImage(prod)}
+            <strong class="label_icons">
+                ${this.markupLabel(prod)}
+            </strong>
           </a>
           <div class="product__content_wrapper">
-              ${this.markupOpinions(prod)}
-              <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
-              <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
-                  ${this.markupPrice(prod, prodExchangedData)}
-              </div>
-              ${this.markupAddToBasket(prod)}
+            ${this.markupVersions(prod)}
+            ${this.markupOpinions(prod)}
+            <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
+            <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
+                ${this.markupPrice(prod, prodExchangedData)}
+            </div>
+            ${this.markupAddToBasket(prod)}
           </div>
       </div>`;
       
@@ -633,6 +635,16 @@ class IdmHotspot{
         data-product-size="${prod.sizes?.[0]?.id || 'uniw'}" aria-label="${idmHotspotTextObject["Dodaj do ulubionych"]}">
       </span>`;
   }
+
+  markupVersions(prod){
+    if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
+
+    return `<div class="product__versions">
+      ${prod.group.versions.reduce((acc, val)=>{
+        return acc + `<a class="product__version_single" href="${val.link}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`;
+      },"")}
+    </div>`
+  }
   
   markupImage(prod){
       let markup = "";
@@ -1407,7 +1419,7 @@ function idmHideTooltip(tooltipEl){
 }
 
 
-// document.addEventListener("DOMContentLoaded", ()=>{
+document.addEventListener("DOMContentLoaded", ()=>{
   document.body.addEventListener("click", e=>{
     const tooltipEl = e.target.closest(".idm_tooltip");
     if(!e.target.closest(".idm_tooltip__info_icon") || !tooltipEl) return;
@@ -1415,7 +1427,7 @@ function idmHideTooltip(tooltipEl){
     e.preventDefault();
     idmShowTooltip(tooltipEl);
   });
-// });
+});
 // new IdmHotspot({
 //   id: "idmTestHotspot1",
 //   title: "tescik",

style.less

@@ -227,3 +227,33 @@
     }
   }
 }
+
+
+// WERSJE
+.idm__hotspot:has(.product__versions){
+  .product__versions{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 1rem;
+    z-index: 1;
+    background: #fff;
+    clip-path: inset(0% 0 100% 0);
+    padding: 0.3rem 1rem;
+    position: absolute;
+    top: 0;
+  }
+  .product__content_wrapper{
+    position: relative;
+  }
+  .label_icons, .product__versions{
+    transition: all 0.2s;
+  }
+  .product:hover{
+    .product__versions, .label_icons{
+      transform: translateY(-100%);
+    }
+    .product__versions{
+      clip-path: inset(0 0 0 0);
+    }
+  }
+}