Pokaz serie + pokaz producentow

2025-12-17 12:46:48 +01:00
parent 61d6b024cc
commit 866cd4e2c3
4 changed files with 121 additions and 23 deletions
--- a/README.md
+++ b/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
--- a/klasa.js
+++ b/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,10 +430,13 @@ class IdmHotspot{
    centeredSlidesBounds: true,
    breakpoints: {
        550: {
-            slidesPerView: 3,
+          slidesPerView: 2,
          centeredSlides: true,
          centeredSlidesBounds: true,
        },
+        757:{
+          slidesPerView: 3,
+        },
        979: {
            slidesPerView: 4,
            centeredSlides: false,
@@ -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,11 +1087,9 @@ class IdmHotspot{
      else{
        localStorage.setItem('addedtoBasket', true);
        // Obsługiwanie sukcesu
-        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?.();
+        await app_shop.graphql.trackingEvents(res);
+        buttonEl.classList.add("--success");
        
        // STRONA KOSZYKA
        if(typeof app_shop.fn?.basket?.reloadForm === "function"){
@@ -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`,
    });
--- a/ramka.txt
+++ b/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

--- a/style.less
+++ b/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,6 +397,13 @@
  .label_icons, .product__versions{
    transition: all 0.2s;
  }
+  
+}
+@media (min-width: 979px){
+  .idm__hotspot .product:has(.product__versions){
+    .product__versions{
+      clip-path: inset(0% 0 100% 0);
+    }
    &:hover{
      .product__versions, .label_icons{
        transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
@@ -388,14 +413,17 @@
      }
    }
  }
+}

@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;
    }
  }
 }