Poprawa tworzenia ramek z HTML

README.md

@@ -22,7 +22,7 @@ Można użyć extends w innym miejscu (np tym razem w wydzielonym JS) żeby nadp
 
 **Przykład**
 ```
-class IdmRaypathHotspot extends IdmHotspot {
+IdmHotspot = class extends IdmHotspot {
   markupLabel(prod) {
     // Standardowe labelki
     let labelMarkup = super.markupLabel(prod);

extends.js

@@ -0,0 +1,24 @@
+IdmHotspot = class extends IdmHotspot {
+  markupLabel(prod) {
+    // Standardowe labelki
+    let labelMarkup = super.markupLabel(prod);
+
+    // Customowe labelki
+    const awards = prod?.awardedParameters;
+    if (awards?.length) {
+      const awardParam = awards.find(award => award.name === "Idm_custom_label");
+      const values = awardParam?.values?.map(v => v.name) || [];
+
+      const html = values
+        .map(label => {
+          const [text, bgColor, color] = label.split("||");
+          return `<span class="label --custom" style="background-color:${bgColor}; color:${color}">${text}</span>`;
+        })
+        .join("");
+
+      labelMarkup += html;
+    }
+
+    return labelMarkup;
+  }
+}

klasa.js

@@ -2146,10 +2146,12 @@ async function idmPrepareHotspotObject(selectedContainerEl){
   };
 
   if(selectedContainerEl?.dataset?.lazy) idmHotspotObj.options = {lazy: selectedContainerEl?.dataset?.lazy === "true" ? true : false};
-
   new IdmHotspot(idmHotspotObj);
 }
 
-document.querySelectorAll(".hotspot__wrapper.idm__hotspot").forEach(currentHotspot=>{
+
+document.addEventListener("DOMContentLoaded", ()=>{
+  document.querySelectorAll(".hotspot__wrapper.idm__hotspot:not(.--init)").forEach(currentHotspot=>{
     idmPrepareHotspotObject(currentHotspot);
   });
+})

ramka.txt

@@ -22,11 +22,10 @@ Stara ramka
 - getProductXML=t
 - slick
 
-
-
-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-BUG Z RAMKAMI HTML jak się używa extends!!!!!!
-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
-
 cacheowanie ramek do indexedDB
+
+awaitowanie idmHotspot
+
+fix cssVariables jak nie ma wesji
+
+zapisywanie querySelectorów produktów