Drugie zdjęcie na hover

2025-11-19 12:42:39 +01:00
parent a1737893f4
commit 6c5f0b17cd
4 changed files with 111 additions and 25 deletions
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo
 - Nie znaleziono kontenera
 - Nie znaleziono metody graphql
 - Najniższa cena
+- Drugie Zdjęcie

 ### Przykłady UŻYCIA ###
 ##### Jedna ramka - obiekt ######
@@ -84,33 +85,44 @@ new IdmHotspot({
 * @property {string} title - Tytuł ramki.
 * @property {string} classes - Dodatkowe klasy CSS.
 * @property {object[]} [products] - tablica produktów z układem danych takich jak w graphql. Opcjonalne, pod specjalne funkcjonalności.
+
+
 * @property {object} placement - Określa, gdzie wstawić ramkę (required).
 * @property {string} placement.selector - Selektor miejsca osadzenia.
 * @property {string} placement.insert - Pozycja wstawienia względem selektora (np. "afterbegin", "beforeend").
- * @property {object} source - Dane źródłowe dla hotspotu (required).
+
+
+ * @property {object} source - Dane źródłowe dla hotspotu.
 * @property {string} [source.hotspotType] - Typ hotspotu (np. "promotion").
 * @property {number[]} [source.productsId] - Tablica ID produktów.
 * @property {number} [source.productsMenu] - Identyfikator menu produktów.
+
+
 * @property {object} query - Dane zapytania, nadpisują source (DEV).
 * @property {string} query.string - Zapytanie w formacie GraphQL.
 * @property {Function} query.graphFn - Funkcja do pobierania danych.
+
+
 * @property {object} options - Ustawienia dla hotspotu (required).
 * @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
+ * @property {Function} [options.callbackFn] - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
+
 * @property {boolean} [options.addToFavorites] - Czy włączać dodawanie do ulubionych(DZIAŁA TYLKO PO ZMIANACH SZABLONOWYCH)
 * @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
 *    - "range" = dodaj z zakresem
+
 * @property {boolean|object} options.swiper - Slider:
 *    - true = aktywny
 *    - false = nieaktywny
 *    - object = konfiguracja Swiper
 * @property {boolean} [options.swiperScrollbar] - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
- * @property {Function} [options.callbackFn] - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
- * @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip
 * @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
 * 
 * @type {Hotspot[]}
 */
--- a/klasa.js
+++ b/klasa.js
@@ -31,6 +31,7 @@ const idmHotspotTextObject = {
  [<iai:variable vid="Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"/>]: <iai:variable vid="Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"/>,
  [<iai:variable vid="Nie znaleziono kontenera"/>]: <iai:variable vid="Nie znaleziono kontenera"/>,
  [<iai:variable vid="Nie znaleziono metody graphql"/>]: <iai:variable vid="Nie znaleziono metody graphql"/>,
+  [<iai:variable vid="Drugie Zdjęcie"/>]: <iai:variable vid="Drugie Zdjęcie"/>,
 };
 // STRING
 // const idmHotspotTextObject = {
@@ -240,7 +241,18 @@ const IDM_PRODUCT_GQL = (args) => JSON.stringify({
 });
 // ADD TO BASKET
 const IDM_HOTSPOT_ADD_TO_BASKET = (t, e, a) => JSON.stringify({
-    query: `mutation {\n      addProductsToBasket(ProductInput: {id: ${t}, size: "${e}", quantity: ${a}}) {\n        status\n        results {\n          status\n          error {\n            code\n            message\n          }\n          productCode\n          productId\n          sizeId\n          quantity\n          quantityAvailable\n        }\n        clientDetailsInBasket {\n          id\n          login\n          firstname\n          lastname\n          participationPartnerProgram\n          usesVat\n          email\n          isWholesaler\n          isWholesalerOrder\n          clientIdUpc\n        }\n      }\n    }`
+    query: `mutation {
+        addProductsToBasket(ProductInput: {id: ${t}, size: "${e}", quantity: ${a}}) {     
+          status
+          results {         
+            status          
+            error {            
+              code
+              message
+            }
+          }
+        }
+      }`
 });
 /////////////////////////////////////////
 // JS
@@ -420,6 +432,7 @@ class IdmHotspot{

        // POKAZANIE
        showOpinions: false,
+        showSecondImage: false,

        // DODAWANIE
        addToBasket: true, // true, false, "range"
@@ -468,6 +481,8 @@ class IdmHotspot{
      this.handleQuantityInputChange = this.handleQuantityInputChange.bind(this);
      this.handleAddToCompare = this.handleAddToCompare.bind(this);
      this.handleAddToFav = this.handleAddToFav.bind(this);
+      this.handleShowSecondImage = this.handleShowSecondImage.bind(this);
+      this.handleHideSecondImage = this.handleHideSecondImage.bind(this);

      this.init();
  }
@@ -619,14 +634,17 @@ class IdmHotspot{
          <source media="(min-width: 421px)" type="image/jpeg" srcset="${prod.iconSecond}"/>
          <source media="(max-width: 420px)" type="image/webp" srcset="${prod.iconSmall}"/>
          <source media="(max-width: 420px)" type="image/jpeg" srcset="${prod.iconSmallSecond}"/>
-          <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
+          <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}" class="product__image --first">
          </picture>`;
      else if(prod?.iconSmall) markup += `<picture>
          <source media="(min-width: 421px)" srcset="${prod.icon}"/>
          <source media="(max-width: 420px)" srcset="${prod.iconSmall}"/>
-          <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
+          <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}" class="product__image --first">
          </picture>`;
-      else markup += `<img src="${prod.icon}" loading="lazy" alt="${prod.name}">`
+      else markup += `<img src="${prod.icon}" loading="lazy" alt="${prod.name}" class="product__image --first">`;
+
+      if(this.options?.showSecondImage && prod.enclosuresImages?.[1]?.url) markup += `<img loading="lazy" src="${prod.enclosuresImages[1].url}" alt="${prod.name} - ${idmHotspotTextObject["Drugie Zdjęcie"]}" class="product__image --second"/>`;
+
      return markup;
  }

@@ -941,6 +959,22 @@ class IdmHotspot{
    input.value = current.toFixed(precision);
  }

+   /**
+   * Obsługuje Pokazywanie zdjęcia na hover
+   */
+  handleShowSecondImage(e){
+    const prodIconEl = e.target.closest(".product__icon");
+    if(!prodIconEl) return;
+
+    prodIconEl.classList.add("--toggle-icon");
+  }
+
+  handleHideSecondImage(e){
+    const prodIconEl = e.target.closest(".product__icon");
+    if(!prodIconEl) return;
+
+    prodIconEl.classList.remove("--toggle-icon");
+  }
  /**
   * Walidacja zmian ilości w polu input.
   */
@@ -1129,28 +1163,27 @@ class IdmHotspot{
    // DODAWANIE DO KOSZYKA
    if(this.options?.addToBasket){
      const addToBasketEl = prodEl.querySelector("form.add_to_basket");
-      if(!addToBasketEl) return;
-      addToBasketEl.addEventListener("submit", this.handleAddToBasket);

+      addToBasketEl?.addEventListener("submit", this.handleAddToBasket);
      // + -
      if(this?.options?.addToBasket === "range"){
-        addToBasketEl.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
-        addToBasketEl.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
+        addToBasketEl?.querySelector(".idm-products-banner__qty")?.addEventListener("click",this.handleQuantityButtonClick);
+        addToBasketEl?.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
      }
    }
-    // Tooltip
-    // if(this.options?.omnibusTooltip){
-    //   const tooltipEl = prodEl.querySelector(".idm_tooltip");
-
-    //   tooltipEl.addEventListener("click", ()=>{
-    //     this.showTooltip(tooltipEl);
-    //   })
-    // }
-    
    // Add to Favorites
    if(this.options?.addToFavorites && typeof this.addToFavFn === "function") prodEl.querySelector(".product__favorite")?.addEventListener("click", this.handleAddToFav);
    // Compare
    if(this.options?.addToCompare) prodEl.querySelector(".idm-products-banner__compare-btn")?.addEventListener("click", this.handleAddToCompare);
+
+    // Second image on hover
+    if(this.options?.showSecondImage){
+      const prodIconEl = prodEl.querySelector(".product__icon");
+      if(prodIconEl.querySelector(".product__image.--second")){
+        prodIconEl?.addEventListener("mouseover", this.handleShowSecondImage);
+        prodIconEl?.addEventListener("mouseleave", this.handleHideSecondImage);
+      }
+    }
  }

  /**
--- a/ramka.txt
+++ b/ramka.txt
@@ -9,12 +9,20 @@
 - stary szablon
 - cena za kg
 - blokowanie dodawania do koszyka jeśli ilość jest maksymalna
+- informacje o producencie albo serri gdzieś nad produktem
+- czy zapisywać wszystkie hotspoty do jakiegoś app_shop.fn.idmHotspots = {"#idmMainHotspot1": {}}



 - własne klasy
- aplikacja do zarządania dodatkiem od obiektów hotspot

 Stara ramka
 - getProductXML=t
- slick
+- slick
+
+
+
+cos: any[] = []
+
+cos ?? ''
+cos?? false
--- a/style.less
+++ b/style.less
@@ -1,3 +1,7 @@
+.idm__hotspot  .btn.add_to_basket__link{
+  margin-top: 0;
+}
+
 .idm__hotspot .add_to_basket{
  display: flex;
 }
@@ -151,7 +155,7 @@
    opacity: 0.6;
  }
 }
-
+/* COMPARE */
 .idm-products-banner__compare-btn{
  .idm-products-banner__compare-icon{
    height: 100%;
@@ -173,7 +177,10 @@
    opacity: 0.6;
  }
 }
-
+.idm-products-banner__compare-btn.--success {
+    display: flex;
+    align-items: end;
+}

 /* opinions */
 .product__opinions{
@@ -187,4 +194,30 @@
 }
 .product__opinions .icon-star:not(.--active)::before{
  content: "\f006";
-}
+}
+
+/* second image */
+.product__image.--second{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.product__icon{
+  .product__image{
+    transition: opacity .25s;
+  }
+  .product__image.--second{
+    opacity: 0;
+  }
+
+  &.--toggle-icon:has(.product__image.--second){
+    .product__image.--first{
+      opacity: 0;
+    }
+    .product__image.--second{
+      opacity: 1;
+    }
+  }
+}