Pokaz serie + pokaz producentow

klasa.js

@@ -170,8 +170,14 @@ const IDM_PRODUCT_QUERY = (priceType) => `id
       iconSmallSecond
       link
       zones
+      series{
+        name, link
+      }
       producer{
-        name
+        name, link,
+        searchIcons{
+          icon
+        }
       }
       category{
         name
@@ -424,9 +430,12 @@ class IdmHotspot{
     centeredSlidesBounds: true,
     breakpoints: {
         550: {
-            slidesPerView: 3,
-            centeredSlides: true,
-            centeredSlidesBounds: true,
+          slidesPerView: 2,
+          centeredSlides: true,
+          centeredSlidesBounds: true,
+        },
+        757:{
+          slidesPerView: 3,
         },
         979: {
             slidesPerView: 4,
@@ -441,7 +450,7 @@ class IdmHotspot{
       cssVariables: {
         version: {
           columnDesktop: 5,
-          columnTablet: 3,
+          columnTablet: 4,
           columnMobile: 4,
         },
         nameClamp: null// 2,
@@ -456,6 +465,8 @@ class IdmHotspot{
 
         // POKAZANIE
         showOpinions: false,
+        showProducer: false, // false, true, "img", "link", "img-link"
+        showSeries: false, // false, true, "link"
         showSecondImage: false,
 
         // DODAWANIE
@@ -648,6 +659,8 @@ class IdmHotspot{
           </a>
           <div class="product__content_wrapper">
             ${this.markupVersions(prod)}
+            ${this.markupProducer(prod)}
+            ${this.markupSeries(prod)}
             ${this.markupOpinions(prod)}
             <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
             ${this.markupPrice({prod})}
@@ -786,6 +799,50 @@ class IdmHotspot{
     </div>`
   }
 
+  
+  markupProducer(prod){
+    if(!this.options.showProducer) return producerMarkup;
+
+    const isImgIncluded = typeof this.options.showProducer === "string" && this.options.showProducer?.includes("img");
+    const isLinkIncluded = typeof this.options.showProducer === "string" && this.options.showProducer?.includes("link");
+
+    if(
+      (!prod?.producer?.name && (typeof this.options.showProducer === "boolean" || isLinkIncluded))
+      ||
+      (!prod?.producer?.searchIcons?.icon && isImgIncluded)
+    ) return `<div class="product__producer"></div>`;
+    
+    let producerMarkup = isLinkIncluded && prod.producer?.link ? `<a class="product__producer" href="${prod.producer?.link}">` : `<div class="product__producer">`;
+
+    if(isImgIncluded && prod?.producer?.searchIcons?.icon){
+      producerMarkup += `<img src="${prod?.producer?.searchIcons?.icon}" alt="${prod.producer.name}"/>`;
+    }else{
+      producerMarkup += `<span class="product__producer_text">${prod.producer.name}</span>`;
+    }
+
+    producerMarkup += producerMarkup = isLinkIncluded && prod.producer?.link ? `</a>` : `</div>`;
+    return producerMarkup;
+  }
+
+  markupSeries(prod){
+    if(!this.options.showSeries) return "";
+    if(!prod?.series?.name) return `<div class="product__series"></div>`;
+    
+    let seriesMarkup = "";
+    if(this.options.showSeries === "link" && prod.series.link){
+       seriesMarkup = `<a class="product__series" href="${prod.series.link}">
+         <span class="product__series_text">${prod.series.name}</span>
+       </a>`
+    }else if(typeof this.options.showSeries === "boolean" || !prod.series.link){
+      seriesMarkup = `<div class="product__series">
+        <span class="product__series_text">${prod.series.name}</span>
+      </div>`
+    }
+
+    return seriesMarkup
+  }
+
+
   markupPrice({prod, sizeId}){
       let priceRoot = prod.price;
 
@@ -986,6 +1043,7 @@ class IdmHotspot{
     return `
       <div class="idm_hotspot__skeleton_product">
         <div class="idm_hotspot__skeleton_img idm-loading"></div>
+        ${this.options.showSeries ? `<div class="idm_hotspot__skeleton_series idm-loading"></div>` : ""}
         ${this.options.showOpinions ? `<div class="idm_hotspot__skeleton_opinions idm-loading"></div>` : ""}
         <div class="idm_hotspot__skeleton_name idm-loading"></div>
         <div class="idm_hotspot__skeleton_price idm-loading"></div>
@@ -1029,12 +1087,10 @@ class IdmHotspot{
       else{
         localStorage.setItem('addedtoBasket', true);
         // Obsługiwanie sukcesu
-        app_shop.graphql.trackingEvents(res);
+        app_shop.fn?.menu_basket_cache?.();
+        await app_shop.graphql.trackingEvents(res);
         buttonEl.classList.add("--success");
         
-        // Dodawanie do koszyka na stronie basketedit.php będzie wymagał innego indywidualnego kodu!!!!!
-        app_shop.fn?.menu_basket_cache?.();
-
         // STRONA KOSZYKA
         if(typeof app_shop.fn?.basket?.reloadForm === "function"){
           const existingBasketBlockQuantity = document.querySelector(`.basket__block[data-product-id="${id}"][data-product-size="${size}"] input.buy__more_input.quantity__input[type="number"]`);
@@ -1263,7 +1319,7 @@ class IdmHotspot{
   cssVariableVersionColumnCount(){
     if(!this.options?.selectVersion) return false;
     this.cssSetVariable("--version-desktop-columns", this.cssVariables?.version?.columnDesktop || 5)
-    this.cssSetVariable("--version-tablet-columns", this.cssVariables?.version?.columnTablet || 3)
+    this.cssSetVariable("--version-tablet-columns", this.cssVariables?.version?.columnTablet || 4)
     this.cssSetVariable("--version-mobile-columns", this.cssVariables?.version?.columnMobile || 4)
   }
 
@@ -1390,6 +1446,8 @@ class IdmHotspot{
       selectors: [
           `#${this.id} .product__prices`,
           `#${this.id} .product__name`,
+          `#${this.id} .product__series`,
+          `#${this.id} .product__producer`,
       ],
       container: `#${this.id} .products__wrapper`,
     });