Untitled

// Sdk Push
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://sdk.teester.com/loader.js";
document.getElementsByTagName("head")[0].appendChild(script);
var dataLayer = window.dataLayer || [];
window.onTeesterReady = window.onTeesterReady || [];
window.onTeesterReady.push(function (SDK) {
  var productSku = tc_vars.product_id;
  var playerKey = "4b0238e7-a704-4449-80f1-a6bd6919dd9a";
  var trackingKey = "ce8997f3-28f5-465f-8d69-6ed1785ddd44";
  SDK.checkVideoAvailability(playerKey, productSku, (value) => {
    if (value) {
      SDK.getVideos(playerKey, productSku, function (videos) {
        //SECTION 
        var section = document.createElement("sd-arguments");
        section.setAttribute(
          "class",
          "is-default is-spaced is-theme-promo-1 ng-star-inserted"
        );
        section.style.marginBottom = "3%";
        section.style.paddingBottom = "3%";
        var divContent = document.createElement("div");
        divContent.setAttribute("class", "c__content");
        var titlePlayer = document.createElement("h2");
        titlePlayer.setAttribute("class", "brand--h3 ng-star-inserted");
        titlePlayer.innerHTML = "Votre produit testé en vidéo";
        titlePlayer.style.textAlign = "center";
        titlePlayer.style.color = "white";
        divContent.appendChild(titlePlayer)
        section.appendChild(divContent)
        //CALL TO ACTION
        var ctaContainer = document.createElement("div")
        ctaContainer.setAttribute("style", "margin-top: 1rem; margin-left: -1px; margin-bottom: 1%;")
        var ctaImg = document.createElement("img")
        ctaImg.src = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjZGMyZjJmIiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4="
        ctaImg.setAttribute("style", "position: relative; top: 3px; margin-right: 0.5rem; width: 16px;")
        var ctaText = document.createElement("a")
        ctaText.setAttribute("style", "color: rgb(220, 47, 47);  font-weight: bold; font-size: 15px; cursor: pointer;")
        ctaText.innerHTML = "Découvrez ce produit testé en vidéo"
        ctaContainer.appendChild(ctaImg)
        ctaContainer.appendChild(ctaText)
        //CAROUSSEL SECTION
        //DOM SLIDER SECTION
        var sliderSection = document.createElement("section");
        sliderSection.setAttribute("class", "slider-wrapper");
        sliderSection.setAttribute("id", "sliderSkeepers");
        sliderSection.style.cssText =
          "height: 450px;width: 750px;margin: 1rem;position: relative;margin: 0 auto;";
        //DOM BUTTON PREV
        var sliderNavPrev = document.createElement("button");
        sliderNavPrev.setAttribute("class", "slide-arrow");
        sliderNavPrev.innerHTML = "‹";
        sliderNavPrev.setAttribute("id", "slide-arrow-prev");
        sliderNavPrev.style.cssText =
          "color:white;border:2px solid; border-color:white;background-color: #ffffff00;z-index:10;position: absolute;display: flex;top: 0;bottom: 0;margin: auto;height: 4rem;width: 4rem;font-size: 4rem;padding: 0;cursor: pointer;opacity: 1;transition: opacity 100ms;  left: -50px;padding-left: 11px;padding-bottom: 7px;border-radius:2.2rem;align-items:center;text-align:center;";
        //DOM BUTTON NEXT
        var sliderNavNext = document.createElement("button");
        sliderNavNext.setAttribute("class", "slide-arrow");
        sliderNavNext.innerHTML = "›";
        sliderNavNext.setAttribute("id", "slide-arrow-next");
        sliderNavNext.style.cssText =
          "color:white;border:2px solid; border-color:white;background-color: #ffffff00;z-index:10;position: absolute;display: flex;top: 0;bottom: 0;margin: auto;height: 4rem;width: 4rem;font-size: 4rem;padding: 0;cursor: pointer;opacity: 1;transition: opacity 100ms;  right: -50px;padding-left: 13px;padding-bottom: 7px;border-radius: 2.2rem;align-items:center;text-align:center;";
        //DOM SLIDER UL
        var sliderUl = document.createElement("ul");
        sliderUl.setAttribute("class", "slides-container");
        sliderUl.setAttribute("id", "slides-container");
        sliderUl.style.cssText =
          "display: flex;list-style: none;margin: 0 auto;padding: 0;overflow: hidden;scroll-behavior: smooth;height: calc(100vh - 2rem);width: 100%;";
        // Mobile Player init
        var divPlayerMobile = document.createElement("div")
        divPlayerMobile.style.width = "380px"
        var videoPlayerMobile = document.createElement("div");
        videoPlayerMobile.setAttribute("id", "ugvplayer");
        videoPlayerMobile.style.marginTop = "0.8rem";
        videoPlayerMobile.style.aspectRatio = "16/9";
        videoPlayerMobile.style.paddingBottom = "56.25%";
        SDK.init(
          {
            type: "player",
            args: {
              key: playerKey,
              product: productSku,
              width: "100%",
              label: "playerMobile",
            },
          },
          videoPlayerMobile
        );
        divPlayerMobile.appendChild(videoPlayerMobile)
        // EVENT LISTENER
        ctaContainer.addEventListener("click", function (i) {
          var scroll = document.querySelector("#sliderSkeepers");
          scroll.scrollIntoView({
            block: "end"
          });
          //top of the player
        });
        if (window.innerWidth < 600 )  {
          section.appendChild(divPlayerMobile)
          divContent.style.width = "450px";
          divContent.style.paddingBottom = "1.5rem"
          document.querySelector("#presentation").prepend(section)
          document.querySelector("#overview > sd-product-overview > div.c__title-wrapper.ng-star-inserted > p").prepend(ctaContainer)
        } else {
          let myArray = videos;
          for (let i = 0; i < videos.length; i++) {
            let videoArray = videos[i].id;
            // Slide init
            var slidePlayer2 = document.createElement("li");
            slidePlayer2.setAttribute("class", "slide");
            slidePlayer2.style.cssText =
              "width: 100%; height: 100%; flex: 1 0 100%;";
            // Player init
            var videoPlayer = document.createElement("div");
            videoPlayer.setAttribute("id", "ugvplayer");
            videoPlayer.style.marginTop = "0.8rem";
            videoPlayer.style.aspectRatio = "16/9";
            videoPlayer.style.paddingBottom = "56.25%";
            SDK.init(
              {
                type: "player",
                args: {
                  key: playerKey,
                  id: videoArray,
                  width: "100%",
                  label: videoArray,
                },
              },
              videoPlayer
            );
            // HIERARCHY OF DISPAY
            slidePlayer2.appendChild(videoPlayer);
            sliderUl.appendChild(slidePlayer2);
            sliderSection.appendChild(sliderUl);
            sliderSection.appendChild(sliderNavPrev);
            sliderSection.appendChild(sliderNavNext);
            section.appendChild(sliderSection)
          }
          document
          .querySelector(
            "#main-content > cx-page-layout > wc-product-details-page > div > div > cx-page-slot.WhatsInTheBox.has-components"
          )
          .append(section)
          document.querySelector("#overview > sd-product-overview > div > div.c__content.col-24.col-l-9.col-m-12.offset-l-1 > div.c__title-wrapper.ng-star-inserted > p").prepend(ctaContainer)
          const slide = document.querySelector(".slide");
          sliderNavNext.addEventListener("click", () => {
            const slideWidth = slide.clientWidth;
            sliderUl.scrollLeft += slideWidth;
          });
          sliderNavPrev.addEventListener("click", () => {
            const slideWidth = slide.clientWidth;
            sliderUl.scrollLeft -= slideWidth;
          });
        }
      });
    }
  });
});