aktualizacja kodu wtyczki

IdoSellAddOn/script.js

@@ -1,10 +1,23 @@
 const idmPhotoModuleLiteralsPM = {
   [`Okazja`]: "Okazja",
-  [`Promocja`]: "Promocja",
   [`Zobacz produkt`]: "Zobacz produkt",
   [`Dodany`]: "Dodany",
   [`Wystąpił błąd`]: "Wystąpił błąd",
   [`Do koszyka`]: "Do koszyka",
+  [`Najniższa cena z 30 dni przed obniżką:`]:
+    "Najniższa cena z 30 dni przed obniżką:",
+  [`Cena regularna:`]: "Cena regularna:",
+  [`Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę`]:
+    "Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę",
+
+  // mapowanie labelow
+  ["new"]: "Nowość",
+  ["bestseller"]: "Bestseller",
+  ["promotion"]: "Promocja",
+  ["discount"]: "Przecena",
+  ["distinguished"]: "Produkt Wyróżniony",
+  ["special"]: "Produkt Specjalny",
+  ["subscription"]: "Subskrypcja",
 };
 
 // LAZY LOAD
@@ -21,7 +34,7 @@ function idmObserveEachOncePM(elements, callback, options = {}) {
     {
       threshold: 0.1,
       ...options,
-    },
+    }
   );
 
   elements.forEach((el) => observer.observe(el));
@@ -32,7 +45,7 @@ idmObserveEachOncePM(
   document.querySelectorAll(".idm_picture__module"),
   (entry) => {
     idmPictureModuleProductsPM(entry.target);
-  },
+  }
 );
 
 // GRAPHQL QUERY
@@ -145,17 +158,27 @@ function idmGetSingleProdGraphQLPM({
             ${
               addToBasket
                 ? `
-                sizes{
+              unit{
-                  id
+                id
-                  name
+                name
-                  code
+                singular
-                  amount
+                plural
-                  availability{
+                fraction
-                    visible
+                sellBy
-                    status
+                precision
-                  }
+                unitConvertedFormat
-                  ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
+              }
+              sizes{
+                id
+                name
+                code
+                amount
+                availability{
+                  visible
+                  status
                 }
+                ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
+              }
               `
                 : ""
             }
@@ -163,11 +186,70 @@ function idmGetSingleProdGraphQLPM({
     }`;
 }
 
-function idmHandleAddToBasketPM(e) {
+async function idmHandleAddToBasketPM(e) {
-  const formEl = e.target.closest(
+  const formEl = e.target.closest(".add_to_basket");
-    `${this.isClosestForm ? "div" : "form"}.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_id" type="hidden" value="${
-    <input class="product__add_size" type="hidden" value="${prodData.sizes?.[0]?.id || "uniw"}" name="mode">
+      prodData.id
-    <input class="product__add_number" type="hidden" value="1" name="mode">
+    }" 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_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);
+      const prodData = products.find((p) => p?.id === +prodEl.dataset.id);
-      if (!prodData) return prodEl.remove();
+      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 ${
-            <i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
+              prodData.opinion?.rating > 0.5 ? "--active" : ""
-            <i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
+            }"></i>
-            <i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
+            <i class="icon-star ${
-            <i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
+              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);
   }
 }

IdoSellAddOn/style.html

@@ -1,314 +1,393 @@
 <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: 1rem;
+    --photo-prod-box-pad-top: 1rem;
-  --photo-prod-box-pad-left: 2rem;
+    --photo-prod-box-pad-left: 2rem;
 
-  --photo-prod-box-width: 30rem;
+    --photo-prod-box-width: 30rem;
-  --photo-prod-point-size: 24px;
+    --photo-prod-point-size: 24px;
-  
-  --photo-prod-box-radius-br: 0px 20px 20px 20px;
-  --photo-prod-box-radius-bl: 20px 0px 20px 20px;
-  --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%;
-  --photo-prod-point-tablet-left: 0%;
-  --photo-prod-point-mobile-top: 0%;
-  --photo-prod-point-mobile-left: 0%;
-  
-  
-  --photo-box-offset: 1rem;
-}
 
