159 lines
6.1 KiB
Markdown
159 lines
6.1 KiB
Markdown
# Ramki rekomendacji #
|
|
Funkcje js składające się na customowe ramki rekomendacji
|
|
|
|
## UWAGI PRZEDWDROŻENIOWE ##
|
|
- kod zawiera **app_shop.fn.idmGetOmnibusDetails** który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
|
|
- kod zawiera FrontendComponents/helper-functions/tooltip i FrontendComponents/helper-functions/swiper-scrollbar
|
|
- kod używa naszego idmSetHeight, ale jest to wstawione jako metoda klasowa, nie jako coś osobnego.
|
|
- Opcja dodawania do ulubionych options.addToFavorites działa tylko jak odpowiednio zmieni się komponent Listy zakupowych w układzie by kod był dostępny poza kartą towaru
|
|
|
|
## Pliki ##
|
|
- **style.css** - style wstawiane do css
|
|
- **klasa.js** - kod js
|
|
|
|
## Użycie ##
|
|
1. Wstawienie całego kodu do komponentu (najlepiej chyba Hotspoty javascript RAYPATH - #IdoMods
|
|
w zwykły Javascript)/dodatku(uwaga tutaj na literały)
|
|
2. Ustawienie defaultowych ustawień na początku klasy w **idmDefaultSwiperConfig** i w **idmDefaultHotspotOptions**
|
|
3. Wstawienie HTML lub Obiektu js z odpowienimi danymi i wywołanie funkcji od tworzenia ramek
|
|
|
|
### Dodatkowe informacje ###
|
|
Można użyć extends w innym miejscu (np tym razem w wydzielonym JS) żeby nadpisać jakąś metodę, bez zmian w kodzie ramki. Będzie to przydatne w przypadku gdzie trzeba będzie zaktualizować kod ramki.
|
|
|
|
**Przykład**
|
|
```
|
|
class IdmRaypathHotspot extends IdmHotspot {
|
|
markupLabel(prod) {
|
|
// Standardowe labelki
|
|
let labelMarkup = super.markupLabel(prod);
|
|
|
|
// Customowe labelki
|
|
const awards = prod?.awardedParameters;
|
|
if (awards?.length) {
|
|
const awardParam = awards.find(award => award.name === "Idm_custom_label");
|
|
const values = awardParam?.values?.map(v => v.name) || [];
|
|
|
|
const html = values
|
|
.map(label => {
|
|
const [text, bgColor, color] = label.split("||");
|
|
return `<span class="label --custom" style="background-color:${bgColor}; color:${color}">${text}</span>`;
|
|
})
|
|
.join("");
|
|
|
|
labelMarkup += html;
|
|
}
|
|
|
|
return labelMarkup;
|
|
}
|
|
}
|
|
```
|
|
Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo w opisie szablonu.
|
|
|
|
### Literały do uzupełnienia w szablonie ###
|
|
- Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę
|
|
- Błąd przy pobieraniu danych
|
|
- Maksymalna liczba sztuk tego towaru które możesz dodać do koszyka to:
|
|
- Minimalna liczba sztuk tego towaru które możesz dodać do koszyka to:
|
|
- Wystąpił błąd z inicjalizacją. Proszę odśwież stronę
|
|
- Nie znaleziono kontenera
|
|
- Nie znaleziono metody graphql
|
|
- Najniższa cena
|
|
|
|
### Przykłady UŻYCIA ###
|
|
##### Jedna ramka - obiekt ######
|
|
```
|
|
new IdmHotspot({
|
|
id: "idmTestHotspot1",
|
|
title: "tescik",
|
|
placement: {
|
|
selector: "#content",
|
|
insert: "beforeend",
|
|
},
|
|
source: {
|
|
productsMenu: 1649
|
|
}
|
|
});
|
|
```
|
|
|
|
|
|
#### Wszystkie możliwe dane JS ####
|
|
```
|
|
/**
|
|
* @typedef {object} Hotspot
|
|
* @property {string} id - Identyfikator ramki (required).
|
|
* @property {string} title - Tytuł ramki.
|
|
* @property {string} classes - Dodatkowe klasy CSS.
|
|
* @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 {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.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 {Function} options.callbackFn - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
|
|
* @property {boolean} options.swiperScrollbar - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
|
|
* @property {boolean} options.omnibusTooltip - Czy wyświetlać omnibusa w formie tooltip
|
|
*
|
|
* @type {Hotspot[]}
|
|
*/
|
|
```
|
|
|
|
|
|
###### 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>
|
|
```
|
|
|
|
Żeby zmienić resztę ustawień trzeba zmieniać defaultowe ustawienia!
|
|
#### Wszystkie możliwe dane HTML ####
|
|
```
|
|
/**
|
|
* Struktura sekcji hotspotu w HTML.
|
|
*
|
|
* @typedef {HTMLElement} HotspotSection
|
|
* @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 {boolean} data-lazy - Czy sekcja ma być ładowana w trybie lazy.
|
|
*
|
|
* @example
|
|
*/
|
|
|
|
```
|
|
|
|
|
|
Created by • **[IdoMods](https://idomods.pl/)** • 2025 |