poprawa linku + wersji + dodanie limitu produktow

README.md

@@ -111,6 +111,7 @@ new IdmHotspot({
 
 
  * @property {object} options - Ustawienia dla hotspotu (required).
+ * @property {boolean} [options.limit] - Limit wczytywanych produktów
  * @property {boolean} [options.lazy] - Czy wczytywać w trybie lazy.
  * @property {boolean} [options.devMode] - Czy wczytywać ramki tylko dla stron z dev=true.
  * @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip

klasa.js

@@ -79,23 +79,23 @@ const idmHotspotTextObject = {
 ///////////////////////////////////////////////
 // GraphQL
 // ogolne
-const IDM_PRICE_QUERY = `price {
+const IDM_PRICE_QUERY = (priceType) => `price {
       rebateCodeActive
       price {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       omnibusPrice {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       omnibusPriceDetails {
         unit {
-          gross {
+          ${priceType} {
             value
             formatted
           }
@@ -107,26 +107,26 @@ const IDM_PRICE_QUERY = `price {
         }
       }
       max {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       unit {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       unitConvertedPrice {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       youSavePercent
       beforeRebate {
-        gross {
+        ${priceType} {
           value
           formatted
         }
@@ -134,34 +134,34 @@ const IDM_PRICE_QUERY = `price {
       beforeRebateDetails {
         youSavePercent
         unit {
-          gross {
+          ${priceType} {
             value
             formatted
           }
         }
       }
       advancePrice {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       suggested {
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
       rebateNumber {
         number
-        gross {
+        ${priceType} {
           value
           formatted
         }
       }
     }`;
 
-const IDM_PRODUCT_QUERY = `id
+const IDM_PRODUCT_QUERY = (priceType) => `id
       type
       name
       icon
@@ -180,7 +180,7 @@ const IDM_PRODUCT_QUERY = `id
         id
         amount
         name
-        ${IDM_PRICE_QUERY}
+        ${IDM_PRICE_QUERY(priceType)}
       }
       group{
         id
@@ -217,39 +217,39 @@ const IDM_PRODUCT_QUERY = `id
     unit{
       id, name, singular, plural, fraction, sellBy, precision, unitConvertedFormat
     }
-      ${IDM_PRICE_QUERY}`;
+      ${IDM_PRICE_QUERY(priceType)}`;
 // 1. products
-const IDM_PRODUCTS_GQL = (args) => JSON.stringify({
+const IDM_PRODUCTS_GQL = (args, priceType = "gross") => JSON.stringify({
     query: `{
       products(${args}){
       took
           products{
-          ${IDM_PRODUCT_QUERY}
+          ${IDM_PRODUCT_QUERY(priceType)}
       }
     }
 }`
 });
 
 // 2. hotspots
-const IDM_HOTSPOTS_GQL = (args) => JSON.stringify({
+const IDM_HOTSPOTS_GQL = (args, priceType = "gross") => JSON.stringify({
     query: `{
         hotspots(${args}){
         took
         name
         url
             products{
-            ${IDM_PRODUCT_QUERY}
+            ${IDM_PRODUCT_QUERY(priceType)}
         }
     }
 }`
 });
 
 // 3. single product
-const IDM_PRODUCT_GQL = (args) => JSON.stringify({
+const IDM_PRODUCT_GQL = (args, priceType = "gross") => JSON.stringify({
     query: `{
           product(${args}){
             product{
-            ${IDM_PRODUCT_QUERY}
+            ${IDM_PRODUCT_QUERY(priceType)}
         }
       }
     }`
@@ -446,6 +446,7 @@ class IdmHotspot{
         }
       },
       options: {
+        limit: 8,
         lazy: true,
         devMode: false,
         callbackFn: ()=>{},
@@ -535,9 +536,11 @@ class IdmHotspot{
     let graphFn, query;
     let queryMarkup = "";
 
+    let additionalQuery = "";
+
     if(this.source?.hotspotsType){
       graphFn = IDM_HOTSPOTS_GQL;
-      queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: 16`;
+      queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: ${this.options.limit}`;
     }else{
       graphFn = IDM_PRODUCTS_GQL;
       if(this.source?.productsId){
@@ -558,9 +561,11 @@ class IdmHotspot{
       if(this.source?.priceRange){
         queryMarkup += `priceRange: {from: ${+this.source.priceRange?.from || 0}, to: ${+this.source.priceRange?.to || 0}},`;
       }
+
+      if(this.options.limit) additionalQuery += `, settingsInput: {limit: ${this.options.limit}}`
     }
 
-    query =  `searchInput: { ${queryMarkup} }`
+    query =  `searchInput: { ${queryMarkup} }${additionalQuery}`
 
     return [graphFn, query];
   }
@@ -588,7 +593,7 @@ class IdmHotspot{
           headers: {
           "Content-Type": "application/json",
           },
-          body: this.query.graphFn(this.query.string),
+          body: this.query.graphFn(this.query.string, this.priceType),
         });
         const data = await res.json();
         products = data?.data?.[this.query.graphFn === IDM_HOTSPOTS_GQL ? "hotspots" : "products"]?.products;
@@ -688,14 +693,14 @@ class IdmHotspot{
   markupVersions(prod){
     if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
 
-    let MAX_VERSION_AMOUNT = 5;
-    if(app_shop.vars.view > 2){
-      MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop;
-    }else if(app_shop.vars.view === 2){
-      MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet;
-    }else if(app_shop.vars.view === 1){
-      MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile;
-    }
+    // let MAX_VERSION_AMOUNT = 5;
+    // if(app_shop.vars.view > 2){
+    //   MAX_VERSION_AMOUNT = this.cssVariables.version.columnDesktop;
+    // }else if(app_shop.vars.view === 2){
+    //   MAX_VERSION_AMOUNT = this.cssVariables.version.columnTablet;
+    // }else if(app_shop.vars.view === 1){
+    //   MAX_VERSION_AMOUNT = this.cssVariables.version.columnMobile;
+    // }
 
     const sortedVersions = prod.group.versions.sort(function (a, b) {
       if (a.name < b.name) {
@@ -707,15 +712,29 @@ class IdmHotspot{
       return 0;
     })
 
-
-    return `<div class="product__versions">
-      ${sortedVersions.reduce((acc, val, index)=>{
-        if(index + 1 > MAX_VERSION_AMOUNT) return acc;
+    let productVersionsMarkup = sortedVersions.reduce((acc, val, index)=>{
+        // if(index + 1 > MAX_VERSION_AMOUNT) return acc;
         
-        if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT) return acc + `<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">+${(prod.group.versions.length - MAX_VERSION_AMOUNT) + 1}</a>`;
+        // if(index + 1 === MAX_VERSION_AMOUNT && prod.group.versions.length > MAX_VERSION_AMOUNT) 
+        //   return acc + `<a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">
+        //   +${(prod.group.versions.length - MAX_VERSION_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>`;
-      },"")}
+      },"");
+
+      const desktopMoreLength = (prod.group.versions.length - this.cssVariables.version.columnDesktop) + 1;
+      const tabletMoreLength = (prod.group.versions.length - this.cssVariables.version.columnTablet) + 1;
+      const mobileMoreLength = (prod.group.versions.length - this.cssVariables.version.columnMobile) + 1;
+
+    return `<div class="product__versions">
+      ${productVersionsMarkup}
+      <a class="product__version_more" href="${prod.link}" aria-label="${idmHotspotTextObject["Zobacz więcej"]}">
+          +
+          <span class="--desktop-more">${desktopMoreLength > 0 ? desktopMoreLength : ""}</span>
+          <span class="--tablet-more">${tabletMoreLength > 0 ? tabletMoreLength : ""}</span>
+          <span class="--mobile-more">${mobileMoreLength > 0 ? mobileMoreLength : ""}</span>
+        </a>
     </div>`
   }
   
@@ -1139,8 +1158,13 @@ class IdmHotspot{
   // ========================================================
   // USTAWIANIE ZMIENNYCH CSS DLA RAMKI
   // ========================================================
+  // Ustawia się je w dwa sposoby - jako zmienne css przypisywane do ramki + jako dodaktowy tag style
+
   cssSetAllVariables(){
     this.cssVariableVersionColumnCount();
+    
+    // css <style/>
+    this.cssInsertStyleTag();
   }
 
   cssVariableVersionColumnCount(){
@@ -1154,6 +1178,34 @@ class IdmHotspot{
     this.hotspotEl.style.setProperty(name, value);
   }
 
+
+  cssVersionColumnStyle(){
+    return `
+      @media (max-width: 756px){
+        #${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnMobile}){
+          display: none;
+        }
+      }
+      @media (min-width: 757px) and (max-width: 978px){
+        #${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnTablet}){
+          display: none;
+        }
+      }
+      @media (min-width: 979px){
+        #${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot .product__version_single:nth-of-type(n + ${this.cssVariables?.version?.columnDesktop}){
+          display: none;
+        }
+      }
+    `
+  }
+
+  cssInsertStyleTag(){
+    this.hotspotEl.insertAdjacentHTML("beforeend", `
+      <style>
+        ${this.cssVersionColumnStyle()}
+      </style>`)
+  }
+
   // ========================================================
   // FUNKCJE POMOCNICZE
   // ========================================================
@@ -1208,7 +1260,7 @@ class IdmHotspot{
         headers: {
         "Content-Type": "application/json",
         },
-        body: IDM_PRODUCT_GQL(`productId: ${newProdId}`),
+        body: IDM_PRODUCT_GQL(`productId: ${newProdId}`, this.priceType),
       });
       const data = await res.json();
 
@@ -1246,11 +1298,11 @@ class IdmHotspot{
     return {
         gross: {
             value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode.getAttribute(`${name}`) : undefined,
-            formatted: priceNode?.getAttribute(`${name}_formatted`) ?? undefined,
+            formatted: priceNode?.getAttribute(`${name}_formatted`),
         },
         net: {
             value: priceNode?.getAttribute(`${name}_net`) !== null ? +priceNode.getAttribute(`${name}_net`) : undefined,
-            formatted: priceNode?.getAttribute(`${name}_net_formatted`) ?? undefined,
+            formatted: priceNode?.getAttribute(`${name}_net_formatted`),
         }
     }
   }
@@ -1260,11 +1312,11 @@ class IdmHotspot{
         price: {
             gross: {
                 value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined,
-                formatted: priceNode?.getAttribute("price_formatted") ?? undefined,
+                formatted: priceNode?.getAttribute("price_formatted"),
             },
             net: {
                 value: priceNode?.getAttribute("price_net") !== null ? +priceNode.getAttribute("price_net") : undefined,
-                formatted: priceNode?.getAttribute("price_net_formatted") ?? undefined,
+                formatted: priceNode?.getAttribute("price_net_formatted"),
             }
         },
         rebateCodeActive: priceNode?.getAttribute("rebate_code_active") === "y" ? true : false,
@@ -1314,21 +1366,21 @@ class IdmHotspot{
             ...this.xmlGetGrossNetPrices({priceNode, name: "unit_converted_price"})
         },
         // rebateNumber: {},
-        lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date") ?? undefined,
+        lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date"),
         // advancePrice: {},
         promotionDuration: {
             promotionTill: {
                 date: {
-                    date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2] ?? undefined,
-                    month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1] ?? undefined,
-                    year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0] ?? undefined,
+                    date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2],
+                    month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1],
+                    year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0],
                     // weekDay: "",
                     // formatted: ""
                 },
                 time: {
-                    hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0] ?? undefined,
-                    minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1] ?? undefined,
-                    seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2] ?? undefined,
+                    hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0],
+                    minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1],
+                    seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2],
                 },
                 // timestamp: ""
             },
@@ -1347,8 +1399,8 @@ class IdmHotspot{
 
     node.querySelectorAll(":scope > trait").forEach(trait=>{
         const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || {
-            id: trait.getAttribute("groupid") ?? undefined,
-            name: trait.getAttribute("groupdescription") ?? undefined,
+            id: trait.getAttribute("groupid"),
+            name: trait.getAttribute("groupdescription"),
             // description: "",
             values: [],
             // contextValue: "",
@@ -1358,9 +1410,9 @@ class IdmHotspot{
         }
 
         currParameter.values.push({
-            id: trait.getAttribute("traitid") ?? undefined,
-            name: trait.getAttribute("traitid") ?? undefined,
-            link: trait.getAttribute("link") ?? undefined,
+            id: trait.getAttribute("traitid"),
+            name: trait.getAttribute("traitid"),
+            link: trait.getAttribute("link"),
             // description: "",
             // search: {
             //     icon: ""
@@ -1389,7 +1441,8 @@ class IdmHotspot{
       const data = [];
 
 
-      allProducts.forEach(prod=>{
+      allProducts.forEach((prod, index)=>{
+        if(this.options.limit <= index) return;
 
           // NODES
           const priceNode = prod.querySelector(":scope >price");
@@ -1415,21 +1468,21 @@ class IdmHotspot{
           const enclosuresImages = [];
           prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{
               enclosuresImages.push({
-                  position: img.getAttribute("position") ?? undefined,
-                  type: img.getAttribute("type") ?? undefined,
-                  typeSecond: img.getAttribute("type_second") ?? undefined,
-                  url: img.getAttribute("url") ?? undefined,
-                  urlSecond: img.getAttribute("url_second") ?? undefined,
-                  width: img.getAttribute("width") ?? undefined,
-                  height: img.getAttribute("height") ?? undefined,
-                  iconUrl: img.getAttribute("icon") ?? undefined,
-                  iconUrlSecond: img.getAttribute("icon_second") ?? undefined,
-                  iconWidth: img.getAttribute("icon_width") ?? undefined,
-                  iconHeight: img.getAttribute("icon_height") ?? undefined,
-                  mediumUrl: img.getAttribute("medium") ?? undefined,
-                  mediumUrlSecond: img.getAttribute("medium_second") ?? undefined,
-                  mediumWidth: img.getAttribute("medium_width") ?? undefined,
-                  mediumHeight: img.getAttribute("medium_height") ?? undefined,
+                  position: img.getAttribute("position"),
+                  type: img.getAttribute("type"),
+                  typeSecond: img.getAttribute("type_second"),
+                  url: img.getAttribute("url"),
+                  urlSecond: img.getAttribute("url_second"),
+                  width: img.getAttribute("width"),
+                  height: img.getAttribute("height"),
+                  iconUrl: img.getAttribute("icon"),
+                  iconUrlSecond: img.getAttribute("icon_second"),
+                  iconWidth: img.getAttribute("icon_width"),
+                  iconHeight: img.getAttribute("icon_height"),
+                  mediumUrl: img.getAttribute("medium"),
+                  mediumUrlSecond: img.getAttribute("medium_second"),
+                  mediumWidth: img.getAttribute("medium_width"),
+                  mediumHeight: img.getAttribute("medium_height"),
               })
           })
 
@@ -1442,11 +1495,11 @@ class IdmHotspot{
               const weightNode = size.querySelector(":scope > weight");
 
               sizes.push({
-                  id: size?.getAttribute("type") ?? undefined,
-                  name: size?.getAttribute("name") ?? undefined,
-                  code: size?.getAttribute("code") ?? undefined,
-                  codeProducer: size?.getAttribute("code_producer") ?? undefined,
-                  codeExtern: size?.getAttribute("code_extern") ?? undefined,
+                  id: size?.getAttribute("type"),
+                  name: size?.getAttribute("name"),
+                  code: size?.getAttribute("code"),
+                  codeProducer: size?.getAttribute("code_producer"),
+                  codeExtern: size?.getAttribute("code_extern"),
                   amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined,
                   amount_mo: size?.getAttribute("amount_mo") !== null ? +size.getAttribute("amount_mo") : undefined,
                   amount_mw: size?.getAttribute("amount_mw") !== null ? +size.getAttribute("amount_mw") : undefined,
@@ -1454,11 +1507,11 @@ class IdmHotspot{
                   weight: weightNode?.getAttribute("g") !== null ? +weightNode.getAttribute("g") : undefined,
                   availability: {
                       visible: availabilityNode?.getAttribute("visible") === "y" ? true : false,
-                      description: availabilityNode?.getAttribute("status_description") ?? undefined,
-                      status: availabilityNode?.getAttribute("status") ?? undefined,
-                      icon: availabilityNode?.getAttribute("status_gfx") ?? undefined,
+                      description: availabilityNode?.getAttribute("status_description"),
+                      status: availabilityNode?.getAttribute("status"),
+                      icon: availabilityNode?.getAttribute("status_gfx"),
                       deliveryDate: shippingTimeNode?.getAttribute("today") === "true" ? `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate().toString().padStart(2, 0)}` : availabilityNode?.getAttribute("delivery_date"),
-                      minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product") ?? undefined,
+                      minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product"),
                       // descriptionTel: "",
                       // iconTel: "",
                   },
@@ -1475,81 +1528,81 @@ class IdmHotspot{
           versionsNode.querySelectorAll(":scope > version").forEach(ver=>{
               versions.push({
                   id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined,
-                  name: ver?.getAttribute("name") ?? undefined,
-                  icon: ver?.getAttribute("gfx") ?? undefined,
-                  iconSecond: ver?.getAttribute("gfx_second") ?? undefined,
-                  iconSmall: ver?.getAttribute("gfx_small") ?? undefined,
-                  iconSmallSecond: ver?.getAttribute("gfx_small_second") ?? undefined,
-                  productIcon: ver?.getAttribute("icon") ?? undefined,
-                  productIconSecond: ver?.getAttribute("icon_second") ?? undefined,
-                  productIconSmall: ver?.getAttribute("icon_small") ?? undefined,
-                  productIconSmallSecond: ver?.getAttribute("icon_small_second") ?? undefined,
-                  link: ver?.getAttribute("link") ?? undefined,
+                  name: ver?.getAttribute("name"),
+                  icon: ver?.getAttribute("gfx"),
+                  iconSecond: ver?.getAttribute("gfx_second"),
+                  iconSmall: ver?.getAttribute("gfx_small"),
+                  iconSmallSecond: ver?.getAttribute("gfx_small_second"),
+                  productIcon: ver?.getAttribute("icon"),
+                  productIconSecond: ver?.getAttribute("icon_second"),
+                  productIconSmall: ver?.getAttribute("icon_small"),
+                  productIconSmallSecond: ver?.getAttribute("icon_small_second"),
+                  link: ver?.getAttribute("link"),
                   // parameterValues: [],
               });
           });
 
           // DATA
-          const typeParts = prod.getAttribute("product_type");
+          const typeParts = prod?.getAttribute("product_type").split("_");
           data.push({
               id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined,
               type: typeParts[1] === "item" ? typeParts[0] : typeParts[1],
-              code: prod?.getAttribute("code") ?? undefined,
-              name: prod.querySelector(":scope > name")?.textContent ?? undefined,
-              versionName: prod.querySelector(":scope > versions")?.getAttribute("name") ?? undefined,
-              description: prod.querySelector(":scope > description")?.textContent ?? undefined,
-              // longDescription: prod.querySelector("vlongdescription")?.textContent ?? undefined,
+              code: prod?.getAttribute("code"),
+              name: prod.querySelector(":scope > name")?.textContent,
+              versionName: prod.querySelector(":scope > versions")?.getAttribute("name"),
+              description: prod.querySelector(":scope > description")?.textContent,
+              // longDescription: prod.querySelector("vlongdescription")?.textContent,
               // longDescriptionSections: "",
               link: prod?.getAttribute("link"),
               zones,
-              icon: prod.querySelector(":scope > icon")?.textContent ?? undefined,
-              iconSecond: prod.querySelector(":scope > icon_second")?.textContent ?? undefined,
-              iconSmall: prod.querySelector(":scope > icon_small")?.textContent ?? undefined,
-              iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent ?? undefined,
+              icon: prod.querySelector(":scope > icon")?.textContent,
+              iconSecond: prod.querySelector(":scope > icon_second")?.textContent,
+              iconSmall: prod.querySelector(":scope > icon_small")?.textContent,
+              iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent,
               price: this.xmlGetPriceFromNode(priceNode),
               unit: {
-                  id: sizesNode?.getAttribute("unit_id") ?? undefined,
-                  // name: "",
-                  singular: sizesNode?.getAttribute("unit_single") !== null ? +sizesNode?.getAttribute("unit_single") : undefined,
-                  plural: sizesNode?.getAttribute("unit_plural") ?? undefined,
-                  fraction: sizesNode?.getAttribute("unit_fraction") ?? undefined,
+                  id: sizesNode?.getAttribute("unit_id"),
+                  name: sizesNode?.getAttribute("unit"),
+                  singular: sizesNode?.getAttribute("unit_single"),
+                  plural: sizesNode?.getAttribute("unit_plural"),
+                  fraction: sizesNode?.getAttribute("unit_fraction"),
                   sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined,
                   precision: sizesNode?.getAttribute("unit_precision") !== null ? +sizesNode?.getAttribute("unit_precision") : undefined,
-                  unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format") ?? undefined,
+                  unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format"),
               },
               producer: {
                   id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined,
-                  name: firmNode?.getAttribute("name") ?? undefined,
-                  link: firmNode?.getAttribute("productslink") ?? undefined,
+                  name: firmNode?.getAttribute("name"),
+                  link: firmNode?.getAttribute("productslink"),
                   searchIcons: {
-                      icon: firmNode?.getAttribute("icon") ?? undefined,
+                      icon: firmNode?.getAttribute("icon"),
                   },
                   // projectorIcons: {},
               },
               category: {
                   id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined,
-                  name: categoryNode?.getAttribute("name") ?? undefined,
-                  link: categoryNode?.getAttribute("productslink") ?? undefined
+                  name: categoryNode?.getAttribute("name"),
+                  link: categoryNode?.getAttribute("productslink")
               },
               group: {
                   id: versionsNode?.getAttribute("id") !== null ? +versionsNode?.getAttribute("id") : undefined,
-                  name: versionsNode?.getAttribute("name") ?? undefined,
+                  name: versionsNode?.getAttribute("name"),
                   displayAll: versionsNode?.getAttribute("display_all") === "true" ? true : false,
-                  link: versionsNode?.getAttribute("link") ?? undefined,
+                  link: versionsNode?.getAttribute("link"),
                   versions,
                   groupParameters: this.xmlGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters"))
               },
               opinion: {
                   rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined,
                   count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined,
-                  link: commentsNode?.getAttribute("link") ?? undefined
+                  link: commentsNode?.getAttribute("link")
               },
               enclosuresImages,
               // enclosuresAttachments: [],
               series: {
                   id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined,
-                  name: seriesNode?.getAttribute("name") ?? undefined,
-                  link: seriesNode?.getAttribute("link") ?? undefined
+                  name: seriesNode?.getAttribute("name"),
+                  link: seriesNode?.getAttribute("link")
               },
               awardedParameters: this.xmlGetTraitsFromNode(prod.querySelector(":scope > traits")),
               // parameteresWithContext: [],
@@ -1602,7 +1655,7 @@ class IdmHotspot{
       // Ustawienie wszystkich zmiennych CSS
       this.cssSetAllVariables();
 
-      // ca
+      // funkcja wykonująca się po ramce rekomendacji
       if(typeof this.options?.callbackFn === "function") this.options?.callbackFn();
     }catch(err){
       console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
@@ -1939,23 +1992,6 @@ document.addEventListener("DOMContentLoaded", ()=>{
 //             swiper: true,
 //         }
 // });
-//     {
-//         id: "idmMainHotspot2",
-//         title: "Super ramka rekomendacji",
-//         placement: {
-//             selector: "#content",
-//             insert: "beforeend"
-//         },
-//         source: {
-//             productsMenu: 488,
-//         },
-//         options: {
-//             lazy: true,
-//             addToBasket: "range",
-//             swiper: true,
-//         }
-//     }
-
 
 async function idmPrepareHotspotObject(selectedContainerEl){
   selectedContainerEl.classList.add("--init");
@@ -1986,9 +2022,9 @@ async function idmPrepareHotspotObject(selectedContainerEl){
 
   if(selectedContainerEl?.dataset?.lazy) idmHotspotObj.options = {lazy: selectedContainerEl?.dataset?.lazy === "true" ? true : false};
 
-  new IdmHotspot(idmHotspotObj)
+  new IdmHotspot(idmHotspotObj);
 }
 
 document.querySelectorAll(".hotspot__wrapper.idm__hotspot").forEach(currentHotspot=>{
-  idmPrepareHotspotObject(currentHotspot)
-})
+  idmPrepareHotspotObject(currentHotspot);
+});

ramka.txt

@@ -3,6 +3,9 @@
 - wybór rozmiaru/wersji?? Wykluczenie powtarzających się wersji
 wersja max 5 zdjęć i później + może????
 
+
+limit dla produktów z linku
+
 - zakres cen?????????????
 - Wybór kolorystyczny???
 - AAAAA - banner na hotspocie

style.less

@@ -1,5 +1,6 @@
-.idm__hotspot .add_to_basket{
+.idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{
   display: flex;
+  justify-content: center;
 }
 .idm__hotspot .add_to_basket.--range{
   flex-direction: column;
@@ -239,19 +240,33 @@
   animation: idmPulseOpacity 3s infinite;
 }
 .idm__hotspot .product:has(.product__versions){
-  --idm-hotspot-version-height: 55px;
+  --idm-hotspot-version-height: 65px;
+  @media (min-width: 757px){
+    --idm-hotspot-version-height: 70px;
+  }
+  @media (min-width: 979px){
+    --idm-hotspot-version-height: 55px;
+  }
   .product__versions{
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(var(--version-mobile-columns, 4), 1fr);
     gap: 1rem;
     z-index: 1;
     background: #fff;
     clip-path: inset(0% 0 100% 0);
-    padding: 0.3rem 1rem;
     position: absolute;
     top: 0;
     width: 100%;
-
+    
+    padding: 0.3rem 1.5rem;
+    @media (min-width: 757px){
+      padding: 0.3rem 2.5rem;
+      grid-template-columns: repeat(var(--version-tablet-columns, 3), 1fr);
+    }
+    @media (min-width: 979px){
+      padding: 0.3rem 1rem;
+      grid-template-columns: repeat(var(--version-desktop-columns, 5), 1fr);
+    }
 
     height: var(--idm-hotspot-version-height);
     align-items: center;
@@ -266,6 +281,22 @@
     aspect-ratio: 1 / 1;
     align-items: center;
     justify-content: center;
+
+    @media (max-width: 756px){
+      &:has(.--mobile-more:empty), .--tablet-more, .--desktop-more{
+        display: none;
+      }
+    }
+    @media (min-width: 757px) and (max-width: 978px){
+      &:has(.--tablet-more:empty), .--desktop-more, .--mobile-more{
+        display: none;
+      }
+    }
+    @media (min-width: 979px){
+      &:has(.--desktop-more:empty), .--tablet-more, .--mobile-more{
+        display: none;
+      }
+    }
     
     &:hover{
       border-color: #111;
@@ -275,6 +306,7 @@
       box-shadow: 0 0 0 1px var(--primary-color, #111);
     }
   }
+
   .product__version_more{
     background: #f2f2f2;
   }