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);
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) => { 
  SDK.getVideos(playerKey, productSku, function (videos) {
    const urlOverlay = videos[0].thumbnails.overlay_medium;
    const videoId = videos[0].id;
    // Thumb
    var divThumb = document.createElement("li");
    divThumb.setAttribute(
      "class",
      "c__item ng-star-inserted swiper-slide-visible"
    );
    divThumb.style.cursor = "pointer";
    // Picture content
    var divPic = document.createElement("div");
    divPic.style.height = "100%";
    divPic.style.width = "100%";
    divPic.style.alignItems = "center";
    divPic.style.justifyContent = "center";
    divPic.style.position = "relative";
    // Thumb playIcon
    var playIcon = document.createElement("img");
    playIcon.style.position = "absolute";
    playIcon.style.zIndex = "10";
    playIcon.style.width = "30%";
    playIcon.style.top = "50%";
    playIcon.style.left = "50%";
    playIcon.style.cursor = "pointer";
    playIcon.style.transform = "translate3d(-50%, -50%, 0)";
    playIcon.style.transition = ".2s ease";
    playIcon.src =
      "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjZmZmZmZmIiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4=";
    // Get video preview img
    var img = document.createElement("img");
    img.setAttribute("class", "c__item ng-star-inserted");
    img.src = urlOverlay;
    img.style.objectFit = "cover";
    img.style.width = "100%";
    img.style.height = "100%";
    divThumb.appendChild(divPic);
    divPic.appendChild(playIcon);
    divPic.appendChild(img);
    divThumb.addEventListener("mouseover", mOver, false);
        divThumb.addEventListener("mouseout", mOut, false);
        function mOver() {
          playIcon.style.transform = "scale(1.5) translate3d(-30%, -30%, 0)";
        }
        function mOut() {
          playIcon.style.transform = "translate3d(-50%, -50%, 0)";
        }
    //
    divThumb.addEventListener("click", function (i) {
      mySwiper2.slideTo(1);
   
    })
 
    //inSlider Thumb
    var mySwiper = $(".swiper-container-thumbnails")[0].swiper;
    mySwiper.addSlide(1, divThumb)
    mySwiper.update();
    //playerinSlider
    var divPlayer = document.createElement("li");
    divPlayer.setAttribute(
      "class",
      "swiper-slide c__item ng-star-inserted"
    );
    divPlayer.style.marginTop = "9%";
    var player = document.createElement("div");
    player.setAttribute("class", "twic ng-star-inserted twic-done");
    player.style.top = "17%";
    player.style.aspectRatio = "16/9";
    player.style.paddingBottom = "56.25%";
    divPlayer.appendChild(player);
    SDK.init(
      {
        type: "player",
        args: {
          key: playerKey,
          product: productSku,
          width: "100%",
          classname: "player-teester",
        },
      },
      player
    );
    //inSlider Player
    var mySwiper2 = $(".swiper-container")[0].swiper;
    mySwiper2.addSlide(1, divPlayer);
    mySwiper2.thumbs.update()
    // 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");
    section.appendChild(divContent);
 
        // Title
        var three = 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 > div.c__main-title-wrapper > sd-title > h1"
        ).textContent;
        var titlePlayer = document.createElement("h2");
        titlePlayer.setAttribute("class", "brand--h3 ng-star-inserted");
        titlePlayer.innerHTML = "Votre" + three + "testé en vidéo";
        titlePlayer.style.textAlign = "center";
        titlePlayer.style.color = "white";
      divContent.appendChild(titlePlayer)
      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.width = "800px";
    divPlayer2.style.margin = "auto";
 
    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);
 
    section.appendChild(divPlayer2);
    document
      .querySelector(
        "#main-content > cx-page-layout > wc-product-details-page > div > div > cx-page-slot.WhatsInTheBox.has-components"
      )
      .append(section);
      }
    // CTA
    var ctaCont = document.createElement("div");
    ctaCont.style.marginTop = "1rem";
    ctaCont.style.marginLeft = '-1px';
    ctaCont.style.marginBottom = '1%';
    ctaCont.setAttribute(
      "class",
      ""
    );
    var divCta = document.createElement("a");
    divCta.setAttribute("id", "teesterCta");
    divCta.setAttribute("class", "teesterText");
    divCta.innerHTML = "Votre" + three + "testé en vidéo";
    divCta.style.color = "#dc2f2f";
    divCta.style.fontFamily = 'Inter var,"system-ui"';
    divCta.style.fontWeight = "bold";
    divCta.style.fontSize = "15px";
    divCta.style.cursor = "pointer";
    // init icon & set attributes
    var divIcon = document.createElement("img");
    divIcon.setAttribute("id", "iconCta");
    divIcon.style.position = "relative";
    divIcon.style.top = "3px";
    divIcon.style.marginRight = "0.5rem";
    divIcon.src =
      "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjZGMyZjJmIiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4=";
    divIcon.style.width = "16px";
    ctaCont.appendChild(divIcon);
    ctaCont.appendChild(divCta);
    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(ctaCont);
    // On Click Scroll To Player Desc
    divCta.addEventListener("click", function (i) {
      var scroll = document.querySelector("#playerSkeepers");
      scroll.scrollIntoView({ block: "end" });
      //top of the player
    });
  });
})
SDK.init({
    type: 'tracking',
    args: {
        key: trackingKey,
        product: productSku,
        event: 'PRODUCT_PAGE_VIEW'
    }
});
});