PhotoModule/IdoSellAddOn/script.js

const idmPhotoModuleLiteralsPM = {
  [`Okazja`]: "Okazja",
  [`Promocja`]: "Promocja",
  [`Zobacz produkt`]: "Zobacz produkt",
  [`Dodany`]: "Dodany",
  [`Wystąpił błąd`]: "Wystąpił błąd",
  [`Do koszyka`]: "Do koszyka",
};

// LAZY LOAD
function idmObserveEachOncePM(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;
}

idmObserveEachOncePM(
  document.querySelectorAll(".idm_picture__module"),
  (entry) => {
    idmPictureModuleProductsPM(entry.target);
  },
);

// GRAPHQL QUERY
function idmGetSingleProdGraphQLPM({
  prodId,
  opinions = false,
  labels = false,
  addToBasket = false,
}) {
  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
            type
            ${labels ? "zones" : ""}
            ${
              opinions
                ? `
            opinion{
              rating
              count
            }`
                : ""
            }
            ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
            ${
              addToBasket
                ? `
                sizes{
                  id
                  name
                  code
                  amount
                  availability{
                    visible
                    status
                  }
                  ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
                }
              `
                : ""
            }
        }
    }`;
}

function idmHandleAddToBasketPM(e) {
  const formEl = e.target.closest(
    `${this.isClosestForm ? "div" : "form"}.add_to_basket`,
  );
  if (!formEl) return;
}

function idmMarkupAddToBasketPM(prodData) {
  if (!prodData) return "";

  const totalAmount = prodData?.sizes?.[0]?.amount || 0;
  const prodStatus = prodData?.sizes?.[0]?.availability?.status || "disable";

  if (
    prodData.type !== "product" ||
    totalAmount === 0 ||
    prodStatus === "disable"
  )
    return `<a class="btn --solid --medium add_to_basket__link" href="${prodData.href}">${idmPhotoModuleLiteralsPM["Zobacz produkt"]}</a>`;

  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"]}">
        <span>${idmPhotoModuleLiteralsPM["Do koszyka"]}</span>
    </button>
  </form>`;
}

// POBIERANIE I WSTAWIANIE PRODUKTOW
async function idmPictureModuleProductsPM(containerEL) {
  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);
    });

    const isLabels = containerEL.dataset.labels === "true";
    const isOpinions = containerEL.dataset.opinions === "true";
    const isAddToBasket = containerEL.dataset.addToBasket === "true";

    // POBIERANIE PRODUKTOW
    const res = await fetch("/graphql/v1/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `{${productsId.reduce(
          (acc, val, index) =>
            acc +
            `${idmGetSingleProdGraphQLPM({
              prodId: val,
              labels: isLabels,
              opinions: isOpinions,
              addToBasket: isAddToBasket,
            })}`,
          "",
        )}}`,
      }),
    });

    const data = await res.json();
    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();

      prodEl.classList.add("--mod-init");

      // LABELKI
      let labelsHTML = "";

      if (isLabels) {
        if (prodData.price?.omnibusPrice?.[app_shop.vars.priceType]?.value) {
          if (
            prodData.price?.omnibusPriceDetails
              ?.omnibusPriceIsHigherThanSellingPrice
          )
            labelsHTML += `<span class="label --promo --omnibus">${idmPhotoModuleLiteralsPM["Promocja"]}</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>`;
        });
      }

      // OPINIE
      let opinionsHTML = "";
      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>
          </div>
          <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>` : ""}
        <a class="product_name" href="${prodData.link}">${prodData.name}</a>
        <span class="product_price">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span>
        ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
      `;
    });

    containerEL.querySelectorAll(".product_info:not(.--mod-init)");
  } catch (err) {
    console.error(err);
  }
}

// OTWIERANIE NA MOBILE
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");

  // ClearShow
  if (!prodContainerEl)
    return document
      .querySelector(".idm_picture__product.--show")
      ?.classList?.remove("--show");
  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");
});