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 (
-