FrontendAplikacje/PhotoModule
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opinie, dodaj do koszyka, labelki

Browse Source
This commit is contained in:
pawel.gaca
2026-01-27 10:39:21 +01:00
parent fe5f0736f2
commit 09c14785e7
9 changed files with 682 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
IdoSellAddOn/script.js
View File

@@ -34,7 +34,7 @@ function idmObserveEachOncePM(elements, callback, options = {}) {
{ {
threshold: 0.1, threshold: 0.1,
...options, ...options,
} },
); );
elements.forEach((el) => observer.observe(el)); elements.forEach((el) => observer.observe(el));
@@ -45,7 +45,7 @@ idmObserveEachOncePM(
document.querySelectorAll(".idm_picture__module"), document.querySelectorAll(".idm_picture__module"),
(entry) => { (entry) => {
idmPictureModuleProductsPM(entry.target); idmPictureModuleProductsPM(entry.target);
} },
); );
// GRAPHQL QUERY // GRAPHQL QUERY
@@ -239,7 +239,7 @@ async function idmHandleAddToBasketPM(e) {
Alertek.Error( Alertek.Error(
idmPhotoModuleLiteralsPM[ idmPhotoModuleLiteralsPM[
"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ę"
] ],
); );
buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`; buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`;
buttonEl.classList.add("--error"); buttonEl.classList.add("--error");
@@ -267,20 +267,10 @@ function idmMarkupAddToBasketPM(prodData) {
return `<form class="add_to_basket" action="/basketchange.php" type="post"> 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_mode" type="hidden" value="1" name="mode">
<input class="product__add_id" type="hidden" value="${ <input class="product__add_id" type="hidden" value="${prodData.id}" name="mode">
prodData.id <input class="product__add_size" type="hidden" value="${prodData.sizes?.[0]?.id || "uniw"}" name="mode">
}" name="mode"> <input class="product__add_number" type="hidden" value="${prodData.unit?.sellBy || 1}" name="mode">
<input class="product__add_size" type="hidden" value="${ <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"]}">
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> <span>${idmPhotoModuleLiteralsPM["Do koszyka"]}</span>
</button> </button>
</form>`; </form>`;
@@ -291,9 +281,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
let priceMarkup; let priceMarkup;
if (!addToBasket) if (!addToBasket)
priceMarkup = `<div class="product_prices"><span class="price --normal --main">${ priceMarkup = `<div class="product_prices"><span class="price --normal --main">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span></div>`;
prodData.price?.price?.[app_shop.vars.priceType]?.formatted
}</span></div>`;
else { else {
const currentSize = prodData?.sizes?.[0] || prodData; const currentSize = prodData?.sizes?.[0] || prodData;
@@ -313,9 +301,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
const maxPercent = currentSize?.price?.youSavePercent; const maxPercent = currentSize?.price?.youSavePercent;
priceMarkup = ` priceMarkup = `
<div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${ <div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${isOmnibusHigher ? `--omnibus-higher` : ""} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
isOmnibusHigher ? `--omnibus-higher` : ""
} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
<span class="price --normal --main">${price}</span> <span class="price --normal --main">${price}</span>
${ ${
omnibusPrice && typeof omnibusPercent === "number" omnibusPrice && typeof omnibusPercent === "number"
@@ -382,7 +368,7 @@ async function idmPictureModuleProductsPM(containerEL) {
opinions: isOpinions, opinions: isOpinions,
addToBasket: isAddToBasket, addToBasket: isAddToBasket,
})}`, })}`,
"" "",
)}}`, )}}`,
}), }),
}); });
@@ -423,35 +409,19 @@ async function idmPictureModuleProductsPM(containerEL) {
if (isOpinions) { if (isOpinions) {
opinionsHTML = ` opinionsHTML = `
<div class="product_opinions__stars"> <div class="product_opinions__stars">
<i class="icon-star ${ <i class="icon-star ${prodData.opinion?.rating > 0.5 ? "--active" : ""}"></i>
prodData.opinion?.rating > 0.5 ? "--active" : "" <i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
}"></i> <i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${ <i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
prodData.opinion?.rating > 1.5 ? "--active" : "" <i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
}"></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> </div>
<span class="product_opinions__score">${ <span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
prodData.opinion.rating
} / 5.00 </span>
<span class="product_opinions__count">${prodData.opinion.count}</span> <span class="product_opinions__count">${prodData.opinion.count}</span>
`; `;
} }
prodEl.innerHTML = ` prodEl.innerHTML = `
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""} ${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${ ${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
isOpinions
? `<div class="product_opinions">${opinionsHTML}</div>`
: ""
}
<a class="product_name" href="${prodData.link}">${prodData.name}</a> <a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })} ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""} ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
@@ -464,7 +434,7 @@ async function idmPictureModuleProductsPM(containerEL) {
}); });
} catch (err) { } catch (err) {
allProdEl?.forEach((prodEl) => allProdEl?.forEach((prodEl) =>
prodEl.closest(".idm_picture__product")?.remove() prodEl.closest(".idm_picture__product")?.remove(),
); );
console.error(err); console.error(err);
} }

5
src/constants/photo.js
View File

@@ -22,8 +22,3 @@ export const DEFAULT_POINT = {
id: 0, id: 0,
direction: Object.keys(DIRECTIONS)[0], direction: Object.keys(DIRECTIONS)[0],
}; // Default point structure }; // Default point structure
export const URL_RADIO_DATA = [
{ value: "single", label: "Jedno Zdjęcie" },
{ value: "rwd", label: "Trzy Zdjęcia (RWD)" },
];

28
src/features/htmlBuilder/components/PreviewRWDTabs.jsx
View File

@@ -1,40 +1,18 @@
import styled from "@emotion/styled"; import { Tab, Tabs } from "@mui/material";
import { Button, Tab, Tabs } from "@mui/material";
import { BREAKPOINTS } from "../../../constants/rwd"; import { BREAKPOINTS } from "../../../constants/rwd";
import { useSharedState } from "../../../store/useSharedState"; import { useSharedState } from "../../../store/useSharedState";
import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter"; import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";
const StyledPreviewTabsContainer = styled("div")({
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "0.1rem",
// backgroundColor: "#060606",
});
function PreviewRWDTabs() { function PreviewRWDTabs() {
const currentPreviewMode = useSharedState((state) => state.previewMode); const currentPreviewMode = useSharedState((state) => state.previewMode);
const setPreviewMode = useSharedState((state) => state.setPreviewMode); const setField = useSharedState((state) => state.setField);
if (currentPreviewMode === "single") return null; if (currentPreviewMode === "single") return null;
return ( return (
// <StyledPreviewTabsContainer>
// {currentPreviewMode === "single"
// ? null
// : Object.keys(BREAKPOINTS).map((key) => (
// <Button
// key={key}
// variant="contained"
// disabled={currentPreviewMode === key}
// onClick={() => setPreviewMode(key)}
// >
// {capitalizeFirstLetter(key)}
// </Button>
// ))}
// </StyledPreviewTabsContainer>
<Tabs <Tabs
value={currentPreviewMode} value={currentPreviewMode}
onChange={(_, newVal) => setPreviewMode(newVal)} onChange={(_, newVal) => setField("previewMode", newVal)}
variant="fullWidth" variant="fullWidth"
sx={(theme) => ({ sx={(theme) => ({
backgroundColor: theme.palette.background.header, backgroundColor: theme.palette.background.header,

12
src/features/htmlBuilder/generated/GeneratePreview.jsx
View File

@@ -7,10 +7,20 @@ function GeneratePreview({ preview = true }) {
const urls = useSharedState((state) => state.urls); const urls = useSharedState((state) => state.urls);
const uniqueId = Math.ceil(Math.random() * 100000 + 1); const uniqueId = Math.ceil(Math.random() * 100000 + 1);
const labels = useSharedState((state) => state.labels);
const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
if (preview && urls[previewMode] === "") return null; if (preview && urls[previewMode] === "") return null;
return ( return (
<div className="idm_picture__module" id={`idm-picture-module-${uniqueId}`}> <div
className="idm_picture__module"
id={`idm-picture-module-${uniqueId}`}
data-labels={labels && true}
data-opinions={opinions && true}
data-add-to-basket={addToBasket && true}
>
{<GeneratePreviewImage preview={preview} urls={urls} />} {<GeneratePreviewImage preview={preview} urls={urls} />}
{<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />} {<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}
</div> </div>

116
src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx
View File

@@ -12,6 +12,9 @@ function GeneratePreviewSinglePoint({
const { positions, id } = useSharedState((state) => state.points[index]); const { positions, id } = useSharedState((state) => state.points[index]);
const previewMode = useSharedState((state) => state.previewMode); const previewMode = useSharedState((state) => state.previewMode);
const product = useSharedState((state) => state.products[id]); const product = useSharedState((state) => state.products[id]);
const labels = useSharedState((state) => state.labels);
const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
const setSinglePointPosition = useSharedState( const setSinglePointPosition = useSharedState(
(state) => state.setSinglePointPosition, (state) => state.setSinglePointPosition,
@@ -37,20 +40,45 @@ function GeneratePreviewSinglePoint({
}; };
}; };
// WARUNKI DLA STYLE/DATA ATRYBUTY
const mainContainerStyles = () => {
if (preview) if (preview)
return ( return {
<div
className="idm_picture__product"
style={{
top: `${positions[previewMode].y}%`, top: `${positions[previewMode].y}%`,
left: `${positions[previewMode].x}%`, left: `${positions[previewMode].x}%`,
display: positions[previewMode].hide ? "none" : "block", display: positions[previewMode].hide ? "none" : "block",
}} };
>
if (previewMode === "single")
return { top: `${positions.single.y}%`, left: `${positions.single.x}%` };
else
return Object.keys(BREAKPOINTS).reduce((acc, key) => {
acc[`--photo-prod-point-${key}-top`] = `${positions[key].y}%`;
acc[`--photo-prod-point-${key}-left`] = `${positions[key].x}%`;
acc[`--photo-prod-point-${key}-display`] = positions[key].hide
? "none"
: "block";
return acc;
}, {});
};
const productInfoDataAttributes = () => {
if (preview || previewMode === "single")
return generatePointDataAttribbutes(previewMode);
else
return {
...generatePointDataAttribbutes("mobile"),
...generatePointDataAttribbutes("tablet"),
...generatePointDataAttribbutes("desktop"),
};
};
return (
<div className="idm_picture__product" style={mainContainerStyles()}>
<button <button
className="idm_picture__product_point" className="idm_picture__product_point"
aria-describedby={prodBoxUniqueId} aria-describedby={prodBoxUniqueId}
aria-label="Product Info" tabIndex={-1}
aria-hidden="true"
onPointerDown={onPointerDown} onPointerDown={onPointerDown}
> >
+ +
@@ -59,56 +87,52 @@ function GeneratePreviewSinglePoint({
className="product_info" className="product_info"
id={prodBoxUniqueId} id={prodBoxUniqueId}
data-id={id} data-id={id}
{...generatePointDataAttribbutes(previewMode)} {...productInfoDataAttributes()}
> >
{preview && (
<>
{labels && (
<strong class="label_icons">
<span class="label --new">Nowość</span>
</strong>
)}
{opinions && (
<div class="product_opinions">
<div class="product_opinions__stars">
<i class="icon-star">*</i>
<i class="icon-star">*</i>
<i class="icon-star">*</i>
<i class="icon-star">*</i>
<i class="icon-star">*</i>
</div>
<span class="product_opinions__score">0 / 5.00 </span>
<span class="product_opinions__count">0</span>
</div>
)}
<a className="product_name" href="#"> <a className="product_name" href="#">
{product ? product?.name : `Produkt ${index + 1}`} {product ? product?.name : `Produkt ${index + 1}`}
</a> </a>
<span className="product_price"> <div class="product_prices">
<span class="price --normal --main">
{product {product
? product?.price?.price?.gross?.formatted ? product?.price?.price?.gross?.formatted
: `Produkt ${index + 1} zł`} : `${index + 1} zł`}
</span> </span>
</div> </div>
</div> {addToBasket && (
);
return (
<div
className="idm_picture__product"
style={
previewMode === "single"
? { top: `${positions.single.y}%`, left: `${positions.single.x}%` }
: Object.keys(BREAKPOINTS).reduce((acc, key) => {
acc[`--photo-prod-point-${key}-top`] = `${positions[key].y}%`;
acc[`--photo-prod-point-${key}-left`] = `${positions[key].x}%`;
acc[`--photo-prod-point-${key}-display`] = positions[key].hide
? "none"
: "block";
return acc;
}, {})
}
>
<button <button
className="idm_picture__product_point" class="btn --solid --medium add_to_basket__button"
aria-describedby={prodBoxUniqueId} tabindex="0"
tabIndex={-1} data-success="Dodany"
aria-hidden="true" data-error="Wystąpił błąd"
data-text="Do koszyka"
> >
+ <span>Do koszyka</span>
</button> </button>
<div )}
className="product_info" </>
id={prodBoxUniqueId} )}
data-id={id} </div>
{...(previewMode === "single"
? generatePointDataAttribbutes(previewMode)
: {
...generatePointDataAttribbutes("mobile"),
...generatePointDataAttribbutes("tablet"),
...generatePointDataAttribbutes("desktop"),
})}
></div>
</div> </div>
); );
} }

282
src/features/htmlBuilder/generated/GenerateStyle.jsx
View File

@@ -1,11 +1,12 @@
function GenerateStyle() { function GenerateStyle() {
return ( return (
<>
<style> <style>
{` {`
.idm_picture__module{ .idm_picture__module {
--photo-prod-box-bg: #fff; --photo-prod-box-bg: #fff;
--photo-prod-box-text: #111; --photo-prod-box-text: #111;
--photo-prod-point-shadow: rgba(255,255,255,.5); --photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
--photo-prod-box-pad-top: 1em; --photo-prod-box-pad-top: 1em;
--photo-prod-box-pad-left: 2em; --photo-prod-box-pad-left: 2em;
@@ -26,32 +27,33 @@ function GenerateStyle() {
--photo-prod-point-mobile-left: 0%; --photo-prod-point-mobile-left: 0%;
--photo-box-offset: 1em; --photo-box-offset: 1em;
} }
.idm_picture__module{ .idm_picture__module {
position: relative; position: relative;
} }
.idm_picture__product{ .idm_picture__product {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
} }
.idm_picture__product:hover, .idm_picture__product.--show{ .idm_picture__product:hover,
.idm_picture__product.--show {
z-index: 20; z-index: 20;
} }
.idm_picture__img{ .idm_picture__img {
width: 100%; width: 100%;
} }
.idm_picture__overlay{ .idm_picture__overlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
} }
/* ========================= /* =========================
PRODUCT POINT ( + ) PRODUCT POINT ( + )
========================= */ ========================= */
.idm_picture__product_point{ .idm_picture__product_point {
position: relative; position: relative;
width: var(--photo-prod-point-size); width: var(--photo-prod-point-size);
height: var(--photo-prod-point-size); height: var(--photo-prod-point-size);
@@ -71,10 +73,10 @@ PRODUCT POINT ( + )
line-height: 1; line-height: 1;
z-index: 1; z-index: 1;
} }
/* Pulsating halo */ /* Pulsating halo */
.idm_picture__product_point::before{ .idm_picture__product_point::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -83,38 +85,38 @@ PRODUCT POINT ( + )
animation: idmPulse 1.5s ease-in-out infinite; animation: idmPulse 1.5s ease-in-out infinite;
z-index: -1; z-index: -1;
} }
/* Optional: stop pulse on hover */ /* Optional: stop pulse on hover */
.idm_picture__product:hover .idm_picture__product_point:before{ .idm_picture__product:hover .idm_picture__product_point:before {
animation-play-state: paused; animation-play-state: paused;
} }
/* Focus accessibility */ /* Focus accessibility */
.idm_picture__product_point:focus-visible{ .idm_picture__product_point:focus-visible {
outline: 2px solid #000; outline: 2px solid #000;
outline-offset: 4px; outline-offset: 4px;
} }
/* ========================= /* =========================
PULSE ANIMATION PULSE ANIMATION
========================= */ ========================= */
@keyframes idmPulse{ @keyframes idmPulse {
0%{ 0% {
opacity: 1; opacity: 1;
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow); box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
} }
70%{ 70% {
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow); box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0.8; opacity: 0.8;
} }
100%{ 100% {
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow); box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0; opacity: 0;
} }
} }
.product_info{ .product_info {
background: var(--photo-prod-box-bg); background: var(--photo-prod-box-bg);
flex-direction: column; flex-direction: column;
padding: 1em; padding: 1em;
@@ -124,76 +126,76 @@ PULSE ANIMATION
position: absolute; position: absolute;
width: max-content; width: max-content;
box-shadow: 0px 0px 10px 1px #000; box-shadow: 0px 0px 10px 1px #000;
} }
@media (min-width: 757px){ @media (min-width: 757px) {
.product_info{ .product_info {
padding: 1.5em; padding: 1.5em;
} }
} }
@media (min-width: 979px){ @media (min-width: 979px) {
.product_info{ .product_info {
padding: 2em; padding: 2em;
} }
} }
.product_info::before{ .product_info::before {
content: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
z-index: -1; z-index: -1;
} }
/*Ulozenie okna produktowego*/ /*Ulozenie okna produktowego*/
.product_info{ .product_info {
bottom: var(--photo-prod-box-dir-t, auto); bottom: var(--photo-prod-box-dir-t, auto);
top: var(--photo-prod-box-dir-b, auto); top: var(--photo-prod-box-dir-b, auto);
right: var(--photo-prod-box-dir-l, auto); right: var(--photo-prod-box-dir-l, auto);
left: var(--photo-prod-box-dir-r, auto); left: var(--photo-prod-box-dir-r, auto);
border-radius: var(--photo-prod-box-radius); border-radius: var(--photo-prod-box-radius);
} }
.product_info::before{ .product_info::before {
top: var(--photo-prod-box-dir-t-before, auto); top: var(--photo-prod-box-dir-t-before, auto);
bottom: var(--photo-prod-box-dir-b-before, auto); bottom: var(--photo-prod-box-dir-b-before, auto);
right: var(--photo-prod-box-dir-r-before, auto); right: var(--photo-prod-box-dir-r-before, auto);
left: var(--photo-prod-box-dir-l-before, auto); left: var(--photo-prod-box-dir-l-before, auto);
} }
.product_info[data-dir-single-x="l"] { .product_info[data-dir-single-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
} }
.product_info[data-dir-single-x="r"] { .product_info[data-dir-single-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0; --photo-prod-box-dir-r-before: 0;
} }
.product_info[data-dir-single-y="t"] { .product_info[data-dir-single-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0; --photo-prod-box-dir-t-before: 0;
} }
.product_info[data-dir-single-y="b"] { .product_info[data-dir-single-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0; --photo-prod-box-dir-b-before: 0;
} }
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] { .product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl); --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
} }
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] { .product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tr); --photo-prod-box-radius: var(--photo-prod-box-radius-tr);
} }
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] { .product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl); --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
} }
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] { .product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
@media (max-width: 756px) { @media (max-width: 756px) {
.product_info[data-dir-mobile-x="l"] { .product_info[data-dir-mobile-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -226,8 +228,8 @@ PULSE ANIMATION
.product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] { .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
@media (min-width: 757px) and (max-width: 978px) { @media (min-width: 757px) and (max-width: 978px) {
.product_info[data-dir-tablet-x="l"] { .product_info[data-dir-tablet-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -260,8 +262,8 @@ PULSE ANIMATION
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] { .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
@media (min-width: 979px) { @media (min-width: 979px) {
.product_info[data-dir-desktop-x="l"] { .product_info[data-dir-desktop-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -294,107 +296,165 @@ PULSE ANIMATION
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] { .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
.idm_picture__product .product_info .product_name{ .idm_picture__product .product_info .product_name {
font-size: 1.6em; font-size: 1.6em;
color: var(--photo-prod-box-text); color: var(--photo-prod-box-text);
} }
.idm_picture__product .product_info .product_name:hover{ .idm_picture__product .product_info .product_name:hover {
color: var(--primary-color, #000)!important; color: var(--primary-color, #000) !important;
} }
.idm_picture__product .product_info .product_prices{ .idm_picture__product .product_info .product_prices {
font-size: 1.6em; font-size: 1.6em;
color: var(--photo-prod-box-text); color: var(--photo-prod-box-text);
} }
.idm_picture__product .product_info .price.--main{ .idm_picture__product .product_info .price.--main {
margin-bottom: 0; margin-bottom: 0;
} }
@media(min-width: 979px){ @media (min-width: 979px) {
:is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{ :is(
.idm_picture__product:hover,
.idm_picture__product:has(.idm_picture__product_point:focus-within)
)
.product_info {
display: flex; display: flex;
animation: idmShowUp 0.3s ease-in-out; animation: idmShowUp 0.3s ease-in-out;
} }
} }
@media(max-width: 978px){ @media (max-width: 978px) {
.idm_picture__product.--show .product_info{ .idm_picture__product.--show .product_info {
display: flex; display: flex;
animation: idmShowUp 0.3s ease-in-out; animation: idmShowUp 0.3s ease-in-out;
} }
} }
@keyframes idmShowUp{ @keyframes idmShowUp {
from{ from {
opacity: 0; opacity: 0;
} }
to{ to {
opacity: 1; opacity: 1;
} }
} }
.idm_picture__product{ .idm_picture__product {
top: var(--photo-prod-point-mobile-top); top: var(--photo-prod-point-mobile-top);
left: var(--photo-prod-point-mobile-left); left: var(--photo-prod-point-mobile-left);
display: var(--photo-prod-point-mobile-display, block); display: var(--photo-prod-point-mobile-display, block);
} }
@media(min-width: 757px){ @media (min-width: 757px) {
.idm_picture__product{ .idm_picture__product {
top: var(--photo-prod-point-tablet-top); top: var(--photo-prod-point-tablet-top);
left: var(--photo-prod-point-tablet-left); left: var(--photo-prod-point-tablet-left);
display: var(--photo-prod-point-tablet-display, block); display: var(--photo-prod-point-tablet-display, block);
} }
} }
@media(min-width: 979px){ @media (min-width: 979px) {
.idm_picture__product{ .idm_picture__product {
top: var(--photo-prod-point-desktop-top); top: var(--photo-prod-point-desktop-top);
left: var(--photo-prod-point-desktop-left); left: var(--photo-prod-point-desktop-left);
display: var(--photo-prod-point-desktop-display, block); display: var(--photo-prod-point-desktop-display, block);
} }
} }
.idm_picture__module .label_icons{ .idm_picture__module .label_icons {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
position: static; position: static;
} }
.idm_picture__module .product_opinions{ .idm_picture__module .product_opinions {
display: flex; display: flex;
} }
.idm_picture__module .icon-star:not(.--active)::before{ .idm_picture__module .icon-star:not(.--active)::before {
content: "\f006"; content: "\f006";
} }
.idm_picture__module .icon-star.--active{ .idm_picture__module .icon-star.--active {
color: var(--opinions-star-active-color, #fac917); color: var(--opinions-star-active-color, #fac917);
} }
.idm_picture__module .product_opinions__score{ .idm_picture__module .product_opinions__score {
margin-left: 1em; margin-left: 1em;
margin-right: 0.5em; margin-right: 0.5em;
} }
.idm_picture__module .product_opinions__count::before{ .idm_picture__module .product_opinions__count::before {
content: "("; content: "(";
} }
.idm_picture__module .product_opinions__count::after{ .idm_picture__module .product_opinions__count::after {
content: ")"; content: ")";
} }
.idm_picture__module :is(.add_to_basket, .add_to_basket__link){ .idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 0; margin-top: 0;
} }
`}
</style>
<style>
{`
.idm_picture__product_point{ .idm_picture__product_point{
cursor: grab; cursor: grab;
} }
.idm_picture__product .product_info .product_prices{
font-size: 1.6em;
color: #000;
}
.label_icons > *{
font-size: 1em;
color: #fff;
background: #0090f6;
font-weight: 600;
padding: 4px 6px;
border-radius: 5px;
}
[class^="icon-"], [class*=" icon-"]{
font-family: FontAwesome;
}
.icon-star:before {
content: "\f005" / "";
}
.product_opinions{
font-size: 1.4em;
}
.btn{
background: none;
padding: 0;
border: 1px solid transparent;
display: inline-block;
text-decoration: none;
color: #E11D48;
width: 100%;
text-align: center;
cursor: pointer;
font-size: 1.2em;
padding: 0.9em 1em;
font-weight: normal;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
border-radius: 5px;
}
.btn.--solid {
background: #E11D48;
border: 1px solid #E11D48;
color: #fff;
}
.btn.--medium {
font-size: 1.4em;
padding: 1.25em 1.4em;
}
`} `}
</style> </style>
</>
); );
} }

91
src/features/photoModule/PhotoGenericOptions.jsx
View File

@@ -1,35 +1,84 @@
import { useState } from "react";
import GenericBox from "../../ui/GenericBox";
import { URL_RADIO_DATA } from "./../../constants/photo";
import { useSharedState } from "../../store/useSharedState"; import { useSharedState } from "../../store/useSharedState";
import GenericRadioGroup from "./../../ui/GenericRadioGroup"; import {
import { Divider } from "@mui/material"; Alert,
Divider,
FormControlLabel,
FormGroup,
Switch,
} from "@mui/material";
function PhotoGenericOptions() { function PhotoGenericOptions() {
const [urlPoint, setUrlPoint] = useState("single"); const setField = useSharedState((state) => state.setField);
const setPreviewMode = useSharedState((state) => state.setPreviewMode); const toggleField = useSharedState((state) => state.toggleField);
const handleUrlRadioChange = (event) => { const isRWD = useSharedState((state) => state.isRWD);
setUrlPoint(event.target.value); const labels = useSharedState((state) => state.labels);
setPreviewMode(event.target.value === "rwd" ? "desktop" : "single"); const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
const handleUrlRadioChange = (e) => {
toggleField("isRWD");
setField("previewMode", e.target.checked ? "desktop" : "single");
}; };
return ( return (
<GenericBox variant="inner" title="Opcje"> // <GenericBox variant="inner" title="Opcje">
<GenericRadioGroup <FormGroup sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
{/* <GenericRadioGroup
radioData={URL_RADIO_DATA} radioData={URL_RADIO_DATA}
value={urlPoint} value={isRwd}
onChange={handleUrlRadioChange} onChange={handleUrlRadioChange}
direction="row" direction="row"
/> */}
<FormControlLabel
control={<Switch checked={isRWD} onChange={handleUrlRadioChange} />}
label="Czy wyświetlać inne zdjęcia dla innych szerokości ekranu (RWD)"
/> />
<Divider />
Labelki <Divider sx={{ borderColor: "#ccc" }} />
<Divider />
Opinie <FormControlLabel
<Divider /> control={
Dodaj do koszyka <Switch checked={labels} onChange={() => toggleField("labels")} />
<Divider /> }
</GenericBox> label="Czy wyświetlać labele produktu (np Nowość, Promocja itp)"
/>
<Divider sx={{ borderColor: "#ccc" }} />
<FormControlLabel
control={
<Switch checked={opinions} onChange={() => toggleField("opinions")} />
}
label="Czy wyświetlać dane o opinii o produkcie"
/>
<Divider sx={{ borderColor: "#ccc" }} />
<FormControlLabel
control={
<Switch
checked={addToBasket}
onChange={() => toggleField("addToBasket")}
/>
}
label="Czy wyświetlać przycisk dodania do koszyka na produkcie"
/>
<Divider sx={{ borderColor: "#ccc" }} />
<Alert severity="warning">
Uwaga!
<br />
Wygląd boxa produktowego na podglądzie może się różnić od tego
wrzuconego na sklep. Aplikacja nie pobiera czcionek ani kolorów ze
sklepu!
<br />
Podgląd wyświetla tylko jeden testowy label i nie wyświetla danych
omnibusa.
</Alert>
</FormGroup>
// {/* </GenericBox> */}
); );
} }

4
src/features/photoModule/PhotoUrl.jsx
View File

@@ -10,7 +10,7 @@ function PhotoUrl() {
const setUrl = useSharedState((state) => state.setUrl); const setUrl = useSharedState((state) => state.setUrl);
const photoAlt = useSharedState((state) => state.photoAlt); const photoAlt = useSharedState((state) => state.photoAlt);
const setPhotoAlt = useSharedState((state) => state.setPhotoAlt); const setField = useSharedState((state) => state.setField);
const handleChangeURL = ({ event, type }) => { const handleChangeURL = ({ event, type }) => {
event.preventDefault(); event.preventDefault();
@@ -29,7 +29,7 @@ function PhotoUrl() {
<Divider /> <Divider />
<InputField <InputField
name="Alt zdjęcia" name="Alt zdjęcia"
onChange={(e) => setPhotoAlt(e.target.value)} onChange={(e) => setField("photoAlt", e.target.value)}
value={photoAlt} value={photoAlt}
/> />
</GenericBox> </GenericBox>

63
src/store/useSharedState.js
View File

@@ -1,4 +1,5 @@
import { create } from "zustand"; import { create } from "zustand";
import { persist } from "zustand/middleware";
import { DEFAULT_POINT } from "./../constants/photo"; import { DEFAULT_POINT } from "./../constants/photo";
// export const createBox = () => ({}); // export const createBox = () => ({});
@@ -7,27 +8,50 @@ const defaultState = {
points: [{ ...DEFAULT_POINT }], points: [{ ...DEFAULT_POINT }],
photoAlt: "Zdjęcie pokazowe", photoAlt: "Zdjęcie pokazowe",
previewMode: "single", // desktop, tablet, mobile previewMode: "single", // desktop, tablet, mobile
isRWD: false,
labels: false,
opinions: false,
addToBasket: false,
}; };
export const useSharedState = create((set, get) => ({ export const useSharedState = create(
persist(
(set, get) => ({
//DATA //DATA
...defaultState, ...defaultState,
products: {}, products: {},
//SETTERS/UPDATERS //SETTERS/UPDATERS
setField: (key, value) =>
set(() => ({
[key]: value,
})),
toggleField: (key) =>
set((state) => ({
[key]: !state[key],
})),
// setPhotoAlt: (alt) => set({ photoAlt: alt }),
// setPreviewMode: (mode) => set({ previewMode: mode }),
/* =========
URLS
========= */
setUrl: (type, url) => setUrl: (type, url) =>
set((state) => ({ urls: { ...state.urls, [type]: url } })), set((state) => ({ urls: { ...state.urls, [type]: url } })),
setPhotoAlt: (alt) => set({ photoAlt: alt }), /* =========
setPoints: (points) => set({ points }), POINTS
setPointsLength: (length) => set({ pointsLength: length }), ========= */
setPreviewMode: (mode) => set({ previewMode: mode }),
setPoints: (points) => set({ points }),
// Update a single point by ID // Update a single point by ID
setSinglePoint: (id, newData) => setSinglePoint: (id, newData) =>
set((state) => ({ set((state) => ({
points: state.points.map((p, index) => points: state.points.map((p, index) =>
index === id ? { ...p, ...newData } : p index === id ? { ...p, ...newData } : p,
), ),
})), })),
@@ -45,7 +69,7 @@ export const useSharedState = create((set, get) => ({
}, },
}, },
} }
: p : p,
), ),
})), })),
@@ -61,8 +85,9 @@ export const useSharedState = create((set, get) => ({
points: state.points.filter((p, index) => index !== id), points: state.points.filter((p, index) => index !== id),
})), })),
clearAll: () => set(() => ({ ...defaultState })), /* =========
PRODUCTS
========= */
addProduct: (prod) => addProduct: (prod) =>
set((state) => ({ set((state) => ({
products: { products: {
@@ -70,4 +95,22 @@ export const useSharedState = create((set, get) => ({
[prod.id]: prod, [prod.id]: prod,
}, },
})), })),
}));
/* =========
RESET
========= */
clearAll: () => set(() => ({ ...defaultState })),
}),
{
name: "photo-generic-options",
partialize: (state) => ({
labels: state.labels,
opinions: state.opinions,
addToBasket: state.addToBasket,
previewMode: state.previewMode,
isRWD: state.isRWD,
}),
},
),
);