-.idm_picture__module{
+    --photo-prod-box-radius-br: 0px 20px 20px 20px;
-  position: relative;
+    --photo-prod-box-radius-bl: 20px 0px 20px 20px;
-}
+    --photo-prod-box-radius-tl: 20px 20px 0px 20px;
-.idm_picture__product{
+    --photo-prod-box-radius-tr: 20px 20px 20px 0px;
-  position: absolute;
+
-  z-index: 10;
+    --photo-prod-point-desktop-top: 0%;
-}
+    --photo-prod-point-desktop-left: 0%;
-.idm_picture__img{
+    --photo-prod-point-tablet-top: 0%;
-  width: 100%;
+    --photo-prod-point-tablet-left: 0%;
-}
+    --photo-prod-point-mobile-top: 0%;
-.idm_picture__overlay{
+    --photo-prod-point-mobile-left: 0%;
-  width: 100%;
+
-  height: 100%;
+    --photo-box-offset: 1rem;
-  position: absolute;
+  }
-  top: 0;
+
-}
+  .idm_picture__module {
-/* =========================
+    position: relative;
+  }
+  .idm_picture__product {
+    position: absolute;
+    z-index: 10;
+  }
+  .idm_picture__product:hover,
+  .idm_picture__product.--show {
+    z-index: 20;
+  }
+  .idm_picture__img {
+    width: 100%;
+  }
+  .idm_picture__overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+  }
+  /* =========================
 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);
-  border-radius: 50%;
+    border-radius: 50%;
 
-  background: var(--photo-prod-box-bg);
+    background: var(--photo-prod-box-bg);
-  color: var(--photo-prod-box-text);
+    color: var(--photo-prod-box-text);
-  border: none;
+    border: none;
-  cursor: pointer;
+    cursor: pointer;
 
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
 
-  font-size: 1.6rem;
+    font-size: 1.6rem;
-  font-weight: 600;
+    font-weight: 600;
-  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;
-  border-radius: 50%;
+    border-radius: 50%;
-  background: var(--photo-prod-point-shadow);
+    background: var(--photo-prod-point-shadow);
 
-  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
 ========================= */
-@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% {
+      box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+      opacity: 0.8;
+    }
+    100% {
+      box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+      opacity: 0;
+    }
   }
-  70%{
+
-    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+  .product_info {
-    opacity: 0.8;
+    background: var(--photo-prod-box-bg);
+    flex-direction: column;
+    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;
   }
-  100%{
+  @media (min-width: 757px) {
-    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+    .product_info {
-    opacity: 0;
+      padding: 1.5rem;
+    }
+  }
+  @media (min-width: 979px) {
+    .product_info {
+      padding: 2rem;
+    }
   }
-}
 
-.product_info{
+  .product_info::before {
-  background: var(--photo-prod-box-bg);
+    content: "";
-  /* display: flex; */
+    position: absolute;
-  flex-direction: column;
+    display: block;
-  padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
+    width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
-  gap: 0.5rem;
+    height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
-  display: none;
+    z-index: -1;
-  max-width: var(--photo-prod-box-width);
+  }
-  position: absolute;
-  width: max-content;
-  
-      box-shadow: 0px 0px 10px 1px #000;
-}
-.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*/
-  bottom: var(--photo-prod-box-dir-t, auto);
+  .product_info {
-  top: var(--photo-prod-box-dir-b, auto);
+    bottom: var(--photo-prod-box-dir-t, auto);
-  right: var(--photo-prod-box-dir-l, auto);
+    top: var(--photo-prod-box-dir-b, auto);
-  left: var(--photo-prod-box-dir-r, 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{
-  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);
-}
 
+    border-radius: var(--photo-prod-box-radius);
+  }
+  .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"] {
-  --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;
-}
-
-.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"] {
-  --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
-}
-.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"] {
-  --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
-}
-.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));
     --photo-prod-box-dir-l-before: 0;
   }
 
-  .product_info[data-dir-mobile-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-mobile-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-mobile-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-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-tablet-x="l"] {
-    --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-l-before: 0;
-  }
-
-  .product_info[data-dir-tablet-x="r"] {
-    --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-r-before: 0;
-  }
-
-  .product_info[data-dir-tablet-y="t"] {
-    --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-t-before: 0;
-  }
-
-  .product_info[data-dir-tablet-y="b"] {
-    --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-b-before: 0;
-  }
-
-  .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) {
-  .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;
-  }
-
-  .product_info[data-dir-desktop-x="r"] {
-    --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-r-before: 0;
-  }
-
-  .product_info[data-dir-desktop-y="t"] {
-    --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-t-before: 0;
-  }
-
-  .product_info[data-dir-desktop-y="b"] {
-    --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
-    --photo-prod-box-dir-b-before: 0;
-  }
-
-  .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-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"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
+  }
+  .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));
+      --photo-prod-box-dir-l-before: 0;
+    }
 
