483 lines
15 KiB
JavaScript
483 lines
15 KiB
JavaScript
const idmPhotoModuleLiteralsPM = {
|
|
[`Okazja`]: "Okazja",
|
|
[`Zobacz produkt`]: "Zobacz produkt",
|
|
[`Dodany`]: "Dodany",
|
|
[`Wystąpił błąd`]: "Wystąpił błąd",
|
|
[`Do koszyka`]: "Do koszyka",
|
|
[`Najniższa cena z 30 dni przed obniżką:`]:
|
|
"Najniższa cena z 30 dni przed obniżką:",
|
|
[`Cena regularna:`]: "Cena regularna:",
|
|
[`Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę`]:
|
|
"Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę",
|
|
|
|
// mapowanie labelow
|
|
["new"]: "Nowość",
|
|
["bestseller"]: "Bestseller",
|
|
["promotion"]: "Promocja",
|
|
["discount"]: "Przecena",
|
|
["distinguished"]: "Produkt Wyróżniony",
|
|
["special"]: "Produkt Specjalny",
|
|
["subscription"]: "Subskrypcja",
|
|
};
|
|
|
|
// LAZY LOAD
|
|
function idmObserveEachOncePM(elements, callback, options = {}) {
|
|
const observer = new IntersectionObserver(
|
|
(entries, obs) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return;
|
|
|
|
callback(entry);
|
|
obs.unobserve(entry.target);
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
...options,
|
|
},
|
|
);
|
|
|
|
elements.forEach((el) => observer.observe(el));
|
|
return observer;
|
|
}
|
|
|
|
idmObserveEachOncePM(
|
|
document.querySelectorAll(".idm_picture__module"),
|
|
(entry) => {
|
|
idmPictureModuleProductsPM(entry.target);
|
|
},
|
|
);
|
|
|
|
// GRAPHQL QUERY
|
|
function idmGetSingleProdGraphQLPM({
|
|
prodId,
|
|
opinions = false,
|
|
labels = false,
|
|
addToBasket = false,
|
|
}) {
|
|
const IDM_PRICE_QUERY = (priceType) => `price {
|
|
rebateCodeActive
|
|
price {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
omnibusPrice {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
omnibusPriceDetails {
|
|
unit {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
youSavePercent
|
|
omnibusPriceIsHigherThanSellingPrice
|
|
newPriceEffectiveUntil {
|
|
formatted
|
|
}
|
|
}
|
|
max {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
unit {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
unitConvertedPrice {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
youSavePercent
|
|
beforeRebate {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
beforeRebateDetails {
|
|
youSavePercent
|
|
unit {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
}
|
|
advancePrice {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
suggested {
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
rebateNumber {
|
|
number
|
|
${priceType} {
|
|
value
|
|
formatted
|
|
}
|
|
}
|
|
}`;
|
|
|
|
return `
|
|
prod${prodId}: product(productId: ${prodId}) {
|
|
product {
|
|
id
|
|
name
|
|
link
|
|
type
|
|
icon
|
|
${labels ? "zones" : ""}
|
|
${
|
|
opinions
|
|
? `
|
|
opinion{
|
|
rating
|
|
count
|
|
}`
|
|
: ""
|
|
}
|
|
${IDM_PRICE_QUERY(app_shop.vars.priceType)}
|
|
${
|
|
addToBasket
|
|
? `
|
|
unit{
|
|
id
|
|
name
|
|
singular
|
|
plural
|
|
fraction
|
|
sellBy
|
|
precision
|
|
unitConvertedFormat
|
|
}
|
|
sizes{
|
|
id
|
|
name
|
|
code
|
|
amount
|
|
availability{
|
|
visible
|
|
status
|
|
}
|
|
${IDM_PRICE_QUERY(app_shop.vars.priceType)}
|
|
}
|
|
`
|
|
: ""
|
|
}
|
|
}
|
|
}`;
|
|
}
|
|
|
|
async function idmHandleAddToBasketPM(e) {
|
|
const formEl = e.target.closest(".add_to_basket");
|
|
if (!formEl) return;
|
|
const buttonEl = formEl.querySelector(".add_to_basket__button");
|
|
e.preventDefault();
|
|
try {
|
|
formEl.classList.add("--loading");
|
|
const id = formEl.querySelector("input.product__add_id")?.value;
|
|
const size = formEl.querySelector("input.product__add_size")?.value;
|
|
const number = formEl.querySelector("input.product__add_number")?.value;
|
|
|
|
const res = await fetch(`/graphql/v1/`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
query: `mutation {
|
|
addProductsToBasket(ProductInput: {id: ${id}, size: "${size}", quantity: ${number}}) {
|
|
status
|
|
results {
|
|
status
|
|
error {
|
|
code
|
|
message
|
|
}
|
|
}
|
|
}
|
|
}`,
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
|
|
// Błąd
|
|
if (data?.data?.addProductsToBasket?.status !== "success")
|
|
throw new Error(data);
|
|
else {
|
|
localStorage.setItem("addedtoBasket", true);
|
|
// Obsługiwanie sukcesu
|
|
app_shop.fn?.menu_basket_cache();
|
|
await app_shop.graphql.trackingEvents(res);
|
|
buttonEl.classList.add("--success");
|
|
buttonEl.innerHTML = `<span>${buttonEl.dataset.success}</span>`;
|
|
setTimeout(() => {
|
|
buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
|
|
buttonEl.classList.remove("--success");
|
|
}, 3000);
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
Alertek.Error(
|
|
idmPhotoModuleLiteralsPM[
|
|
"Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę"
|
|
],
|
|
);
|
|
buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`;
|
|
buttonEl.classList.add("--error");
|
|
setTimeout(() => {
|
|
buttonEl.classList.remove("--error");
|
|
buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
|
|
}, 3000);
|
|
} finally {
|
|
formEl.classList.remove("--loading");
|
|
}
|
|
}
|
|
|
|
function idmMarkupAddToBasketPM(prodData) {
|
|
if (!prodData) return "";
|
|
|
|
const totalAmount = prodData?.sizes?.[0]?.amount || 0;
|
|
const prodStatus = prodData?.sizes?.[0]?.availability?.status || "disable";
|
|
|
|
if (
|
|
prodData.type !== "product" ||
|
|
totalAmount === 0 ||
|
|
prodStatus === "disable"
|
|
)
|
|
return `<a class="btn --solid --medium add_to_basket__link" href="${prodData.href}">${idmPhotoModuleLiteralsPM["Zobacz produkt"]}</a>`;
|
|
|
|
return `<form class="add_to_basket" action="/basketchange.php" type="post">
|
|
<input class="product__add_mode" type="hidden" value="1" name="mode">
|
|
<input class="product__add_id" type="hidden" value="${prodData.id}" name="mode">
|
|
<input class="product__add_size" type="hidden" value="${prodData.sizes?.[0]?.id || "uniw"}" name="mode">
|
|
<input class="product__add_number" type="hidden" value="${prodData.unit?.sellBy || 1}" name="mode">
|
|
<button class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmPhotoModuleLiteralsPM["Dodany"]}" data-error="${idmPhotoModuleLiteralsPM["Wystąpił błąd"]}" data-text="${idmPhotoModuleLiteralsPM["Do koszyka"]}">
|
|
<span>${idmPhotoModuleLiteralsPM["Do koszyka"]}</span>
|
|
</button>
|
|
</form>`;
|
|
}
|
|
|
|
function idmMarkupPricePM({ prodData, addToBasket }) {
|
|
if (!prodData) return "";
|
|
|
|
let priceMarkup;
|
|
if (!addToBasket)
|
|
priceMarkup = `<div class="product_prices"><span class="price --normal --main">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span></div>`;
|
|
else {
|
|
const currentSize = prodData?.sizes?.[0] || prodData;
|
|
|
|
const price =
|
|
currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;
|
|
|
|
const omnibusPrice =
|
|
currentSize?.price?.omnibusPrice?.[app_shop.vars.priceType]?.formatted;
|
|
const isOmnibusHigher =
|
|
currentSize?.price?.omnibusPriceDetails
|
|
?.omnibusPriceIsHigherThanSellingPrice;
|
|
const omnibusPercent =
|
|
currentSize?.price?.omnibusPriceDetails?.youSavePercent;
|
|
|
|
const maxPrice =
|
|
currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;
|
|
const maxPercent = currentSize?.price?.youSavePercent;
|
|
|
|
priceMarkup = `
|
|
<div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${isOmnibusHigher ? `--omnibus-higher` : ""} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
|
|
<span class="price --normal --main">${price}</span>
|
|
${
|
|
omnibusPrice && typeof omnibusPercent === "number"
|
|
? `
|
|
<span class="price --omnibus omnibus_price">
|
|
<span class="omnibus_price__text">${idmPhotoModuleLiteralsPM["Najniższa cena z 30 dni przed obniżką:"]}</span>
|
|
<del class="omnibus_price__value">${omnibusPrice}</del>
|
|
<span class="price_percent">${omnibusPercent}%</span>
|
|
</span>`
|
|
: ``
|
|
}
|
|
${
|
|
maxPrice && typeof maxPercent === "number"
|
|
? `
|
|
<span class="price --max">
|
|
<span class="omnibus_label">${idmPhotoModuleLiteralsPM["Cena regularna:"]}</span>
|
|
<del>${maxPrice}</del>
|
|
<span class="price_percent">${maxPercent}%</span>
|
|
</span>`
|
|
: ``
|
|
}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return priceMarkup;
|
|
}
|
|
|
|
function idmInitEventsPM({ prodEl, addToBasket }) {
|
|
if (!prodEl) return;
|
|
if (addToBasket)
|
|
prodEl
|
|
.querySelector("form.add_to_basket")
|
|
?.addEventListener("submit", idmHandleAddToBasketPM);
|
|
}
|
|
|
|
// POBIERANIE I WSTAWIANIE PRODUKTOW
|
|
async function idmPictureModuleProductsPM(containerEL) {
|
|
const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
|
|
try {
|
|
// TABLICA ID
|
|
const productsId = [];
|
|
allProdEl.forEach((prodEl) => {
|
|
if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
|
|
});
|
|
|
|
const isLabels = containerEL.dataset.labels === "true";
|
|
const isOpinions = containerEL.dataset.opinions === "true";
|
|
const isAddToBasket = containerEL.dataset.addToBasket === "true";
|
|
|
|
// POBIERANIE PRODUKTOW
|
|
const res = await fetch("/graphql/v1/", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
query: `{${productsId.reduce(
|
|
(acc, val, index) =>
|
|
acc +
|
|
`${idmGetSingleProdGraphQLPM({
|
|
prodId: val,
|
|
labels: isLabels,
|
|
opinions: isOpinions,
|
|
addToBasket: isAddToBasket,
|
|
})}`,
|
|
"",
|
|
)}}`,
|
|
}),
|
|
});
|
|
|
|
const data = await res.json();
|
|
const products = Object.values(data?.data)?.map((prod) => prod?.product);
|
|
|
|
// WSTAWIANIE PRODUKTOW
|
|
allProdEl.forEach((prodEl) => {
|
|
const prodData = products.find((p) => p?.id === +prodEl.dataset.id);
|
|
if (!prodData || typeof prodData !== "object")
|
|
return prodEl.closest(".idm_picture__product")?.remove();
|
|
|
|
prodEl.classList.add("--mod-init");
|
|
|
|
// LABELKI
|
|
let labelsHTML = "";
|
|
|
|
if (isLabels) {
|
|
if (prodData.price?.omnibusPrice?.[app_shop.vars.priceType]?.value) {
|
|
if (
|
|
prodData.price?.omnibusPriceDetails
|
|
?.omnibusPriceIsHigherThanSellingPrice
|
|
)
|
|
labelsHTML += `<span class="label --promo --omnibus">${idmPhotoModuleLiteralsPM["promotion"]}</span>`;
|
|
else
|
|
labelsHTML += `<span class="label --bargain --omnibus">${idmPhotoModuleLiteralsPM["Okazja"]}</span>`;
|
|
}
|
|
|
|
prodData.zones?.forEach((zone) => {
|
|
if (zone === "promotion") return "";
|
|
labelsHTML += `<span class="label --${zone}">${idmPhotoModuleLiteralsPM[zone]}</span>`;
|
|
});
|
|
}
|
|
|
|
// OPINIE
|
|
let opinionsHTML = "";
|
|
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>
|
|
</div>
|
|
<span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
|
|
<span class="product_opinions__count">${prodData.opinion.count}</span>
|
|
`;
|
|
}
|
|
prodEl.innerHTML = `
|
|
<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({
|
|
prodEl,
|
|
addToBasket: isAddToBasket,
|
|
});
|
|
});
|
|
} catch (err) {
|
|
allProdEl?.forEach((prodEl) =>
|
|
prodEl.closest(".idm_picture__product")?.remove(),
|
|
);
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
// OTWIERANIE NA MOBILE
|
|
document.body.addEventListener("click", (e) => {
|
|
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
|
|
|
|
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");
|
|
|
|
// 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");
|
|
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");
|
|
},
|
|
});
|
|
});
|