Bug fix dla generowania ramek z HTML + dodatkowe source i dataatrybuty dla HTML

2025-11-24 12:37:38 +01:00
parent 49ff211062
commit 2d4cb1c44e
4 changed files with 93 additions and 44 deletions
--- a/README.md
+++ b/README.md
@@ -96,11 +96,17 @@ new IdmHotspot({
 * @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 {number[]} [source.producersId] - Tablica ID producentów.
+ * @property {number[]} [source.seriesId] - Tablica ID serii.
+ * @property {number[]} [source.parametersId] - Tablica ID grup parametrów.
+ * @property {object} [source.priceRange] - Obiekt z ceną od do.
+ * @property {number} [source.priceRange.from] - cena od
+ * @property {number} [source.priceRange.to] - cena do


- * @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} [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).
@@ -144,9 +150,6 @@ new IdmHotspot({
  </h3>
  </div>
 </section>
- <script>
-    idmInsertHotspotElement(document.getElementByid("idmBlogHotspot1"));
- </script>
 ```

 Żeby zmienić resztę ustawień trzeba zmieniać defaultowe ustawienia!
@@ -159,9 +162,14 @@ new IdmHotspot({
 * @property {string} id - Identyfikator elementu (np. "idmBlogHotspot1").
 * @property {string} class - Klasy CSS używane do stylowania.
 *
- * @attribute {string} data-products-id - Lista ID produktów (rozdzielona przecinkami).
- * @attribute {number} data-products-menu - Identyfikator menu produktów.
 * @attribute {string} data-hotspots-type - Typ hotspotu (np. "promotion").
+ * @attribute {number[]} data-products-id - Lista ID produktów (rozdzielona przecinkami).
+ * @attribute {number} data-products-menu - Identyfikator menu produktów.
+ * @attribute {number[]} data-producers-id - Lista id producentów (rozdzielona przecinkami).
+ * @attribute {number[]} data-series-id - Lista id serii (rozdzielona przecinkami).
+ * @attribute {number[]} data-parameters-id - Lista id grup parametrów (rozdzielona przecinkami).
+ * @attribute {number} data-price-from - "cena od" produktów w hotspocie
+ * @attribute {number} data-price-to - "cena do" produktów w hotspocie
 * @attribute {boolean} data-lazy - Czy sekcja ma być ładowana w trybie lazy.
 *
 * @example
--- a/klasa.js
+++ b/klasa.js
@@ -509,26 +509,44 @@ class IdmHotspot{
  /**
   * Przygotowuje funkcję i zapytanie GraphQL w zależności od typu danych.
   */
-  getQueryData({productsID, productsMenu, hotspotsType}){
+  getQueryData(){
    let graphFn, query;
-    if(productsID){
-      graphFn = IDM_PRODUCTS_GQL;
-      query = `searchInput: {productsId: [${productsID}]}`;
-    }else if(productsMenu){
-      graphFn = IDM_PRODUCTS_GQL;
-      query = `searchInput: {navigation: ${productsMenu}}`;
-    }else if(hotspotsType){
+    let queryMarkup = "";
+
+    if(this.source?.hotspotsType){
      graphFn = IDM_HOTSPOTS_GQL;
-      query = `searchInput: {hotspot: ${hotspotsType}, limit: 16}`;
+      queryMarkup += `hotspot: ${this.source.hotspotsType}, limit: 16`;
+    }else{
+      graphFn = IDM_PRODUCTS_GQL;
+      if(this.source?.productsId){
+        queryMarkup += `productsId: [${this.source.productsId}],`;
+      } 
+      if(this.source?.productsMenu){
+        queryMarkup += `navigation: ${this.source.productsMenu},`;
+      }
+      if(this.source?.producersId){
+        queryMarkup += `producers: [${this.source.producersId}],`;
+      }
+      if(this.source?.seriesId){
+        queryMarkup += `series: [${this.source.seriesId}],`;
+      }
+      if(this.source?.parametersId){
+        queryMarkup += `parameters: [${this.source.parametersId.reduce((acc,val)=> acc + `{id: ${val}}`,"")}],`;
+      }
+      if(this.source?.priceRange){
+        queryMarkup += `priceRange: {from: ${+this.source.priceRange?.from || 0}, to: ${+this.source.priceRange?.to || 0}},`;
+      }
    }

+    query =  `searchInput: { ${queryMarkup} }`
+
    return [graphFn, query];
  }
   /**
   * Ustawia dane zapytania GraphQL wewnątrz instancji.
   */
-  setQueryData(queryObj){
-      const [graphFn, queryString] = this.getQueryData(queryObj);
+  setQueryData(){
+      const [graphFn, queryString] = this.getQueryData();
      this.query.graphFn = graphFn;
      this.query.string = queryString;
  }
@@ -836,17 +854,20 @@ class IdmHotspot{
        <span class="headline"><span class="headline__name" aria-label="${this.title}">${this.title}</span></span>
        </h3>
        ` : ""}
-        <div class="products__wrapper swiper">
-        <div class="products hotspot__products swiper-wrapper">
-        
-                    </div>
-                    </div>
-                    <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
-                    <div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
-                    <div class="swiper-pagination"></div>
+        ${this.markupHotspotSwiperContainer()}
                    </div>
                    </section>`;
  }
+  markupHotspotSwiperContainer(productsHTML=""){
+    return `<div class="products__wrapper swiper">
+          <div class="products hotspot__products swiper-wrapper">
+            ${productsHTML}
+          </div>
+        </div>
+        <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
+        <div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
+        <div class="swiper-pagination"></div>`;
+  }

  // ========================================================
  // HANDLERY ZDARZEŃ
@@ -1143,11 +1164,7 @@ class IdmHotspot{
    this.initExternalFunctions();
    try{
        if(!this.products){
-          if(!this?.query?.graphFn || !this?.query?.string) this.setQueryData({
-              productsID: this?.source?.productsId,
-              productsMenu: this?.source?.productsMenu,
-              hotspotsType: this?.source?.hotspotsType
-          });
+          if(!this?.query?.graphFn || !this?.query?.string) this.setQueryData();
          
          // pobranie danych o produktach
          await this.getHotspotData();
@@ -1156,7 +1173,15 @@ class IdmHotspot{

              
          // Wstawienie markupa na strone
-          this.hotspotEl.querySelector(".products.hotspot__products")?.insertAdjacentHTML("beforeend", this.markup());
+          if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup());
+          else if(this.hotspotEl.querySelector(".hotspot")){
+            this.hotspotEl.querySelector(".hotspot")?.insertAdjacentHTML("beforeend", this.markupHotspotSwiperContainer(this.markup()));
+          }
+          else{
+            throw new Error("Nie udało się wstawić produktów! Zła struktura HTML")
+          }
+
+
          this.hotspotEl.classList.remove("idm-loading");
          
          // init swiper + add to basket
@@ -1431,14 +1456,26 @@ document.addEventListener("DOMContentLoaded", ()=>{
 // new IdmHotspot({
 //   id: "idmTestHotspot1",
 //   title: "tescik",
+//   products: [] // Tablica produktów
 //   placement: {
 //     selector: "#content",
 //     insert: "beforeend",
 //   },
 //   source: {
-//     productsMenu: 1649
+//      productsMenu: 1649,
+//      producersId: [],
+//      seriesId: [],
+//      parametersId: [],
+//      priceRange: {
+//        from: 0,
+//        to: 150,
+//      }
 //   }
-//   products: [] // Tablica produktów
+//    options: {
+//             lazy: true,
+//             addToBasket: "range",
+//             swiper: true,
+//         }
 // });
 //     {
 //         id: "idmMainHotspot2",
@@ -1462,10 +1499,19 @@ async function idmPrepareHotspotObject(selectedContainerEl){
  selectedContainerEl.classList.add("--init");
  const source = {};

-  if(selectedContainerEl?.dataset?.productsId) source.productsId = selectedContainerEl?.dataset?.productsId.split(",");
-  else if(selectedContainerEl?.dataset?.hotspotsType) source.hotspotsType = selectedContainerEl?.dataset?.hotspotsType;
-  else if(selectedContainerEl?.dataset?.productsMenu) source.productsMenu = selectedContainerEl?.dataset?.productsMenu;
-  else{
+
+  if(selectedContainerEl.dataset?.hotspotsType) source.hotspotsType = selectedContainerEl.dataset.hotspotsType;
+  else {
+    if(selectedContainerEl.dataset?.productsId) source.productsId = selectedContainerEl.dataset.productsId.split(",");
+    if(selectedContainerEl.dataset?.productsMenu) source.productsMenu = selectedContainerEl.dataset.productsMenu;
+    if(selectedContainerEl.dataset?.producersId) source.producersId = selectedContainerEl.dataset.producersId;
+    if(selectedContainerEl.dataset?.seriesId) source.seriesId = selectedContainerEl.dataset.seriesId;
+    if(selectedContainerEl.dataset?.parametersId) source.seriesId = selectedContainerEl.dataset.parametersId;
+    if(selectedContainerEl.dataset?.priceFrom && selectedContainerEl.dataset?.priceTo) source.priceRange = {from: +selectedContainerEl.dataset.priceFrom, to: +selectedContainerEl.dataset.priceTo};
+  }
+
+
+  if(Object.keys(source).length === 0){
    console.error();
    selectedContainerEl?.remove();
    return;
--- a/ramka.txt
+++ b/ramka.txt
@@ -7,7 +7,6 @@ wersja max 5 zdjęć i później + może????
 - Wybór kolorystyczny???
 - AAAAA - banner na hotspocie
 - 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": {}}
--- a/style.less
+++ b/style.less
@@ -1,7 +1,3 @@
-.idm__hotspot  .btn.add_to_basket__link{
-  margin-top: 0;
-}
-
 .idm__hotspot .add_to_basket{
  display: flex;
 }