Fix memory leak na stronie koszyka

klasa.js

@@ -32,6 +32,7 @@ const idmHotspotTextObject = {
   ["Nie znaleziono kontenera"]: <iai:variable vid="Nie znaleziono kontenera"/>,
   ["Nie znaleziono metody graphql"]: <iai:variable vid="Nie znaleziono metody graphql"/>,
   ["Drugie Zdjęcie"]: <iai:variable vid="Drugie Zdjęcie"/>,
+  ["Zobacz więcej"]: <iai:variable vid="Zobacz więcej"/>,
 };
 
 // STRING
@@ -72,6 +73,7 @@ const idmHotspotTextObject = {
 //   "Nie znaleziono kontenera": "Nie znaleziono kontenera",
 //   "Nie znaleziono metody graphql": "Nie znaleziono metody graphql",
 //   "Drugie Zdjęcie": "Drugie Zdjęcie",
+//   "Zobacz więcej": "Zobacz więcej",
 // };
 
 ///////////////////////////////////////////////
@@ -499,6 +501,14 @@ class IdmHotspot{
       this.handleSelectVersion = this.handleSelectVersion.bind(this);
 
       this.init();
+
+
+      // WCZYTANIE PONOWNIE DLA KOSZYKA
+      if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){
+        app_shop.run(()=>{
+          this.init();
+        }, "all", "#Basket", true)
+      }
   }
 
 
@@ -661,8 +671,25 @@ class IdmHotspot{
   markupVersions(prod){
     if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
 
+    const MAX_VERION_AMOUNT = 5;
+
+    const sortedVersions = prod.group.versions.sort(function (a, b) {
+      if (a.name < b.name) {
+        return -1;
+      }
+      if (a.name > b.name) {
+        return 1;
+      }
+      return 0;
+    })
+
+
     return `<div class="product__versions">
-      ${prod.group.versions.reduce((acc, val)=>{
+      ${sortedVersions.reduce((acc, val, index)=>{
+        if(index + 1 > MAX_VERION_AMOUNT) return acc;
+        
+        if(index + 1 === MAX_VERION_AMOUNT && prod.group.versions.length > MAX_VERION_AMOUNT) return acc + `<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">+${(prod.group.versions.length - MAX_VERION_AMOUNT) + 1}</a>`;
+
         return acc + `<a class="product__version_single ${prod.id === val.id ? "--active" : ""}" href="${val.link}" data-product-id="${val.id}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`;
       },"")}
     </div>`
@@ -1057,6 +1084,7 @@ class IdmHotspot{
 
 
   handleSelectVersion(e){
+    if(e.target.closest(".product__version_more")) return;
     e.preventDefault();
     const closestVersion = e.target.closest(".product__version_single:not(.--active)");
     const prodEl = e.target.closest(".product");
@@ -1198,13 +1226,6 @@ class IdmHotspot{
       console.log(`Initialized hotspot #${this.id}`);
 
       if(typeof this.options?.callbackFn === "function") this.options?.callbackFn();
-
-      // WCZYTANIE PONOWNIE DLA kOSZYKA
-      if(typeof app_shop.fn?.basket?.reloadForm === "function" && this.hotspotEl.closest("#content")){
-        app_shop.run(()=>{
-          this.init();
-        }, "all", "#Basket", true)
-      }
     }catch(err){
       console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
     }
@@ -1329,7 +1350,7 @@ class IdmHotspot{
     /**
    * Główna metoda inicjalizująca hotspot (lazy lub natychmiast).
    */
-  async init(){
+  init(){
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const dev = urlParams.get('dev')

style.less

@@ -250,25 +250,34 @@
     padding: 0.3rem 1rem;
     position: absolute;
     top: 0;
+    width: 100%;
 
 
     height: var(--idm-hotspot-version-height);
     align-items: center;
   }
-  .product__version_single{
+  .product__version_single, .product__version_more{
     display: flex;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid #ccc;
     transition: border 0.2s;
+    
+    aspect-ratio: 1 / 1;
+    align-items: center;
+    justify-content: center;
+    
     &:hover{
       border-color: #111;
     }
     &.--active{
       border-color: var(--primary-color, #111);
-      box-shadow: 0 0 1px 1px var(--primary-color, #111);
+      box-shadow: 0 0 0 1px var(--primary-color, #111);
     }
   }
+  .product__version_more{
+    background: #f2f2f2;
+  }
   .product__content_wrapper{
     position: relative;
   }
@@ -283,4 +292,15 @@
       clip-path: inset(0 0 0 0);
     }
   }
-} 
+} 
+
+@media (max-width: 978px){
+  .idm__hotspot .product:has(.product__versions){
+     .product__versions, .label_icons{
+      transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
+    }
+    .product__versions{
+      clip-path: inset(0 0 0 0);
+    }
+  }
+}