opinie, dodaj do koszyka, labelki
This commit is contained in:
@@ -34,7 +34,7 @@ function idmObserveEachOncePM(elements, callback, options = {}) {
|
||||
{
|
||||
threshold: 0.1,
|
||||
...options,
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
elements.forEach((el) => observer.observe(el));
|
||||
@@ -45,7 +45,7 @@ idmObserveEachOncePM(
|
||||
document.querySelectorAll(".idm_picture__module"),
|
||||
(entry) => {
|
||||
idmPictureModuleProductsPM(entry.target);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// GRAPHQL QUERY
|
||||
@@ -239,7 +239,7 @@ async function idmHandleAddToBasketPM(e) {
|
||||
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");
|
||||
@@ -267,20 +267,10 @@ function idmMarkupAddToBasketPM(prodData) {
|
||||
|
||||
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"]
|
||||
}">
|
||||
<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>`;
|
||||
@@ -291,9 +281,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
|
||||
|
||||
let priceMarkup;
|
||||
if (!addToBasket)
|
||||
priceMarkup = `<div class="product_prices"><span class="price --normal --main">${
|
||||
prodData.price?.price?.[app_shop.vars.priceType]?.formatted
|
||||
}</span></div>`;
|
||||
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;
|
||||
|
||||
@@ -313,9 +301,7 @@ function idmMarkupPricePM({ prodData, addToBasket }) {
|
||||
const maxPercent = currentSize?.price?.youSavePercent;
|
||||
|
||||
priceMarkup = `
|
||||
<div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${
|
||||
isOmnibusHigher ? `--omnibus-higher` : ""
|
||||
} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
|
||||
<div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${isOmnibusHigher ? `--omnibus-higher` : ""} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
|
||||
<span class="price --normal --main">${price}</span>
|
||||
${
|
||||
omnibusPrice && typeof omnibusPercent === "number"
|
||||
@@ -382,7 +368,7 @@ async function idmPictureModuleProductsPM(containerEL) {
|
||||
opinions: isOpinions,
|
||||
addToBasket: isAddToBasket,
|
||||
})}`,
|
||||
""
|
||||
"",
|
||||
)}}`,
|
||||
}),
|
||||
});
|
||||
@@ -423,35 +409,19 @@ async function idmPictureModuleProductsPM(containerEL) {
|
||||
if (isOpinions) {
|
||||
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__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>`
|
||||
: ""
|
||||
}
|
||||
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
|
||||
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
|
||||
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
|
||||
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
|
||||
@@ -464,7 +434,7 @@ async function idmPictureModuleProductsPM(containerEL) {
|
||||
});
|
||||
} catch (err) {
|
||||
allProdEl?.forEach((prodEl) =>
|
||||
prodEl.closest(".idm_picture__product")?.remove()
|
||||
prodEl.closest(".idm_picture__product")?.remove(),
|
||||
);
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
@@ -22,8 +22,3 @@ export const DEFAULT_POINT = {
|
||||
id: 0,
|
||||
direction: Object.keys(DIRECTIONS)[0],
|
||||
}; // Default point structure
|
||||
|
||||
export const URL_RADIO_DATA = [
|
||||
{ value: "single", label: "Jedno Zdjęcie" },
|
||||
{ value: "rwd", label: "Trzy Zdjęcia (RWD)" },
|
||||
];
|
||||
|
||||
@@ -1,40 +1,18 @@
|
||||
import styled from "@emotion/styled";
|
||||
import { Button, Tab, Tabs } from "@mui/material";
|
||||
import { Tab, Tabs } from "@mui/material";
|
||||
import { BREAKPOINTS } from "../../../constants/rwd";
|
||||
import { useSharedState } from "../../../store/useSharedState";
|
||||
import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";
|
||||
|
||||
const StyledPreviewTabsContainer = styled("div")({
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
gap: "0.1rem",
|
||||
// backgroundColor: "#060606",
|
||||
});
|
||||
|
||||
function PreviewRWDTabs() {
|
||||
const currentPreviewMode = useSharedState((state) => state.previewMode);
|
||||
const setPreviewMode = useSharedState((state) => state.setPreviewMode);
|
||||
const setField = useSharedState((state) => state.setField);
|
||||
|
||||
if (currentPreviewMode === "single") return null;
|
||||
|
||||
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
|
||||
value={currentPreviewMode}
|
||||
onChange={(_, newVal) => setPreviewMode(newVal)}
|
||||
onChange={(_, newVal) => setField("previewMode", newVal)}
|
||||
variant="fullWidth"
|
||||
sx={(theme) => ({
|
||||
backgroundColor: theme.palette.background.header,
|
||||
|
||||
@@ -7,10 +7,20 @@ function GeneratePreview({ preview = true }) {
|
||||
const urls = useSharedState((state) => state.urls);
|
||||
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;
|
||||
|
||||
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} />}
|
||||
{<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,9 @@ function GeneratePreviewSinglePoint({
|
||||
const { positions, id } = useSharedState((state) => state.points[index]);
|
||||
const previewMode = useSharedState((state) => state.previewMode);
|
||||
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(
|
||||
(state) => state.setSinglePointPosition,
|
||||
@@ -37,20 +40,45 @@ function GeneratePreviewSinglePoint({
|
||||
};
|
||||
};
|
||||
|
||||
// WARUNKI DLA STYLE/DATA ATRYBUTY
|
||||
const mainContainerStyles = () => {
|
||||
if (preview)
|
||||
return (
|
||||
<div
|
||||
className="idm_picture__product"
|
||||
style={{
|
||||
return {
|
||||
top: `${positions[previewMode].y}%`,
|
||||
left: `${positions[previewMode].x}%`,
|
||||
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
|
||||
className="idm_picture__product_point"
|
||||
aria-describedby={prodBoxUniqueId}
|
||||
aria-label="Product Info"
|
||||
tabIndex={-1}
|
||||
aria-hidden="true"
|
||||
onPointerDown={onPointerDown}
|
||||
>
|
||||
+
|
||||
@@ -59,56 +87,52 @@ function GeneratePreviewSinglePoint({
|
||||
className="product_info"
|
||||
id={prodBoxUniqueId}
|
||||
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="#">
|
||||
{product ? product?.name : `Produkt ${index + 1}`}
|
||||
</a>
|
||||
<span className="product_price">
|
||||
<div class="product_prices">
|
||||
<span class="price --normal --main">
|
||||
{product
|
||||
? product?.price?.price?.gross?.formatted
|
||||
: `Produkt ${index + 1} zł`}
|
||||
: `${index + 1} zł`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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;
|
||||
}, {})
|
||||
}
|
||||
>
|
||||
{addToBasket && (
|
||||
<button
|
||||
className="idm_picture__product_point"
|
||||
aria-describedby={prodBoxUniqueId}
|
||||
tabIndex={-1}
|
||||
aria-hidden="true"
|
||||
class="btn --solid --medium add_to_basket__button"
|
||||
tabindex="0"
|
||||
data-success="Dodany"
|
||||
data-error="Wystąpił błąd"
|
||||
data-text="Do koszyka"
|
||||
>
|
||||
+
|
||||
<span>Do koszyka</span>
|
||||
</button>
|
||||
<div
|
||||
className="product_info"
|
||||
id={prodBoxUniqueId}
|
||||
data-id={id}
|
||||
{...(previewMode === "single"
|
||||
? generatePointDataAttribbutes(previewMode)
|
||||
: {
|
||||
...generatePointDataAttribbutes("mobile"),
|
||||
...generatePointDataAttribbutes("tablet"),
|
||||
...generatePointDataAttribbutes("desktop"),
|
||||
})}
|
||||
></div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
function GenerateStyle() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.idm_picture__module{
|
||||
.idm_picture__module {
|
||||
--photo-prod-box-bg: #fff;
|
||||
--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-left: 2em;
|
||||
@@ -26,32 +27,33 @@ function GenerateStyle() {
|
||||
--photo-prod-point-mobile-left: 0%;
|
||||
|
||||
--photo-box-offset: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module{
|
||||
.idm_picture__module {
|
||||
position: relative;
|
||||
}
|
||||
.idm_picture__product{
|
||||
}
|
||||
.idm_picture__product {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.idm_picture__product:hover, .idm_picture__product.--show{
|
||||
}
|
||||
.idm_picture__product:hover,
|
||||
.idm_picture__product.--show {
|
||||
z-index: 20;
|
||||
}
|
||||
.idm_picture__img{
|
||||
}
|
||||
.idm_picture__img {
|
||||
width: 100%;
|
||||
}
|
||||
.idm_picture__overlay{
|
||||
}
|
||||
.idm_picture__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
/* =========================
|
||||
}
|
||||
/* =========================
|
||||
PRODUCT POINT ( + )
|
||||
========================= */
|
||||
|
||||
.idm_picture__product_point{
|
||||
.idm_picture__product_point {
|
||||
position: relative;
|
||||
width: var(--photo-prod-point-size);
|
||||
height: var(--photo-prod-point-size);
|
||||
@@ -71,10 +73,10 @@ PRODUCT POINT ( + )
|
||||
line-height: 1;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulsating halo */
|
||||
.idm_picture__product_point::before{
|
||||
/* Pulsating halo */
|
||||
.idm_picture__product_point::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -83,38 +85,38 @@ PRODUCT POINT ( + )
|
||||
|
||||
animation: idmPulse 1.5s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: stop pulse on hover */
|
||||
.idm_picture__product:hover .idm_picture__product_point:before{
|
||||
/* Optional: stop pulse on hover */
|
||||
.idm_picture__product:hover .idm_picture__product_point:before {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus accessibility */
|
||||
.idm_picture__product_point:focus-visible{
|
||||
/* Focus accessibility */
|
||||
.idm_picture__product_point:focus-visible {
|
||||
outline: 2px solid #000;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================
|
||||
/* =========================
|
||||
PULSE ANIMATION
|
||||
========================= */
|
||||
@keyframes idmPulse{
|
||||
0%{
|
||||
@keyframes idmPulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
|
||||
}
|
||||
70%{
|
||||
70% {
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100%{
|
||||
100% {
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product_info{
|
||||
.product_info {
|
||||
background: var(--photo-prod-box-bg);
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
@@ -124,76 +126,76 @@ PULSE ANIMATION
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
@media (min-width: 757px){
|
||||
.product_info{
|
||||
}
|
||||
@media (min-width: 757px) {
|
||||
.product_info {
|
||||
padding: 1.5em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 979px){
|
||||
.product_info{
|
||||
}
|
||||
@media (min-width: 979px) {
|
||||
.product_info {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product_info::before{
|
||||
.product_info::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 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;
|
||||
}
|
||||
}
|
||||
|
||||
/*Ulozenie okna produktowego*/
|
||||
.product_info{
|
||||
/*Ulozenie okna produktowego*/
|
||||
.product_info {
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
right: var(--photo-prod-box-dir-l, auto);
|
||||
left: var(--photo-prod-box-dir-r, auto);
|
||||
|
||||
border-radius: var(--photo-prod-box-radius);
|
||||
}
|
||||
.product_info::before{
|
||||
}
|
||||
.product_info::before {
|
||||
top: var(--photo-prod-box-dir-t-before, auto);
|
||||
bottom: var(--photo-prod-box-dir-b-before, auto);
|
||||
right: var(--photo-prod-box-dir-r-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-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-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-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-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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 756px) {
|
||||
@media (max-width: 756px) {
|
||||
.product_info[data-dir-mobile-x="l"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--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"] {
|
||||
--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"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--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"] {
|
||||
--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"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--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"] {
|
||||
--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;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .product_name:hover{
|
||||
color: var(--primary-color, #000)!important;
|
||||
}
|
||||
}
|
||||
.idm_picture__product .product_info .product_name:hover {
|
||||
color: var(--primary-color, #000) !important;
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_prices{
|
||||
.idm_picture__product .product_info .product_prices {
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .price.--main{
|
||||
}
|
||||
.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{
|
||||
@media (min-width: 979px) {
|
||||
:is(
|
||||
.idm_picture__product:hover,
|
||||
.idm_picture__product:has(.idm_picture__product_point:focus-within)
|
||||
)
|
||||
.product_info {
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
@media(max-width: 978px){
|
||||
.idm_picture__product.--show .product_info{
|
||||
}
|
||||
@media (max-width: 978px) {
|
||||
.idm_picture__product.--show .product_info {
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes idmShowUp{
|
||||
from{
|
||||
@keyframes idmShowUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__product{
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-mobile-top);
|
||||
left: var(--photo-prod-point-mobile-left);
|
||||
display: var(--photo-prod-point-mobile-display, block);
|
||||
}
|
||||
@media(min-width: 757px){
|
||||
.idm_picture__product{
|
||||
}
|
||||
@media (min-width: 757px) {
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-tablet-top);
|
||||
left: var(--photo-prod-point-tablet-left);
|
||||
display: var(--photo-prod-point-tablet-display, block);
|
||||
}
|
||||
}
|
||||
@media(min-width: 979px){
|
||||
.idm_picture__product{
|
||||
}
|
||||
@media (min-width: 979px) {
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-desktop-top);
|
||||
left: var(--photo-prod-point-desktop-left);
|
||||
display: var(--photo-prod-point-desktop-display, block);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .label_icons{
|
||||
.idm_picture__module .label_icons {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions{
|
||||
.idm_picture__module .product_opinions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .icon-star:not(.--active)::before{
|
||||
.idm_picture__module .icon-star:not(.--active)::before {
|
||||
content: "\f006";
|
||||
}
|
||||
.idm_picture__module .icon-star.--active{
|
||||
}
|
||||
.idm_picture__module .icon-star.--active {
|
||||
color: var(--opinions-star-active-color, #fac917);
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__score{
|
||||
.idm_picture__module .product_opinions__score {
|
||||
margin-left: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__count::before{
|
||||
.idm_picture__module .product_opinions__count::before {
|
||||
content: "(";
|
||||
}
|
||||
.idm_picture__module .product_opinions__count::after{
|
||||
}
|
||||
.idm_picture__module .product_opinions__count::after {
|
||||
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;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
`}
|
||||
</style>
|
||||
<style>
|
||||
{`
|
||||
|
||||
.idm_picture__product_point{
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 GenericRadioGroup from "./../../ui/GenericRadioGroup";
|
||||
import { Divider } from "@mui/material";
|
||||
import {
|
||||
Alert,
|
||||
Divider,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
Switch,
|
||||
} from "@mui/material";
|
||||
|
||||
function PhotoGenericOptions() {
|
||||
const [urlPoint, setUrlPoint] = useState("single");
|
||||
const setPreviewMode = useSharedState((state) => state.setPreviewMode);
|
||||
const setField = useSharedState((state) => state.setField);
|
||||
const toggleField = useSharedState((state) => state.toggleField);
|
||||
|
||||
const handleUrlRadioChange = (event) => {
|
||||
setUrlPoint(event.target.value);
|
||||
setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
|
||||
const isRWD = useSharedState((state) => state.isRWD);
|
||||
const labels = useSharedState((state) => state.labels);
|
||||
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 (
|
||||
<GenericBox variant="inner" title="Opcje">
|
||||
<GenericRadioGroup
|
||||
// <GenericBox variant="inner" title="Opcje">
|
||||
<FormGroup sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
||||
{/* <GenericRadioGroup
|
||||
radioData={URL_RADIO_DATA}
|
||||
value={urlPoint}
|
||||
value={isRwd}
|
||||
onChange={handleUrlRadioChange}
|
||||
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 />
|
||||
Opinie
|
||||
<Divider />
|
||||
Dodaj do koszyka
|
||||
<Divider />
|
||||
</GenericBox>
|
||||
|
||||
<Divider sx={{ borderColor: "#ccc" }} />
|
||||
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={labels} onChange={() => toggleField("labels")} />
|
||||
}
|
||||
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> */}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ function PhotoUrl() {
|
||||
const setUrl = useSharedState((state) => state.setUrl);
|
||||
|
||||
const photoAlt = useSharedState((state) => state.photoAlt);
|
||||
const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);
|
||||
const setField = useSharedState((state) => state.setField);
|
||||
|
||||
const handleChangeURL = ({ event, type }) => {
|
||||
event.preventDefault();
|
||||
@@ -29,7 +29,7 @@ function PhotoUrl() {
|
||||
<Divider />
|
||||
<InputField
|
||||
name="Alt zdjęcia"
|
||||
onChange={(e) => setPhotoAlt(e.target.value)}
|
||||
onChange={(e) => setField("photoAlt", e.target.value)}
|
||||
value={photoAlt}
|
||||
/>
|
||||
</GenericBox>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
import { DEFAULT_POINT } from "./../constants/photo";
|
||||
|
||||
// export const createBox = () => ({});
|
||||
@@ -7,27 +8,50 @@ const defaultState = {
|
||||
points: [{ ...DEFAULT_POINT }],
|
||||
photoAlt: "Zdjęcie pokazowe",
|
||||
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
|
||||
...defaultState,
|
||||
products: {},
|
||||
|
||||
//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) =>
|
||||
set((state) => ({ urls: { ...state.urls, [type]: url } })),
|
||||
|
||||
setPhotoAlt: (alt) => set({ photoAlt: alt }),
|
||||
setPoints: (points) => set({ points }),
|
||||
setPointsLength: (length) => set({ pointsLength: length }),
|
||||
setPreviewMode: (mode) => set({ previewMode: mode }),
|
||||
/* =========
|
||||
POINTS
|
||||
========= */
|
||||
|
||||
setPoints: (points) => set({ points }),
|
||||
// Update a single point by ID
|
||||
setSinglePoint: (id, newData) =>
|
||||
set((state) => ({
|
||||
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),
|
||||
})),
|
||||
|
||||
clearAll: () => set(() => ({ ...defaultState })),
|
||||
|
||||
/* =========
|
||||
PRODUCTS
|
||||
========= */
|
||||
addProduct: (prod) =>
|
||||
set((state) => ({
|
||||
products: {
|
||||
@@ -70,4 +95,22 @@ export const useSharedState = create((set, get) => ({
|
||||
[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,
|
||||
}),
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user