+    .product_info[data-dir-mobile-x="r"] {
+      --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-r-before: 0;
+    }
 
-.idm_picture__product .product_info .product_name{
+    .product_info[data-dir-mobile-y="t"] {
-  font-size: 1.6rem;
+      --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
-  color: var(--photo-prod-box-text);
+      --photo-prod-box-dir-t-before: 0;
-}
+    }
-.idm_picture__product .product_info .product_name:hover{
-  color: var(--primary-color, #000)!important;
-}
 
-.idm_picture__product .product_info .product_price{
+    .product_info[data-dir-mobile-y="b"] {
-  font-size: 1.6rem;
+      --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
-  color: var(--photo-prod-box-text);
+      --photo-prod-box-dir-b-before: 0;
-}
+    }
 
-@media(min-width: 979px){
+    .product_info[data-dir-mobile-x="l"][data-dir-mobile-y="t"] {
-  :is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
+      --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"] {
+      --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-l-before: 0;
+    }
+
+    .product_info[data-dir-tablet-x="r"] {
+      --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-r-before: 0;
+    }
+
+    .product_info[data-dir-tablet-y="t"] {
+      --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-t-before: 0;
+    }
+
+    .product_info[data-dir-tablet-y="b"] {
+      --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
+      --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) {
+    .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;
+    }
+
+    .product_info[data-dir-desktop-x="r"] {
+      --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-r-before: 0;
+    }
+
+    .product_info[data-dir-desktop-y="t"] {
+      --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-t-before: 0;
+    }
+
+    .product_info[data-dir-desktop-y="b"] {
+      --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
+      --photo-prod-box-dir-b-before: 0;
+    }
+
+    .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.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_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 {
+      display: flex;
+      animation: idmShowUp 0.3s ease-in-out;
+    }
+  }
+  @media (max-width: 978px) {
+    .idm_picture__product.--show .product_info {
+      display: flex;
+      animation: idmShowUp 0.3s ease-in-out;
+    }
+  }
+
+  @keyframes idmShowUp {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .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 {
+      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 {
+      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;
-    animation: idmShowUp 0.3s ease-in-out;
+    gap: 0.5rem;
+    position: static;
   }
-}
+
-@media(max-width: 978px){
+  .idm_picture__module .product_opinions {
- .idm_picture__product.--show .product_info{
     display: flex;
-    animation: idmShowUp 0.3s ease-in-out;
   }
-}
 
-@keyframes idmShowUp{
+  .idm_picture__module .icon-star:not(.--active)::before {
-  from{
+    content: "\f006";
-    opacity: 0;
   }
-  to{
+  .idm_picture__module .icon-star.--active {
-    opacity: 1;
+    color: var(--opinions-star-active-color, #fac917);
   }
-}
 
+  .idm_picture__module .product_opinions__score {
+    margin-left: 1rem;
+    margin-right: 0.5rem;
+  }
 
-.idm_picture__product{
+  .idm_picture__module .product_opinions__count::before {
-  top: var(--photo-prod-point-mobile-top);
+    content: "(";
-  left: var(--photo-prod-point-mobile-left);
-  display: var(--photo-prod-point-mobile-display, block);
-}
-@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);
   }
-}
+  .idm_picture__module .product_opinions__count::after {
-@media(min-width: 979px){
+    content: ")";
-  .idm_picture__product{
+  }
-    top: var(--photo-prod-point-desktop-top);
+
-    left: var(--photo-prod-point-desktop-left);
+  .idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
-    display: var(--photo-prod-point-desktop-display, block);
+    display: flex;
+    justify-content: center;
+    margin-top: 0;
   }
-}
 </style>

src/features/htmlBuilder/generated/GenerateStyle.jsx

@@ -18,7 +18,6 @@ function GenerateStyle() {
   --photo-prod-box-radius-tl: 20px 20px 0px 20px;
   --photo-prod-box-radius-tr: 20px 20px 20px 0px;
   
-  
   --photo-prod-point-desktop-top: 0%;
   --photo-prod-point-desktop-left: 0%;
   --photo-prod-point-tablet-top: 0%;
@@ -26,7 +25,6 @@ function GenerateStyle() {
   --photo-prod-point-mobile-top: 0%;
   --photo-prod-point-mobile-left: 0%;
   
-  
   --photo-box-offset: 1em;
 }
 
@@ -37,6 +35,9 @@ function GenerateStyle() {
   position: absolute;
   z-index: 10;
 }
+.idm_picture__product:hover, .idm_picture__product.--show{
+  z-index: 20;
+}
 .idm_picture__img{
   width: 100%;
 }
@@ -115,17 +116,26 @@ PULSE ANIMATION
 
 .product_info{
   background: var(--photo-prod-box-bg);
-  /* display: flex; */
   flex-direction: column;
-  padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
+  padding: 1em;
-  gap: 0.5em;
+  gap: 1em;
   display: none;
   max-width: var(--photo-prod-box-width);
   position: absolute;
   width: max-content;
-  
+  box-shadow: 0px 0px 10px 1px #000;
-      box-shadow: 0px 0px 10px 1px #000;
 }
+@media (min-width: 757px){
+  .product_info{
+    padding: 1.5em;
+  }
+}
+@media (min-width: 979px){
+  .product_info{
+    padding: 2em;
+  }
+}
+
 .product_info::before{
   content: "";
   position: absolute;
@@ -135,6 +145,7 @@ PULSE ANIMATION
   z-index: -1;
 }
 
+/*Ulozenie okna produktowego*/
 .product_info{
   bottom: var(--photo-prod-box-dir-t, auto);
   top: var(--photo-prod-box-dir-b, auto);
@@ -150,7 +161,6 @@ PULSE ANIMATION
   left: var(--photo-prod-box-dir-l-before, auto);
 }
 
-
 .product_info[data-dir-single-x="l"] {
   --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
   --photo-prod-box-dir-l-before: 0;
@@ -160,6 +170,7 @@ PULSE ANIMATION
   --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
   --photo-prod-box-dir-r-before: 0;
 }
+
 .product_info[data-dir-single-y="t"] {
   --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
   --photo-prod-box-dir-t-before: 0;
@@ -181,6 +192,7 @@ PULSE ANIMATION
 .product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
   --photo-prod-box-radius: var(--photo-prod-box-radius-br);
 }
+
 @media (max-width: 756px) {
   .product_info[data-dir-mobile-x="l"] {
     --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
@@ -202,9 +214,18 @@ PULSE ANIMATION
     --photo-prod-box-dir-b-before: 0;
   }
 
+  .product_info[data-dir-mobile-x="l"][data-dir-mobile-y="t"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
+  }
+  .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="t"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-tr);
+  }
   .product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] {
     --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
   }
+  .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-br);
+  }
 }
 @media (min-width: 757px) and (max-width: 978px) {
   .product_info[data-dir-tablet-x="l"] {
@@ -227,6 +248,15 @@ PULSE ANIMATION
     --photo-prod-box-dir-b-before: 0;
   }
 
+  .product_info[data-dir-tablet-x="l"][data-dir-tablet-y="t"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
+  }
+  .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="t"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-tr);
+  }
+  .product_info[data-dir-tablet-x="l"][data-dir-tablet-y="b"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
+  }
   .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
     --photo-prod-box-radius: var(--photo-prod-box-radius-br);
   }
