# 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
- Drugie Zdjęcie

### 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[]} [products] - tablica produktów z układem danych takich jak w graphql. Opcjonalne, pod specjalne funkcjonalności.


 * @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.
 * @property {string} [source.link] - link do listingu z którego mają być pobierane produkty (NIEZALECANE)
 * @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} options - Ustawienia dla hotspotu (required).
 * @property {boolean} [options.limit] - Limit wczytywanych produktów
 * @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.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip
 * @property {Function} [options.callbackFn] - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem

 * @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 {boolean} [options.swiperScrollbar] - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
 * @property {boolean} [options.showOpinions] - Czy wyświetlać opinie o produkcie w formie gwiazdek nad nazwą
 * @property {boolean} [options.showSecondImage] - Czy wyświetlać drugie zdjęcie na hover
 * 
 * @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>
```

Ż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-link - link do listingu z którego mają być pobierane produkty (NIEZALECANE)
 * @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
 */

```


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