From fe5f0736f2479d3088b123f732893821f2d80a83 Mon Sep 17 00:00:00 2001 From: Pawel33359 Date: Fri, 23 Jan 2026 13:58:41 +0100 Subject: [PATCH] aktualizacja kodu wtyczki --- IdoSellAddOn/script.js | 259 ++++++-- IdoSellAddOn/style.html | 589 ++++++++++-------- .../htmlBuilder/generated/GenerateStyle.jsx | 98 ++- .../photoModule/PhotoGenericOptions.jsx | 36 ++ src/features/photoModule/PhotoModule.jsx | 3 + src/features/photoModule/PhotoUrl.jsx | 16 - 6 files changed, 679 insertions(+), 322 deletions(-) create mode 100644 src/features/photoModule/PhotoGenericOptions.jsx diff --git a/IdoSellAddOn/script.js b/IdoSellAddOn/script.js index 41d3c8b..9603297 100644 --- a/IdoSellAddOn/script.js +++ b/IdoSellAddOn/script.js @@ -1,10 +1,23 @@ const idmPhotoModuleLiteralsPM = { [`Okazja`]: "Okazja", - [`Promocja`]: "Promocja", [`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 @@ -21,7 +34,7 @@ function idmObserveEachOncePM(elements, callback, options = {}) { { threshold: 0.1, ...options, - }, + } ); elements.forEach((el) => observer.observe(el)); @@ -32,7 +45,7 @@ idmObserveEachOncePM( document.querySelectorAll(".idm_picture__module"), (entry) => { idmPictureModuleProductsPM(entry.target); - }, + } ); // GRAPHQL QUERY @@ -145,17 +158,27 @@ function idmGetSingleProdGraphQLPM({ ${ addToBasket ? ` - sizes{ - id - name - code - amount - availability{ - visible - status - } - ${IDM_PRICE_QUERY(app_shop.vars.priceType)} + unit{ + id + name + singular + plural + fraction + sellBy + precision + unitConvertedFormat + } + sizes{ + id + name + code + amount + availability{ + visible + status } + ${IDM_PRICE_QUERY(app_shop.vars.priceType)} + } ` : "" } @@ -163,11 +186,70 @@ function idmGetSingleProdGraphQLPM({ }`; } -function idmHandleAddToBasketPM(e) { - const formEl = e.target.closest( - `${this.isClosestForm ? "div" : "form"}.add_to_basket`, - ); +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 = `${buttonEl.dataset.success}`; + setTimeout(() => { + buttonEl.innerHTML = `${buttonEl.dataset.text}`; + 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 = `${buttonEl.dataset.error}`; + buttonEl.classList.add("--error"); + setTimeout(() => { + buttonEl.classList.remove("--error"); + buttonEl.innerHTML = `${buttonEl.dataset.text}`; + }, 3000); + } finally { + formEl.classList.remove("--loading"); + } } function idmMarkupAddToBasketPM(prodData) { @@ -185,20 +267,96 @@ function idmMarkupAddToBasketPM(prodData) { return `
- - - -
`; } +function idmMarkupPricePM({ prodData, addToBasket }) { + if (!prodData) return ""; + + let priceMarkup; + if (!addToBasket) + priceMarkup = `
${ + prodData.price?.price?.[app_shop.vars.priceType]?.formatted + }
`; + 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 = ` +
+ ${price} + ${ + omnibusPrice && typeof omnibusPercent === "number" + ? ` + + ${idmPhotoModuleLiteralsPM["Najniższa cena z 30 dni przed obniżką:"]} + ${omnibusPrice} + ${omnibusPercent}% + ` + : `` + } + ${ + maxPrice && typeof maxPercent === "number" + ? ` + + ${idmPhotoModuleLiteralsPM["Cena regularna:"]} + ${maxPrice} + ${maxPercent}% + ` + : `` + } +
+ `; + } + + 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 allProdEl = containerEL.querySelectorAll(".product_info[data-id]"); const productsId = []; allProdEl.forEach((prodEl) => { if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id); @@ -224,18 +382,19 @@ async function idmPictureModuleProductsPM(containerEL) { opinions: isOpinions, addToBasket: isAddToBasket, })}`, - "", + "" )}}`, }), }); const data = await res.json(); - const products = Object.values(data?.data)?.map((prod) => prod.product); + 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) return prodEl.remove(); + 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"); @@ -248,13 +407,14 @@ async function idmPictureModuleProductsPM(containerEL) { prodData.price?.omnibusPriceDetails ?.omnibusPriceIsHigherThanSellingPrice ) - labelsHTML += `${idmPhotoModuleLiteralsPM["Promocja"]}`; + labelsHTML += `${idmPhotoModuleLiteralsPM["promotion"]}`; else labelsHTML += `${idmPhotoModuleLiteralsPM["Okazja"]}`; } prodData.zones?.forEach((zone) => { - labelsHTML += `${zone[0].toUpperCase() + zone.slice(1)}`; + if (zone === "promotion") return ""; + labelsHTML += `${idmPhotoModuleLiteralsPM[zone]}`; }); } @@ -263,28 +423,49 @@ async function idmPictureModuleProductsPM(containerEL) { if (isOpinions) { opinionsHTML = `
- - - - - + + + + +
- ${prodData.opinion.rating} / 5.00 + ${ + prodData.opinion.rating + } / 5.00 ${prodData.opinion.count} `; } - prodEl.innerHTML = ` ${isLabels ? `${labelsHTML}` : ""} - ${isOpinions ? `
${opinionsHTML}
` : ""} + ${ + isOpinions + ? `
${opinionsHTML}
` + : "" + } ${prodData.name} - ${prodData.price?.price?.[app_shop.vars.priceType]?.formatted} + ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })} ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""} `; - }); - containerEL.querySelectorAll(".product_info:not(.--mod-init)"); + idmInitEventsPM({ + prodEl, + addToBasket: isAddToBasket, + }); + }); } catch (err) { + allProdEl?.forEach((prodEl) => + prodEl.closest(".idm_picture__product")?.remove() + ); console.error(err); } } diff --git a/IdoSellAddOn/style.html b/IdoSellAddOn/style.html index 88d1498..a147c3b 100644 --- a/IdoSellAddOn/style.html +++ b/IdoSellAddOn/style.html @@ -1,314 +1,393 @@ diff --git a/src/features/htmlBuilder/generated/GenerateStyle.jsx b/src/features/htmlBuilder/generated/GenerateStyle.jsx index e411d8f..c65b35a 100644 --- a/src/features/htmlBuilder/generated/GenerateStyle.jsx +++ b/src/features/htmlBuilder/generated/GenerateStyle.jsx @@ -18,7 +18,6 @@ function GenerateStyle() { --photo-prod-box-radius-tl: 20px 20px 0px 20px; --photo-prod-box-radius-tr: 20px 20px 20px 0px; - --photo-prod-point-desktop-top: 0%; --photo-prod-point-desktop-left: 0%; --photo-prod-point-tablet-top: 0%; @@ -26,7 +25,6 @@ function GenerateStyle() { --photo-prod-point-mobile-top: 0%; --photo-prod-point-mobile-left: 0%; - --photo-box-offset: 1em; } @@ -37,6 +35,9 @@ function GenerateStyle() { position: absolute; z-index: 10; } +.idm_picture__product:hover, .idm_picture__product.--show{ + z-index: 20; +} .idm_picture__img{ width: 100%; } @@ -115,17 +116,26 @@ PULSE ANIMATION .product_info{ background: var(--photo-prod-box-bg); - /* display: flex; */ flex-direction: column; - padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left); - gap: 0.5em; + padding: 1em; + gap: 1em; display: none; max-width: var(--photo-prod-box-width); position: absolute; width: max-content; - - box-shadow: 0px 0px 10px 1px #000; + box-shadow: 0px 0px 10px 1px #000; } +@media (min-width: 757px){ + .product_info{ + padding: 1.5em; + } +} +@media (min-width: 979px){ + .product_info{ + padding: 2em; + } +} + .product_info::before{ content: ""; position: absolute; @@ -135,6 +145,7 @@ PULSE ANIMATION z-index: -1; } +/*Ulozenie okna produktowego*/ .product_info{ bottom: var(--photo-prod-box-dir-t, auto); top: var(--photo-prod-box-dir-b, auto); @@ -150,7 +161,6 @@ PULSE ANIMATION left: var(--photo-prod-box-dir-l-before, auto); } - .product_info[data-dir-single-x="l"] { --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l-before: 0; @@ -160,6 +170,7 @@ PULSE ANIMATION --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-r-before: 0; } + .product_info[data-dir-single-y="t"] { --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-t-before: 0; @@ -181,6 +192,7 @@ PULSE ANIMATION .product_info[data-dir-single-x="r"][data-dir-single-y="b"] { --photo-prod-box-radius: var(--photo-prod-box-radius-br); } + @media (max-width: 756px) { .product_info[data-dir-mobile-x="l"] { --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); @@ -202,9 +214,18 @@ PULSE ANIMATION --photo-prod-box-dir-b-before: 0; } + .product_info[data-dir-mobile-x="l"][data-dir-mobile-y="t"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-tl); + } + .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="t"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-tr); + } .product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] { --photo-prod-box-radius: var(--photo-prod-box-radius-bl); } + .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-br); + } } @media (min-width: 757px) and (max-width: 978px) { .product_info[data-dir-tablet-x="l"] { @@ -227,6 +248,15 @@ PULSE ANIMATION --photo-prod-box-dir-b-before: 0; } + .product_info[data-dir-tablet-x="l"][data-dir-tablet-y="t"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-tl); + } + .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="t"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-tr); + } + .product_info[data-dir-tablet-x="l"][data-dir-tablet-y="b"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-bl); + } .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] { --photo-prod-box-radius: var(--photo-prod-box-radius-br); } @@ -255,10 +285,17 @@ PULSE ANIMATION .product_info[data-dir-desktop-x="l"][data-dir-desktop-y="t"] { --photo-prod-box-radius: var(--photo-prod-box-radius-tl); } + .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="t"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-tr); + } + .product_info[data-dir-desktop-x="l"][data-dir-desktop-y="b"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-bl); + } + .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] { + --photo-prod-box-radius: var(--photo-prod-box-radius-br); + } } - - .idm_picture__product .product_info .product_name{ font-size: 1.6em; color: var(--photo-prod-box-text); @@ -267,10 +304,13 @@ PULSE ANIMATION color: var(--primary-color, #000)!important; } -.idm_picture__product .product_info .product_price{ +.idm_picture__product .product_info .product_prices{ font-size: 1.6em; color: var(--photo-prod-box-text); } +.idm_picture__product .product_info .price.--main{ + margin-bottom: 0; +} @media(min-width: 979px){ :is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{ @@ -294,7 +334,6 @@ PULSE ANIMATION } } - .idm_picture__product{ top: var(--photo-prod-point-mobile-top); left: var(--photo-prod-point-mobile-left); @@ -315,6 +354,41 @@ PULSE ANIMATION } } +.idm_picture__module .label_icons{ + display: flex; + gap: 0.5em; + position: static; +} + +.idm_picture__module .product_opinions{ + display: flex; +} + +.idm_picture__module .icon-star:not(.--active)::before{ + content: "\f006"; +} +.idm_picture__module .icon-star.--active{ + color: var(--opinions-star-active-color, #fac917); +} + +.idm_picture__module .product_opinions__score{ + margin-left: 1em; + margin-right: 0.5em; +} + +.idm_picture__module .product_opinions__count::before{ + content: "("; +} +.idm_picture__module .product_opinions__count::after{ + content: ")"; +} + +.idm_picture__module :is(.add_to_basket, .add_to_basket__link){ + display: flex; + justify-content: center; + margin-top: 0; +} + .idm_picture__product_point{ cursor: grab; diff --git a/src/features/photoModule/PhotoGenericOptions.jsx b/src/features/photoModule/PhotoGenericOptions.jsx new file mode 100644 index 0000000..1a3c05a --- /dev/null +++ b/src/features/photoModule/PhotoGenericOptions.jsx @@ -0,0 +1,36 @@ +import { useState } from "react"; +import GenericBox from "../../ui/GenericBox"; +import { URL_RADIO_DATA } from "./../../constants/photo"; +import { useSharedState } from "../../store/useSharedState"; +import GenericRadioGroup from "./../../ui/GenericRadioGroup"; +import { Divider } from "@mui/material"; + +function PhotoGenericOptions() { + const [urlPoint, setUrlPoint] = useState("single"); + const setPreviewMode = useSharedState((state) => state.setPreviewMode); + + const handleUrlRadioChange = (event) => { + setUrlPoint(event.target.value); + setPreviewMode(event.target.value === "rwd" ? "desktop" : "single"); + }; + + return ( + + + + Labelki + + Opinie + + Dodaj do koszyka + + + ); +} + +export default PhotoGenericOptions; diff --git a/src/features/photoModule/PhotoModule.jsx b/src/features/photoModule/PhotoModule.jsx index 4bf55af..e3c6b29 100644 --- a/src/features/photoModule/PhotoModule.jsx +++ b/src/features/photoModule/PhotoModule.jsx @@ -5,6 +5,7 @@ import { useSharedState } from "../../store/useSharedState"; import PhotoPoints from "./PhotoPoints"; import PhotoUrl from "./PhotoUrl"; import { DEFAULT_POINT } from "./../../constants/photo"; +import PhotoGenericOptions from "./PhotoGenericOptions"; function PhotoModule() { // zustand state @@ -13,6 +14,8 @@ function PhotoModule() { // 3. Dodawanie/usuwanie punktów return ( + + diff --git a/src/features/photoModule/PhotoUrl.jsx b/src/features/photoModule/PhotoUrl.jsx index 3f2890d..aec4b4d 100644 --- a/src/features/photoModule/PhotoUrl.jsx +++ b/src/features/photoModule/PhotoUrl.jsx @@ -1,16 +1,10 @@ import { Divider } from "@mui/material"; import { useSharedState } from "../../store/useSharedState"; import GenericBox from "../../ui/GenericBox"; -import GenericRadioGroup from "../../ui/GenericRadioGroup"; import InputField from "../../ui/InputField"; -import { URL_RADIO_DATA } from "./../../constants/photo"; -import { useState } from "react"; function PhotoUrl() { const previewMode = useSharedState((state) => state.previewMode); - const setPreviewMode = useSharedState((state) => state.setPreviewMode); - - const [urlPoint, setUrlPoint] = useState("single"); const url = useSharedState((state) => state.urls[previewMode]); const setUrl = useSharedState((state) => state.setUrl); @@ -18,10 +12,6 @@ function PhotoUrl() { const photoAlt = useSharedState((state) => state.photoAlt); const setPhotoAlt = useSharedState((state) => state.setPhotoAlt); - const handleUrlRadioChange = (event) => { - setUrlPoint(event.target.value); - setPreviewMode(event.target.value === "rwd" ? "desktop" : "single"); - }; const handleChangeURL = ({ event, type }) => { event.preventDefault(); setUrl(type, event.target.value); @@ -29,12 +19,6 @@ function PhotoUrl() { return ( -