@@ -255,10 +285,17 @@ PULSE ANIMATION
   .product_info[data-dir-desktop-x="l"][data-dir-desktop-y="t"] {
     --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
   }
+  .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="t"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-tr);
+  }
+  .product_info[data-dir-desktop-x="l"][data-dir-desktop-y="b"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
+  }
+  .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
+    --photo-prod-box-radius: var(--photo-prod-box-radius-br);
+  }
 }
 
-
-
 .idm_picture__product .product_info .product_name{
   font-size: 1.6em;
   color: var(--photo-prod-box-text);
@@ -267,10 +304,13 @@ PULSE ANIMATION
   color: var(--primary-color, #000)!important;
 }
 
-.idm_picture__product .product_info .product_price{
+.idm_picture__product .product_info .product_prices{
   font-size: 1.6em;
   color: var(--photo-prod-box-text);
 }
+.idm_picture__product .product_info .price.--main{
+  margin-bottom: 0;
+}
 
 @media(min-width: 979px){
   :is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
@@ -294,7 +334,6 @@ PULSE ANIMATION
   }
 }
 
-
 .idm_picture__product{
   top: var(--photo-prod-point-mobile-top);
   left: var(--photo-prod-point-mobile-left);
@@ -315,6 +354,41 @@ PULSE ANIMATION
   }
 }
 
