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

Wstawienie całego kodu do komponentu (najlepiej chyba Hotspoty javascript RAYPATH - #IdoMods w zwykły Javascript)/dodatku(uwaga tutaj na literały)
Ustawienie defaultowych ustawień na początku klasy w idmDefaultSwiperConfig i w idmDefaultHotspotOptions
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
Wystąpił błąd w trakcie dodawania produktu

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)(Reszta opcji source nie zadziała!!)
 * @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

 * @property {boolean} [options.selectVersion] - Pokazywanie multiwersji
 * 
 * @property {object} cssVariables - Obiekt z opcjami zmiennych CSS wgrywanymi do danej ramki rekomendacji
 * @property {object} [cssVariables.version] - Obiekt ze zmiennymi css dla wersji
 * @property {number} [cssVariables.version.columnDesktop] - liczba kolumn wersji na desktop
 * @property {number} [cssVariables.version.columnTablet] - liczba kolumn wersji na tablecie
 * @property {number} [cssVariables.version.columnMobile] - liczba kolumn wersji na mobile
 * @property {number} [cssVariables.nameClamp] - liczba wyświetlanych linijek tekstu nazwy produktu 


 * @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">
  <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 • 2025