Галерея в карточке товара

<script>
    function waitForElement(elementId, callBack) {
  const element = document.querySelector(elementId);
  if (element) {
    callBack(elementId, element);
  } else {
    setTimeout(() => {
      waitForElement(elementId, callBack);
    }, 50);
  }
}

function initCardGallery1() {
  const store = JSON.parse(window.tStoreXHR[Object.keys(window.tStoreXHR)[0]].response);
  const cards = document.querySelectorAll("#rec12345678 .t-store__card:not([num])");

  cards.forEach((card, index) => {
    const productImg = card.querySelector(".js-product-img");
    const productNum = index.toString();

    productImg.addEventListener("mousemove", (e) => {
      const photos = JSON.parse(store.products[productNum].gallery);

      for (let i = 0; i < photos.length; i++) {
        if (e.layerX > e.target.clientWidth * ((1 / photos.length) * i)) {
          if (e.target.tagName.toLowerCase() === "img") {
            e.target.setAttribute("src", photos[i].img);
          } else {
            e.target.setAttribute("style", `background-image: url("${photos[i].img}") !important;`);
          }

          if (typeof t786__updateLazyLoad !== "undefined") {
            t786__updateLazyLoad();
          }
        }
      }
    });

    card.setAttribute("num", productNum);
  });
}

if (window.innerWidth > 1000) {
  waitForElement('#rec12345678 .t-store__card', () => {
    const loadObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        const lastCard = document.querySelectorAll("#rec12345678 .t-store__card")[document.querySelectorAll("#rec12345678 .t-store__card").length - 1];
        if (lastCard && !lastCard.hasAttribute("num")) {
          initCardGallery1();
        }
      });
    });

    loadObserver.observe(document.querySelector('#rec12345678'), {
      attributes: true
    });

    initCardGallery1();
  });
}
</script>