+.idm_picture__module .label_icons{
+  display: flex;
+  gap: 0.5em;
+  position: static;
+}
+
+.idm_picture__module .product_opinions{
+  display: flex;
+}
+
+.idm_picture__module .icon-star:not(.--active)::before{
+  content: "\f006";
+}
+.idm_picture__module .icon-star.--active{
+  color: var(--opinions-star-active-color, #fac917);
+}
+
+.idm_picture__module .product_opinions__score{
+  margin-left: 1em;
+  margin-right: 0.5em;
+}
+
+.idm_picture__module .product_opinions__count::before{
+  content: "(";
+}
+.idm_picture__module .product_opinions__count::after{
+  content: ")";
+}
+
+.idm_picture__module :is(.add_to_basket, .add_to_basket__link){
+  display: flex;
+  justify-content: center;
+  margin-top: 0;
+}
+
 
 .idm_picture__product_point{
         cursor: grab;

src/features/photoModule/PhotoGenericOptions.jsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import GenericBox from "../../ui/GenericBox";
+import { URL_RADIO_DATA } from "./../../constants/photo";
+import { useSharedState } from "../../store/useSharedState";
+import GenericRadioGroup from "./../../ui/GenericRadioGroup";
+import { Divider } from "@mui/material";
+
+function PhotoGenericOptions() {
+  const [urlPoint, setUrlPoint] = useState("single");
+  const setPreviewMode = useSharedState((state) => state.setPreviewMode);
+
+  const handleUrlRadioChange = (event) => {
+    setUrlPoint(event.target.value);
+    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
+  };
+
+  return (
+    <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;

src/features/photoModule/PhotoModule.jsx

@@ -5,6 +5,7 @@ import { useSharedState } from "../../store/useSharedState";
 import PhotoPoints from "./PhotoPoints";
 import PhotoUrl from "./PhotoUrl";
 import { DEFAULT_POINT } from "./../../constants/photo";
+import PhotoGenericOptions from "./PhotoGenericOptions";
 
 function PhotoModule() {
   // zustand state
@@ -13,6 +14,8 @@ function PhotoModule() {
   // 3. Dodawanie/usuwanie punktów
   return (
     <GenericBox variant="outer" title="Zdjęcie z punktami" canCollapse={true}>
+      <PhotoGenericOptions />
+      <Divider />
       <PhotoUrl />
       <Divider />
       <PhotoPoints />

src/features/photoModule/PhotoUrl.jsx

@@ -1,16 +1,10 @@
 import { Divider } from "@mui/material";
 import { useSharedState } from "../../store/useSharedState";
 import GenericBox from "../../ui/GenericBox";
-import GenericRadioGroup from "../../ui/GenericRadioGroup";
 import InputField from "../../ui/InputField";
-import { URL_RADIO_DATA } from "./../../constants/photo";
-import { useState } from "react";
 
 function PhotoUrl() {
   const previewMode = useSharedState((state) => state.previewMode);
-  const setPreviewMode = useSharedState((state) => state.setPreviewMode);
-
-  const [urlPoint, setUrlPoint] = useState("single");
 
   const url = useSharedState((state) => state.urls[previewMode]);
   const setUrl = useSharedState((state) => state.setUrl);
@@ -18,10 +12,6 @@ function PhotoUrl() {
   const photoAlt = useSharedState((state) => state.photoAlt);
   const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);
 
-  const handleUrlRadioChange = (event) => {
-    setUrlPoint(event.target.value);
-    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
-  };
   const handleChangeURL = ({ event, type }) => {
     event.preventDefault();
     setUrl(type, event.target.value);
@@ -29,12 +19,6 @@ function PhotoUrl() {
 
   return (
     <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}`