Ramki rekomendacji

Funkcje js składające się na customowe ramki rekomendacji

Pliki

• bundle.js - całość
• 1graphQL.js - graphQL + literały
• 2funkcje.js - ogólne funkcje jak dodawanie do koszyka, czy lazy loading
• 3markup.js - funkcje związane z markupem np zdjęć, cen
• 4init.js - obiekt z ogólnymi ustawieniami Hotspota + init swipera
• 5ainsertHotspotHTML.js - wstawienie ramki po kodzie html
• 5binsertHotspotObject.js - wstawienie ramki po obiekcie js
• 6style.js - wstawienie styli na koniec body(do przeniesienia do css komponentu)

Użycie

1. Wstawienie całego kodu do komponentu/dodatku
2. Ustawienie defaultowych ustawień w obiekcie idmGeneralHotspotObjData
3. Wstawienie HTML lub Obiektu js z odpowienimi danymi i wywołanie funkcji od tworzenia ramek

Przykład

Jedna ramka - obiekt

idmInsertHotspotObject({
       {
        id: "idmMainHotspot1",
        title: "Nowoczesna ramka rekomendacji",
        classes: "abcdefg",
        placement: {
             selector: "#content",
            insert: "afterbegin"
         },
         query: {
            string: `searchInput: {productsId : [589, 180, 181590,160740, 155978, 153632, 123350, 82542, 37321, 17040, 25065, 25114, 85452]}`,
             graphFn: IDM_PRODUCTS_GQL
         },
         options: {
             lazy: false,
             addToBasket: "range",
             swiper: true,
         }
     },
})

Wszystkie ramki - tablica obiektów

idmInsertAllObjectHotspots(hotspotArr);

Jedna ramka - HTML

 <section id="idmBlogHotspot1"
 class="hotspot__wrapper idm__hotspot idm-loading"
  data-products-id="589,180,181590"
 data-lazy="true"
 >
 <div class="hotspot --initialized">
  <h3 class="hotspot__name headline__wrapper">
     <span class="headline">
     <span class="headline__name" aria-label="aaa">aaa</span>
    </span>
  </h3>
  </div>
 </section>
 <script>
    idmInsertHotspotElement(document.getElementByid("idmBlogHotspot1"));
 </script>

Wszystkie ramki - HTML

idmInsertAllHTMLHotspots();

Created by • IdoMods • 2025