Skeepers x Moulinex

// 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)
        

        if (window.innerWidth < 600 )  {
          let myArray = videos;
          for (let i = 0; i < videos.length; i++) {
            
            let videoArray = videos[i].id;
            console.log(videos[i].id);
            var divPlayer2 = document.createElement("div");
            divPlayer2.setAttribute("id", "playerSkeepers")
            divPlayer2.style.margin = "auto";
            divPlayer2.style.width = "370px"
            var player2 = document.createElement("div");
            player2.style.aspectRatio = "16/9";
            player2.style.paddingBottom = "56.25%";
            player2.style.marginBottom = "1.5rem"
            SDK.init({
                    type: "player",
                    args: {
                        key: playerKey,
                        id: videoArray,
                        width: "100%",
                        classname: "player-teester",
                    },
                },
                player2
            );
            divPlayer2.appendChild(player2);
            // HIERARCHY OF DISPAY
            section.appendChild(divPlayer2)
          
          }
          section.setAttribute("id", "sliderSkeepers");

          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)
                    // EVENTS
                    ctaContainer.addEventListener("click", function (i) {
                      var scroll = document.querySelector("#sliderSkeepers");
                      scroll.scrollIntoView({
                        block: "end"
                      });
                      //top of the player
                    });
        } else {
          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)
          section.setAttribute("id", "sliderSkeepers");

          let myArray = videos;
          for (let i = 0; i < videos.length; i++) {
            
            let videoArray = videos[i].id;
            console.log(videos[i].id);
            var divPlayer2 = document.createElement("div");
            divPlayer2.setAttribute("id", "playerSkeepers")
            divPlayer2.style.margin = "auto";
            divPlayer2.style.width = "800px";
            var player2 = document.createElement("div");
            player2.style.aspectRatio = "16/9";
            player2.style.paddingBottom = "56.25%";
            player2.style.marginBottom = "1.5rem"
            SDK.init({
                    type: "player",
                    args: {
                        key: playerKey,
                        id: videoArray,
                        width: "100%",
                        classname: "player-teester",
                    },
                },
                player2
            );
            divPlayer2.appendChild(player2);
            // HIERARCHY OF DISPAY
            section.appendChild(divPlayer2)
                      // EVENTS
          ctaContainer.addEventListener("click", function (i) {
            var scroll = document.querySelector("#sliderSkeepers");
            scroll.scrollIntoView({
              block: "end"
            });
            //top of the player
          });
          
          }
          }


       
      });
    }
  });
});