80 lines
2.1 KiB
Markdown
80 lines
2.1 KiB
Markdown
# 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](https://idomods.pl/)** • 2025 |