Untitled

// PDP MARIONNAUD https://www.marionnaud.fr/soin-visage/hydratant-et-nourrissant/soin-de-jour/hydratant-creme-reparatrice-sisley/p/100027043
// 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 playerKey = "9a8f1db2-8ee0-4c70-aaed-daa0e85aff94";
  var productSku = dataLayer[0].ecommerce.detail.products[0].variant
  var trackingKey = "c51f5cf3-b329-4493-9fca-99de5a845350";
  SDK.checkVideoAvailability(playerKey, productSku, function (value) {
  SDK.getVideos(playerKey, productSku, function (videos) {
    var urlOverlay = videos[0].thumbnails.overlay_medium;
    var videoId = videos[0].id;

    // Call to Action
    var ctaCont = document.createElement("div");
    ctaCont.setAttribute("id", "SkeepersCta");
    ctaCont.style.cursor = "pointer";
    var divIcon = document.createElement("img");
    divIcon.setAttribute("id", "iconCta");
    divIcon.src =
      "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjODk2MGU4IiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4=";
    divIcon.style.width = "16px";
    divIcon.style.position = "relative";
    var ctaT = document.createElement("p");
    ctaT.setAttribute("class", "contFontBold MMR46");
    ctaT.style.display = "inline-block";
    ctaT.innerHTML = "Le produit testé en vidéo";
    ctaT.style.fontSize = "16px";
    ctaT.style.textDecoration = "bold";
    ctaT.style.color = "#8960e8";
    ctaT.style.marginTop = "0.3rem";
    ctaT.style.marginLeft = "0.3rem";
    ctaCont.appendChild(divIcon);
    ctaCont.appendChild(ctaT);
    document
      .querySelector(
        "#product-stuff > div:nth-child(2) > div.col-lg-9.col-md-9.col-xs-8 > h1"
      )
      .append(ctaCont);
    ctaCont.addEventListener("click", function (i) {
      var scroll = document.querySelector("#teesterPlayer");
      scroll.scrollIntoView({ block: "end", behavior:'smooth' });
      //top of the player
    });

    // Thumbs

    var ThumbsMain = document.createElement("li");
    ThumbsMain.setAttribute("class", "SkeepersThumb");
    ThumbsMain.style.float = "left";
    ThumbsMain.style.listStyle = "none";
    var ThumbsPlayer = document.createElement("span");

    var img = document.createElement("img");
    img.src = urlOverlay;
    img.style.objectFit = "cover";
    img.style.minHeight = "100%";

    var playIcon = document.createElement("img");
    playIcon.style.position = "absolute";
    playIcon.style.zIndex = "10";
    playIcon.style.width = "10%";
    playIcon.style.top = "50%";
    playIcon.style.left = "20%";
    playIcon.style.cursor = "pointer";
    playIcon.style.transform = "translate3d(-50%, -50%, 0)";
    playIcon.style.transition = ".2s ease";
    playIcon.src =
      "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjZmZmZmZmIiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4=";
    ThumbsMain.appendChild(ThumbsPlayer);
    ThumbsPlayer.appendChild(img);
    ThumbsPlayer.appendChild(playIcon);
    document.querySelector("#images_old_gallary").prepend(ThumbsMain);
    ThumbsMain.addEventListener("mouseover", mOver, false);
    ThumbsMain.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)";
    }
    playIcon.addEventListener("click", function (e) {
      SDK.init({
        type: "player-modal",
        args: {
          key: playerKey,
          product: productSku,
        },
      });
    });
    // Player Area
    // Container
    var divPlayer = document.createElement("div");
    divPlayer.setAttribute("id", "teesterPlayer");
    divPlayer.setAttribute("class", "col-lg-12 col-md-12 col-sm-12 padLR0");
    divPlayer.style.position = "relative";
    divPlayer.style.marginTop = "2rem";
    divPlayer.style.marginBottom = "10rem"
    // Layout Title
    var descTitlePlayer = document.createElement("h2");
    descTitlePlayer.setAttribute("class", "section-heading");
    descTitlePlayer.style.textAlign = "center";
    var span1 = document.createElement("span");
    span1.setAttribute("class", "textp top-heading Purple");
    span1.innerHTML = "Avis client";
    var span2 = document.createElement("span");
    span2.setAttribute("class", "bottom-heading");
    span2.innerHTML = "en vidéo";
    descTitlePlayer.appendChild(span1);
    descTitlePlayer.appendChild(span2);

    // Player init
    var videoPlayer = document.createElement("div");
    videoPlayer.style.width = "500px";
    videoPlayer.style.marginTop = "0.8rem";
    videoPlayer.setAttribute(
      "class",
      "one-collapse one-wysiwyg paragraph one-expend"
    );
    videoPlayer.style.paddingBottom = "56.25%";

    SDK.init(
      {
        type: "player",
        args: {
          product: productSku,
          key: playerKey,
          width: "100%",
          height: "inherit",
        },
      },
      videoPlayer
    );
    SDK.init({
      type: "tracking",
      args: {
        key: "c51f5cf3-b329-4493-9fca-99de5a845350",
        product: productSku,
        event: "PRODUCT_PAGE_VIEW",
      },
    });

    // Display in order
    divPlayer.appendChild(descTitlePlayer);
    divPlayer.appendChild(videoPlayer);
    document.querySelector("#notes_et_avis").prepend(divPlayer);
  })
  });
});