aktualizacja kodu wtyczki
This commit is contained in:
Pawel33359
@@ -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,6 +158,16 @@ function idmGetSingleProdGraphQLPM({
|
||||
${
|
||||
addToBasket
|
||||
? `
|
||||
unit{
|
||||
id
|
||||
name
|
||||
singular
|
||||
plural
|
||||
fraction
|
||||
sellBy
|
||||
precision
|
||||
unitConvertedFormat
|
||||
}
|
||||
sizes{
|
||||
id
|
||||
name
|
||||
@@ -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 = `<span>${buttonEl.dataset.success}</span>`;
|
||||
setTimeout(() => {
|
||||
buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
|
||||
buttonEl.classList.remove("--success");
|
||||
}, 3000);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
Alertek.Error(
|
||||
idmPhotoModuleLiteralsPM[
|
||||
"Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę"
|
||||
]
|
||||
);
|
||||
buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`;
|
||||
buttonEl.classList.add("--error");
|
||||
setTimeout(() => {
|
||||
buttonEl.classList.remove("--error");
|
||||
buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
|
||||
}, 3000);
|
||||
} finally {
|
||||
formEl.classList.remove("--loading");
|
||||
}
|
||||
}
|
||||
|
||||
function idmMarkupAddToBasketPM(prodData) {
|
||||
@@ -185,20 +267,96 @@ 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="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>`;
|
||||
}
|
||||
|
||||
function idmMarkupPricePM({ prodData, addToBasket }) {
|
||||
if (!prodData) return "";
|
||||
|
||||
let priceMarkup;
|
||||
if (!addToBasket)
|
||||
priceMarkup = `<div class="product_prices"><span class="price --normal --main">${
|
||||
prodData.price?.price?.[app_shop.vars.priceType]?.formatted
|
||||
}</span></div>`;
|
||||
else {
|
||||
const currentSize = prodData?.sizes?.[0] || prodData;
|
||||
|
||||
const price =
|
||||
currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;
|
||||
|
||||
const omnibusPrice =
|
||||
currentSize?.price?.omnibusPrice?.[app_shop.vars.priceType]?.formatted;
|
||||
const isOmnibusHigher =
|
||||
currentSize?.price?.omnibusPriceDetails
|
||||
?.omnibusPriceIsHigherThanSellingPrice;
|
||||
const omnibusPercent =
|
||||
currentSize?.price?.omnibusPriceDetails?.youSavePercent;
|
||||
|
||||
const maxPrice =
|
||||
currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;
|
||||
const maxPercent = currentSize?.price?.youSavePercent;
|
||||
|
||||
priceMarkup = `
|
||||
<div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${
|
||||
isOmnibusHigher ? `--omnibus-higher` : ""
|
||||
} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
|
||||
<span class="price --normal --main">${price}</span>
|
||||
${
|
||||
omnibusPrice && typeof omnibusPercent === "number"
|
||||
? `
|
||||
<span class="price --omnibus omnibus_price">
|
||||
<span class="omnibus_price__text">${idmPhotoModuleLiteralsPM["Najniższa cena z 30 dni przed obniżką:"]}</span>
|
||||
<del class="omnibus_price__value">${omnibusPrice}</del>
|
||||
<span class="price_percent">${omnibusPercent}%</span>
|
||||
</span>`
|
||||
: ``
|
||||
}
|
||||
${
|
||||
maxPrice && typeof maxPercent === "number"
|
||||
? `
|
||||
<span class="price --max">
|
||||
<span class="omnibus_label">${idmPhotoModuleLiteralsPM["Cena regularna:"]}</span>
|
||||
<del>${maxPrice}</del>
|
||||
<span class="price_percent">${maxPercent}%</span>
|
||||
</span>`
|
||||
: ``
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return priceMarkup;
|
||||
}
|
||||
|
||||
function idmInitEventsPM({ prodEl, addToBasket }) {
|
||||
if (!prodEl) return;
|
||||
if (addToBasket)
|
||||
prodEl
|
||||
.querySelector("form.add_to_basket")
|
||||
?.addEventListener("submit", idmHandleAddToBasketPM);
|
||||
}
|
||||
|
||||
// POBIERANIE I WSTAWIANIE PRODUKTOW
|
||||
async function idmPictureModuleProductsPM(containerEL) {
|
||||
const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
|
||||
try {
|
||||
// TABLICA ID
|
||||
const 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 += `<span class="label --promo --omnibus">${idmPhotoModuleLiteralsPM["Promocja"]}</span>`;
|
||||
labelsHTML += `<span class="label --promo --omnibus">${idmPhotoModuleLiteralsPM["promotion"]}</span>`;
|
||||
else
|
||||
labelsHTML += `<span class="label --bargain --omnibus">${idmPhotoModuleLiteralsPM["Okazja"]}</span>`;
|
||||
}
|
||||
|
||||
prodData.zones?.forEach((zone) => {
|
||||
labelsHTML += `<span class="label --${zone}">${zone[0].toUpperCase() + zone.slice(1)}</span>`;
|
||||
if (zone === "promotion") return "";
|
||||
labelsHTML += `<span class="label --${zone}">${idmPhotoModuleLiteralsPM[zone]}</span>`;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -263,28 +423,49 @@ 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>
|
||||
<span class="product_price">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span>
|
||||
${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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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: 1rem;
|
||||
--photo-prod-box-pad-left: 2rem;
|
||||
@@ -15,7 +15,6 @@
|
||||
--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%;
|
||||
@@ -23,31 +22,34 @@
|
||||
--photo-prod-point-mobile-top: 0%;
|
||||
--photo-prod-point-mobile-left: 0%;
|
||||
|
||||
|
||||
--photo-box-offset: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module{
|
||||
.idm_picture__module {
|
||||
position: relative;
|
||||
}
|
||||
.idm_picture__product{
|
||||
}
|
||||
.idm_picture__product {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.idm_picture__img{
|
||||
}
|
||||
.idm_picture__product:hover,
|
||||
.idm_picture__product.--show {
|
||||
z-index: 20;
|
||||
}
|
||||
.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);
|
||||
@@ -67,10 +69,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;
|
||||
@@ -79,106 +81,117 @@ 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);
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
display: none;
|
||||
max-width: var(--photo-prod-box-width);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
.product_info::before{
|
||||
}
|
||||
@media (min-width: 757px) {
|
||||
.product_info {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 979px) {
|
||||
.product_info {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -199,11 +212,20 @@ 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);
|
||||
}
|
||||
}
|
||||
@media (min-width: 757px) and (max-width: 978px) {
|
||||
.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"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-l-before: 0;
|
||||
@@ -224,11 +246,20 @@ 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);
|
||||
}
|
||||
}
|
||||
@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;
|
||||
@@ -252,63 +283,111 @@ 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{
|
||||
.idm_picture__product .product_info .product_name {
|
||||
font-size: 1.6rem;
|
||||
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_price{
|
||||
.idm_picture__product .product_info .product_prices {
|
||||
font-size: 1.6rem;
|
||||
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{
|
||||
@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 {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
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: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@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;
|
||||
|
||||
36
src/features/photoModule/PhotoGenericOptions.jsx
Normal file
36
src/features/photoModule/PhotoGenericOptions.jsx
Normal file
@@ -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 (
|
||||
<GenericBox variant="inner" title="Opcje">
|
||||
<GenericRadioGroup
|
||||
radioData={URL_RADIO_DATA}
|
||||
value={urlPoint}
|
||||
onChange={handleUrlRadioChange}
|
||||
direction="row"
|
||||
/>
|
||||
<Divider />
|
||||
Labelki
|
||||
<Divider />
|
||||
Opinie
|
||||
<Divider />
|
||||
Dodaj do koszyka
|
||||
<Divider />
|
||||
</GenericBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default PhotoGenericOptions;
|
||||
@@ -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 (
|
||||
<GenericBox variant="outer" title="Zdjęcie z punktami" canCollapse={true}>
|
||||
<PhotoGenericOptions />
|
||||
<Divider />
|
||||
<PhotoUrl />
|
||||
<Divider />
|
||||
<PhotoPoints />
|
||||
|
||||
@@ -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 (
|
||||
<GenericBox variant="inner" title="Zdjęcie">
|
||||
<GenericRadioGroup
|
||||
radioData={URL_RADIO_DATA}
|
||||
value={urlPoint}
|
||||
onChange={handleUrlRadioChange}
|
||||
direction="row"
|
||||
/>
|
||||
<InputField
|
||||
name={`URL zdjęcia ${
|
||||
previewMode === "single" ? "" : `na ${previewMode}`
|
||||
|
||||
Reference in New Issue
Block a user