/////////////////////////////////////////////////////////// // dodatek po stronie panelu /////////////////////////////////////////////////////////// const tytul = "TYTUL"; const tekst = "TEKST"; const produkty = [173632, 75469, 85452, 25065, 4147]; window.idmInteractiveBannerObj = { idmInteractiveBannerIds: typeof produkty !== "undefined" ? produkty : null, idmInteractiveBannerTitle: typeof tytul !== "undefined" ? tytul : "", idmInteractiveBannerText: typeof tekst !== "undefined" ? tekst : "", }; /////////////////////////////////////////////////////////// // pobranie zmiennych, obiekty mapujące /////////////////////////////////////////////////////////// const idmInteractiveBannerIds = window.idmInteractiveBannerObj?.idmInteractiveBannerIds || null; const idmInteractiveBannerTitle = window.idmInteractiveBannerObj?.idmInteractiveBannerTitle || ""; const idmInteractiveBannerText = window.idmInteractiveBannerObj?.idmInteractiveBannerText || ""; const IDM_ZONE_TEXT_MAP = { promotion: `${}`, discount: `${}`, bestseller: `${}`, new: `${}`, }; const IDM_ZONE_CLASS_MAP = { promotion: "idm-products-banner__label--promo", discount: "idm-products-banner__label--promo", bestseller: "idm-products-banner__label--bestseller", new: "idm-products-banner__label--new", }; /////////////////////////////////////////////////////////// // ustawienie elementów headera /////////////////////////////////////////////////////////// function idmSetBannerTitle(titleElement) { if (idmInteractiveBannerTitle) { titleElement.textContent = idmInteractiveBannerTitle; } } function idmSetBannerText(textElement) { if (idmInteractiveBannerText) { textElement.textContent = idmInteractiveBannerText; } } /////////////////////////////////////////////////////////// // ulubione /////////////////////////////////////////////////////////// // uwaga, trzeba odkryć komponent w układzie Lista zakupowa - Javascript + CSS + XSLT function idmAttachFavoritesEvents() { document.querySelectorAll(".idm-products-banner__favorites-icon").forEach(el => { el.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const icon = e.target.closest(".idm-products-banner__favorites-icon"); app_shop.fn.shoppingList.addProductToList([ [icon.getAttribute("data-id"), icon.getAttribute("data-size")] ]); }); }); } /////////////////////////////////////////////////////////// // dodanie do porównania /////////////////////////////////////////////////////////// function idmHandleAddToCompare(e) { const compareBtnEl = e.target.closest(".idm-products-banner__compare-btn"); if (!compareBtnEl || !compareBtnEl?.dataset?.compareId) return; e.preventDefault(); idmAddToCompare(compareBtnEl, compareBtnEl.dataset.compareId); } async function idmAddToCompare(btnEl, compareId) { try { btnEl.classList.add("--loading"); const compareUrl = `/${app_shop?.vars?.language?.symbol || "de"}/settings.html?comparers=add&product=${compareId}`; const res = await fetch(compareUrl); console.log(res); if (!res.ok) throw new Error(`${}`); btnEl.classList.add("--success"); const compareContainerQuery = "#menu_compare_product"; if (document.querySelector(compareContainerQuery)) { app_shop.fn.load( window.location.pathname, [[compareContainerQuery, compareContainerQuery]], function () {}, "?set_render=content" ); } setTimeout(() => { btnEl.classList.remove("--success"); }, 2000); } catch (err) { console.error(err); Alertek.Error(`${}`); } finally { btnEl.classList.remove("--loading"); } } /////////////////////////////////////////////////////////// // produkty /////////////////////////////////////////////////////////// function idmGetGraphQLQuery(ids) { return JSON.stringify({ query: `{ products(searchInput: {productsId: ${JSON.stringify(ids)}}, settingsInput: {limit: 50}) { products { id type name zones icon link sizes { id amount } awardedParameters { name values { name } } price { rebateCodeActive price { gross { value formatted } } omnibusPrice { gross { value formatted } } max { gross { value formatted } } beforeRebate { gross { value formatted } } } unit { id name sellBy } opinion { rating count } } } }` }); } // helpery const escapeHtml = (v = "") => String(v) .replace(/&/g, "&").replace(//g, ">").replace(/"/g, """) .replace(/'/g, "'"); const slot = (cond, html) => (cond ? html : ""); // label function idmMarkupZoneLabel(zone) { if (!zone) return ""; return ` ${IDM_ZONE_TEXT_MAP[zone] || ""} `; } // porównanie function idmMarkupCompareBtn(productId, options) { if (!options?.compare) return ""; return `
`; } // ulubione function idmMarkupFavoritesIcon(productId, sizeId, options) { if (!options?.favorites) return ""; return `
`; } // ikona function idmMarkupImage(link, icon) { return ` `; } // nazwa function idmMarkupName(name, link) { return `

${escapeHtml(name)}
`; } // ceny function idmMarkupPrices(priceObj) { const current = priceObj?.price?.gross?.formatted || ""; const max = priceObj?.max?.gross?.formatted || ""; const hasOmnibus = priceObj?.omnibusPrice?.gross?.formatted; let mainPrice = ""; if (current && max && max !== current) { mainPrice = `${escapeHtml(current)} ${escapeHtml(max)}`; } else if (current) { mainPrice = escapeHtml(current); } else if (max) { mainPrice = `${escapeHtml(max)}`; } const oldPrice = hasOmnibus ? `${} ${escapeHtml(current || max)}` : ""; return `
${mainPrice}

${oldPrice}

