Pokaz serie + pokaz producentow

README.md

@@ -128,20 +128,31 @@ new IdmHotspot({
  * @property {boolean} [options.addToCompare] - Czy włączać dodawanie do porównywania
 
  * @property {boolean|string} [options.addToBasket] - Obsługa koszyka:
- *    - true = włącz
  *    - false = wyłącz
+ *    - true = włącz
  *    - "range" = dodaj z zakresem
 
  * @property {boolean|object} options.swiper - Slider:
- *    - true = aktywny
  *    - false = nieaktywny
+ *    - true = aktywny
  *    - object = konfiguracja Swiper
  * @property {boolean} [options.swiperScrollbar] - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
 
  * @property {boolean} [options.showOpinions] - Czy wyświetlać opinie o produkcie w formie gwiazdek nad nazwą
  * @property {boolean} [options.showSecondImage] - Czy wyświetlać drugie zdjęcie na hover
+ * @property {boolean|string} [options.showSeries] - Czy wyświetlać nazwę serii nad nazwą
+      - false = wyłącz
+      - true = sam tekst
+      - "link" = tekst + link
+ * @property {boolean|string} [options.showProducer] - Czy wyświetlać informacje o producencie nad nazwą
+      - false = wyłącz
+      - true = tekst
+      - "link" = tekst + link
+      - "img" = zdjęcie (nie testowane) 
+      - "img-link" = zdjęcie + link (nie testowane) 
 
  * @property {boolean} [options.selectVersion] - Pokazywanie multiwersji
+ * @property {boolean} [options.selectSize] - Pokazywanie Rozmiarów do wybrania przy zakupach(wymaga Dodania do koszyka)
  * 
  * @property {object} cssVariables - Obiekt z opcjami zmiennych CSS wgrywanymi do danej ramki rekomendacji
  * @property {object} [cssVariables.version] - Obiekt ze zmiennymi css dla wersji

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,
+          slidesPerView: 2,
-            centeredSlides: true,
+          centeredSlides: true,
-            centeredSlidesBounds: 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`,
     });

ramka.txt

@@ -2,7 +2,9 @@
 
 bugi selectSize + addToBasket="range"
 
+- informacje o producencie albo seri gdzieś nad produktem
 - Wykluczenie powtarzających się wersji
+- dodanie efektu 3d
 
 wersja max 5 zdjęć i później + może????
 
@@ -13,7 +15,6 @@ Wyświetlanie filmu na hover?
 - AAAAA - banner na hotspocie
 - stary szablon
 - blokowanie dodawania do koszyka jeśli ilość jest maksymalna(chyba tylko nowy szablon ma app_shop.vars.basket)
-- informacje o producencie albo seri gdzieś nad produktem
 - czy zapisywać wszystkie hotspoty do jakiegoś app_shop.fn.idmHotspots = {"#idmMainHotspot1": {}}
 - czy jakoś inteligentnie ucinać niepotrzebne query na podstawie wybranych opcji? chyba za dużo roboty i nie ma sensu
 

style.less

@@ -85,6 +85,14 @@
     margin-bottom: 2.5rem;
     .skeleton(100%, auto, 100%, auto, 5px);
   }
+  &_producer{
+    margin-bottom: 1rem;
+    .skeleton(100%, 2rem, 100%, 2rem, 0);
+  }
+  &_series{
+    margin-bottom: 1rem;
+    .skeleton(100%, 2rem, 100%, 2rem, 0);
+  }
   &_opinions{
     margin-bottom: 1rem;
     .skeleton(75%, 2rem, 75%, 2rem, 0);
@@ -256,6 +264,17 @@
   content: "\f006";
 }
 
+/* producenci */
+.product__producer{
+  margin-bottom: 1rem;
+  display: block;
+}
+/* serie */
+.product__series{
+  margin-bottom: 1rem;
+  display: block;
+}
+
 /* second image */
 .product__image.--second{
   position: absolute;
@@ -305,7 +324,7 @@
 .idm__hotspot .product:has(.product__versions){
   --idm-hotspot-version-height: 65px;
   @media (min-width: 757px){
-    --idm-hotspot-version-height: 70px;
+    --idm-hotspot-version-height: 60px;
   }
   @media (min-width: 979px){
     --idm-hotspot-version-height: 55px;
@@ -316,7 +335,6 @@
     gap: 1rem;
     z-index: 1;
     background: #fff;
-    clip-path: inset(0% 0 100% 0);
     position: absolute;
     top: 0;
     width: 100%;
@@ -324,7 +342,7 @@
     padding: 0.3rem 1.5rem;
     @media (min-width: 757px){
       padding: 0.3rem 2.5rem;
-      grid-template-columns: repeat(var(--version-tablet-columns, 3), 1fr);
+      grid-template-columns: repeat(var(--version-tablet-columns, 4), 1fr);
     }
     @media (min-width: 979px){
       padding: 0.3rem 1rem;
@@ -379,23 +397,33 @@
   .label_icons, .product__versions{
     transition: all 0.2s;
   }
-  &:hover{
+  
-    .product__versions, .label_icons{
+}
-      transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
+@media (min-width: 979px){
-    }
+  .idm__hotspot .product:has(.product__versions){
     .product__versions{
-      clip-path: inset(0 0 0 0);
+      clip-path: inset(0% 0 100% 0);
+    }
+    &:hover{
+      .product__versions, .label_icons{
+        transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
+      }
+      .product__versions{
+        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)));
+      transform: none;
     }
     .product__versions{
       clip-path: inset(0 0 0 0);
+      position: static;
+      padding: 0.3rem 1rem;
     }
   }
 }