Rozbudowa RWD

2026-01-07 15:09:16 +01:00
parent df964a8088
commit e6a9465195
24 changed files with 728 additions and 311 deletions
--- a/IdoSellAddOn/script.js
+++ b/IdoSellAddOn/script.js
@@ -0,0 +1,178 @@
+function idmObserveEachOnce(elements, callback, options = {}) {
+  const observer = new IntersectionObserver(
+    (entries, obs) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+
+        callback(entry);
+        obs.unobserve(entry.target);
+      });
+    },
+    {
+      threshold: 0.1,
+      ...options,
+    }
+  );
+
+  elements.forEach((el) => observer.observe(el));
+  return observer;
+}
+
+idmObserveEachOnce(
+  document.querySelectorAll(".idm_picture__module"),
+  (entry) => {
+    idmPictureModuleProducts(entry.target);
+  }
+);
+
+function idmGetSingleProdGraphQL(prodId) {
+  const IDM_PRICE_QUERY = (priceType) => `price {
+      rebateCodeActive
+      price {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      omnibusPrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      omnibusPriceDetails {
+        unit {
+          ${priceType} {
+            value
+            formatted
+          }
+        }
+        youSavePercent
+        omnibusPriceIsHigherThanSellingPrice
+        newPriceEffectiveUntil {
+          formatted
+        }
+      }
+      max {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      unit {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      unitConvertedPrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      youSavePercent
+      beforeRebate {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      beforeRebateDetails {
+        youSavePercent
+        unit {
+          ${priceType} {
+            value
+            formatted
+          }
+        }
+      }
+      advancePrice {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      suggested {
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+      rebateNumber {
+        number
+        ${priceType} {
+          value
+          formatted
+        }
+      }
+    }`;
+
+  return `
+    prod${prodId}: product(productId: ${prodId}) {
+        product {
+            id
+            name
+            link
+            ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
+        }
+    }`;
+}
+async function idmPictureModuleProducts(containerEL) {
+  try {
+    const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
+    const productsId = [];
+    allProdEl.forEach((prodEl) => {
+      if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
+    });
+
+    const res = await fetch("/graphql/v1/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query: `{${productsId.reduce(
+          (acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`,
+          ""
+        )}}`,
+      }),
+    });
+
+    const data = await res.json();
+    const products = Object.values(data?.data)?.map((prod) => prod.product);
+
+    allProdEl.forEach((prodEl) => {
+      const prodData = products.find((p) => p.id === +prodEl.dataset.id);
+      if (!prodData) return;
+
+      prodEl.classList.add("--mod-init");
+      prodEl.innerHTML = `
+        <a class="product_name" href="${prodData.link}">${prodData.name}</a>
+        <span class="product_price">${
+          prodData.price?.price?.[app_shop.vars.priceType]?.formatted
+        }</span>
+      `;
+    });
+
+    containerEL.querySelectorAll(".product_info:not(.--mod-init)");
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+document.body.addEventListener("click", (e) => {
+  if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
+  const prodContainerEl = e.target.closest(".idm_picture__product");
+  if (!prodContainerEl) return;
+  if (prodContainerEl.classList.contains("--show"))
+    return prodContainerEl.classList.remove("--show");
+
+  const moduleContainer = prodContainerEl.closest(".idm_picture__module");
+  if (!moduleContainer) return;
+
+  moduleContainer
+    .querySelectorAll(".idm_picture__product.--show")
+    .forEach((prodConEl) => prodConEl.classList.remove("--show"));
+  prodContainerEl.classList.add("--show");
+});