`; } // dodawanie do koszyka function idmMarkupAddToBasket(product, size, options) { if (!options?.addToBasket) return ""; const can = product?.type === "product" && product?.sizes?.length === 1 && size; if (!can) return ""; const sellBy = size?.unitSellby || 1; const precision = size?.unitPrecision || 0; const max = (typeof size?.amount === "number" && size.amount > 0) ? size.amount : ""; return `
`; } // link więcej opcji function idmMarkupMoreOptions(link) { return `
${}
`; } // assembler produktu function idmRenderProductCard(product, options = {}) { const zone = product?.zones?.[0]; const size = product?.sizes?.[0]; const headIcons = ` ${idmMarkupCompareBtn(product.id, options)} ${idmMarkupFavoritesIcon(product.id, size?.id, options)} ${idmMarkupZoneLabel(zone)} `; const addSection = (options?.addToBasket && product?.type === "product" && product?.sizes?.length === 1 && size) ? idmMarkupAddToBasket(product, size, options) : idmMarkupMoreOptions(product.link); return `
${headIcons} ${idmMarkupImage(product.link, product.icon)}
${idmMarkupName(product.name, product.link)} ${idmMarkupPrices(product.price)} ${addSection}
`; } // tworzenie, ustawienie opcji function idmCreateProductMarkup(products, options = { compare: true, favorites: true, addToBasket: true }) { return products.map(p => idmRenderProductCard(p, options)).join(""); } async function idmRenderBannerProducts(container) { const skeletons = document.querySelector(".idm-products-banner__skeletons"); if (!idmInteractiveBannerIds) return; try { container.innerHTML = ""; const response = await fetch("/graphql/v1/", { method: "POST", headers: { "Content-Type": "application/json" }, body: idmGetGraphQLQuery(idmInteractiveBannerIds), }); const json = await response.json(); const productsData = json?.data?.products?.products; console.log(productsData); if (!productsData) return; const sorted = idmInteractiveBannerIds .map(id => productsData.find(p => p.id === id)) .filter(Boolean); container.innerHTML = idmCreateProductMarkup(sorted); idmInitSlickSlider(container); idmAttachFavoritesEvents(); // +/- i walidacja inputów ilości document.addEventListener("click", (e) => { const wrapper = e.target.closest(".idm-products-banner__qty"); if (!wrapper) return; const input = wrapper.querySelector(".idm-products-banner__qty-input"); const step = parseFloat(wrapper.dataset.sellBy || "1"); const precision = parseInt(wrapper.dataset.precision || "0"); const max = parseFloat(wrapper.dataset.max || "999999"); let current = parseFloat(input.value) || 0; if (e.target.classList.contains("idm-products-banner__qty-increase")) { current += step; if (current > max) current = max; } else if (e.target.classList.contains("idm-products-banner__qty-decrease")) { current -= step; if (current < step) current = step; } input.value = current.toFixed(precision); }); document.addEventListener("blur", (e) => { if (!e.target.classList.contains("idm-products-banner__qty-input")) return; const input = e.target; const wrapper = input.closest(".idm-products-banner__qty"); const step = parseFloat(wrapper.dataset.sellBy || "1"); const precision = parseInt(wrapper.dataset.precision || "0"); const max = parseFloat(wrapper.dataset.max || "999999"); let val = parseFloat(input.value); if (isNaN(val) || val < step) { val = step; } else if (val > max) { val = max; } else { val = Math.round(val / step) * step; } input.value = val.toFixed(precision); }, true); // ukrycie skeletona skeletons?.classList.add("idm_hidden"); container.classList.remove("idm_hidden"); // event porównania (delegacja) document.addEventListener("click", idmHandleAddToCompare); } catch (err) { console.error("Błąd pobierania produktów:", err); } } /////////////////////////////////////////////////////////// // slider i wyrównanie wysokości /////////////////////////////////////////////////////////// function idmInitSlickSlider(container) { $(container).on("init", function () { app_shop.fn.setHeight({ selectors: [ ".idm-products-banner .idm-products-banner__product-img-container", ".idm-products-banner .idm-products-banner__product-name", ".idm-products-banner .idm-products-banner__price", ".idm-products-banner .idm-products-banner__price-omnibus", ".idm-products-banner .idm-products-banner__add-to-basket", ".idm-products-banner .product" ], container: ".idm-products-banner__products .slick-track" }); }); $(container).slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: false, dots: false, arrows: true, prevArrow: '', nextArrow: '', responsive: [ { breakpoint: 979, settings: { slidesToShow: 2 } }, { breakpoint: 757, settings: { slidesToShow: 2 } }, ], }); } /////////////////////////////////////////////////////////// // start działania /////////////////////////////////////////////////////////// function idmWaitForBannerElements() { let attempts = 0; const interval = setInterval(() => { let initialized = 0; const bannerTitle = document.querySelector(".idm-products-banner__title"); if (bannerTitle) { idmSetBannerTitle(bannerTitle); initialized++; } const bannerText = document.querySelector(".idm-products-banner__text"); if (bannerText) { idmSetBannerText(bannerText); initialized++; } const bannerContainer = document.querySelector(".idm-products-banner__products"); if (bannerContainer) { idmRenderBannerProducts(bannerContainer); initialized++; } const bannerHeader = document.querySelector(".idm-products-banner__header"); if (bannerHeader) { initialized++; } if (initialized >= 4) { clearInterval(interval); } else if (++attempts >= 10) { clearInterval(interval); console.warn("Niektóre wymagane elementy DOM nie zostały znalezione"); } }, 500); } document.addEventListener("DOMContentLoaded", function () { idmWaitForBannerElements(); });