hotspots/sklad/5binsertHotspotObject.js

////////////////////////////////////////////////////
// Funkcja init OBIEKT JS
async function idmInsertHotspotObject(idmHotspotObj){
    // Wstaw kontener
    const selectedEl = document.querySelector(idmHotspotObj?.placement.selector);
    if(!selectedEl) throw new Error(idmHotspotTextObject["Nie znaleziono kontenera"]);    

    selectedEl.insertAdjacentHTML(idmHotspotObj.placement.insert || "afterend", `<section id="${idmHotspotObj.id}" class="hotspot__wrapper idm__hotspot --init idm-loading ${idmHotspotObj?.classes}">
            <div class="hotspot --initialized">
                ${idmHotspotObj?.title ? `
                    <h3 class="hotspot__name headline__wrapper">
                        <span class="headline"><span class="headline__name" aria-label="${idmHotspotObj.title}">${idmHotspotObj.title}</span></span>
                    </h3>
                ` : ""}
                <div class="products__wrapper swiper">
                    <div class="products hotspot__products swiper-wrapper">
                        
                    </div>
                </div>
                <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
                <div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
                <div class="swiper-pagination"></div>
            </div>
        </section>`);


    // Utworzenie markupa HTML
    const selectedContainerEl = document.getElementById(idmHotspotObj.id);
    if(!selectedContainerEl) throw new Error(idmHotspotTextObject["Nie znaleziono kontenera"]);

    const idmFill = async ()=>{
        try{
            let {graphFn, query} = idmGetQueryData({
                productsID: idmHotspotObj?.source?.productsId,
                productsMenu: idmHotspotObj?.source?.productsMenu,
                hotspotsType: idmHotspotObj?.source?.hotspotsType
            });
            
            if(idmHotspotObj?.query?.graphFn && idmHotspotObj?.query?.string){
                graphFn = idmHotspotObj.query.graphFn;
                query = idmHotspotObj.query.string;
            }

            // pobranie danych o produktach
            const products = await idmGetHotspotData(query, graphFn);
            if(!products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]);

                
            // Wstawienie markupa na strone
            const hotspotMarkup = `${idmPrepareProductsMarkup(products, idmHotspotObj?.options?.addToBasket)}`;
            selectedContainerEl.querySelector(".products.hotspot__products")?.insertAdjacentHTML("beforeend", hotspotMarkup);
            selectedContainerEl.classList.remove("idm-loading");
            
            // init swiper + add to basket
            idmHotspotInit(idmHotspotObj.id, idmHotspotObj?.options)
        }catch(err){
            console.error(idmHotspotTextObject["Wystąpił błąd"], err);
            selectedContainerEl.remove();
        }
    }

       
    if(idmHotspotObj?.options?.lazy || 
        typeof idmHotspotObj?.options?.lazy === "undefined" && typeof idmGeneralHotspotObjData === "object" && idmGeneralHotspotObjData?.options?.lazy) idmObserveOnce(selectedContainerEl, idmFill);
    else idmFill();
}


// obiekt js z przykładowymi danymi
/**
 * Tablica konfiguracji hotspotów rekomendacji.
 * 
 * @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[]}
 */
// const idmHotspotArr = [
//     {
//         id: "idmMainHotspot1",//!id ramki 
//         title: "Nowoczesna ramka rekomendacji",//
//         classes: "abcdefg",
//         placement: {
//             selector: "#content",
//             insert: "afterbegin"
//         },
//         source: {
//             hotspotType: "protomtion",
//             productsId: [11,12],
//             productsMenu: 122,
//         },
//         query: {
//             string: `searchInput: {productsId : [589, 180, 181590,160740, 155978, 153632, 123350, 82542, 37321, 17040, 25065, 25114, 85452]}`,
//             graphFn: IDM_PRODUCTS_GQL
//         },
//         // addToBasket: true,
//         options: {
//             lazy: false,
//             addToBasket: "range",
//             swiper: true,
//             callbackFn: ()=>{console.log("test")}
//             // swiper: albo true false - albo obiekt z opcjami swipera
//         }
//     },
//     {
//         id: "idmMainHotspot2",
//         title: "Super ramka rekomendacji",
//         placement: {
//             selector: "#content",
//             insert: "beforeend"
//         },
//         source: {
//             productsMenu: 488,
//         },
//         query: {
//             string: `searchInput: {hotspot: promotion,limit: 16}`,
//             graphFn: IDM_HOTSPOTS_GQL
//         },
//         // addToBasket: true,
//         options: {
//             lazy: true,
//             addToBasket: "range",
//             swiper: true,
//             // swiper: albo true false - albo obiekt z opcjami swipera
//         }
//     }
// ];


// Wrzucenie na strone wszystkich ramek z obiektu js
async function idmInsertAllObjectHotspots(hotspotArr){
    try{
        const reqArr = [] 
        hotspotArr.forEach(hotspotObj=>{
            reqArr.push(idmInsertHotspotObject(hotspotObj));
        });
        await Promise.all(reqArr);
    }catch(err){
        console.error(err)
    }
}


// idmInsertAllObjectHotspots(idmHotspotArr);