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

## UWAGI PRZEDWDROŻENIOWE ##
- kod zawiera app_shop.fn.idmSetHeight używany do wyrównywania wysokości
- kod zawiera app_shop.fn.idmGetOmnibusDetails który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach 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.css - 

### 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();
```


### LISTA GLOBALNYCH FUNKCJI, ZMIENNYCH ###
##### INIT #####
- priceQuery
- productQuery
- IDM_PRODUCTS_GQL
- IDM_HOTSPOTS_GQL
- IDM_PRODUCT_GQL
- IDM_HOTSPOT_ADD_TO_BASKET
- idmHotspotTextObject

#### FUNKCJE ####
- app_shop.fn.idmGetOmnibusDetails
- idmHandleAddToBasket
- idmRangeMaxAlert
- idmRangeMinAlert
- idmQuantityButtonClick
- idmQuantityInputChange
- idmGetHotspotData
- idmGetQueryData
- idmObserveOnce
- app_shop.fn.idmSetHeight


#### MARKUP ####
- idmPrepareProductsMarkup
- idmPrepareSingleProductMarkup
- idmPrepareHotspotImgMarkup
- idmPrepareHotspotPriceMarkup
- idmPrepareHotspotAddToBasketMarkup

#### INIT ####
- idmPriceType
- idmGeneralHotspotObjData
- idmHotspotInit

#### INSERT ####
- idmInsertHotspotElement
- idmInsertAllHTMLHotspots
- idmInsertHotspotObject
- idmInsertAllObjectHotspots

Created by • **[IdoMods](https://idomods.pl/)** • 2025