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

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

Przykład

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|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
 * 
 * @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>

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 • 2025