This commit is contained in:
2026-01-28 15:03:41 +01:00
parent 09c14785e7
commit 85b18161fd
15 changed files with 720 additions and 397 deletions

View File

@@ -144,6 +144,7 @@ function idmGetSingleProdGraphQLPM({
name
link
type
icon
${labels ? "zones" : ""}
${
opinions
@@ -406,25 +407,32 @@ async function idmPictureModuleProductsPM(containerEL) {
// OPINIE
let opinionsHTML = "";
if (isOpinions) {
if (
isOpinions &&
typeof prodData.opinion?.rating === "number" &&
typeof prodData.opinion?.count === "number"
) {
opinionsHTML = `
<div class="product_opinions__stars">
<i class="icon-star ${prodData.opinion?.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 4.5 ? "--active" : ""}"></i>
</div>
<span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
<span class="product_opinions__count">${prodData.opinion.count}</span>
`;
}
prodEl.innerHTML = `
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
<a href="${prodData.link}" class="product_icon --mobile"><img src="${prodData.icon}" alt="${prodData.name}" tabindex="-1"/></a>
<div class="product_info__container">
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
</div>
`;
idmInitEventsPM({
@@ -444,21 +452,31 @@ async function idmPictureModuleProductsPM(containerEL) {
document.body.addEventListener("click", (e) => {
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
const prodContainerEl = e.target.closest(".idm_picture__product");
const moduleCotnainer = e.target.closest(".idm_picture__module");
const prodContainerEl = e.target
.closest(".idm_picture__product")
?.querySelector(".product_info");
if (!prodContainerEl || !moduleCotnainer) return;
// ClearShow
if (!prodContainerEl)
return document
.querySelector(".idm_picture__product.--show")
?.classList?.remove("--show");
if (prodContainerEl.classList.contains("--show"))
return prodContainerEl.classList.remove("--show");
// if(!prodContainerEl) return document.querySelector(".idm_picture__product.--show")?.classList?.remove("--show");
// if(prodContainerEl.classList.contains("--show")) return prodContainerEl.classList.remove("--show");
const moduleContainer = prodContainerEl.closest(".idm_picture__module");
if (!moduleContainer) return;
// const moduleContainer = prodContainerEl.closest(".idm_picture__module");
// if(!moduleContainer) return;
moduleContainer
.querySelectorAll(".idm_picture__product.--show")
.forEach((prodConEl) => prodConEl.classList.remove("--show"));
prodContainerEl.classList.add("--show");
// moduleContainer.querySelectorAll(".idm_picture__product.--show").forEach(prodConEl=>prodConEl.classList.remove("--show"));
// prodContainerEl.classList.add("--show");
const computedStyles = window.getComputedStyle(moduleCotnainer);
const backgroundColor = computedStyles.getPropertyValue("--photo-mod-col-bg");
const textColor = computedStyles.getPropertyValue("--photo-mod-col-text");
new Modal({
element: prodContainerEl,
classList: "--mobile --photo-prod-mobile",
afterShow: (modal) => {
modal.style.setProperty("--photo-prod-box-bg", backgroundColor || "#fff");
modal.style.setProperty("--photo-prod-box-text", textColor || "#111");
},
});
});