PDP ArkoPharma FR

const 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) {
// Arkhopharma keys 
    var playerKey = "702724af-5b2b-4aa8-b3da-6a1c6dac0a35";
    var trackingKey = "a08d8821-a6f6-4898-99ba-bbc75f195a93";
   // Assets
    var ShopifyAnalytics = window.ShopifyAnalytics || [];
    var productSku = ShopifyAnalytics.meta.product.variants[0].sku
// Check if video available       
    SDK.checkVideoAvailability(playerKey, productSku, function (value) {
      if (value) {        
// Create player div container
    var divMain = document.createElement("div");
        divMain.style.width = "100%";
        divMain.style.position = "relative";
        divMain.style.marginTop = "1rem";
// Create container stealing product details section class
    var divTitle = document.createElement("div");
        divTitle.setAttribute("class", "product__main-title");
        divTitle.setAttribute("id", "teesterTitle")
        divTitle.style.fontWeight = "300";
        divTitle.style.fontFamily = "Prospectus";
        divTitle.style.fontStyle = "normal";
        // Delete ::after on title & set-up
        var styleElem = document.head.appendChild(document.createElement("style"));
        styleElem.innerHTML = "#teesterTitle::after {display:none;}";
        var styleElemD = document.head.appendChild(document.createElement("style"));
        styleElemD.innerHTML = "#teesterTitle::before {display:none;}";
        var styleElemE = document.head.appendChild(document.createElement("style"));
        styleElemE.innerHTML = "#teesterTitle {padding-left:0;}";
        divTitle.style.color = "black";
        document.getElementById("teesterTitle")
        divTitle.innerHTML = "Avis client en vidéo";
        var styleElemF = document.head.appendChild(document.createElement("style"));
        if (window.innerWidth < 770 ){
          styleElemE.innerHTML = "#teesterTitle {padding-left:20px;}";
        }

// Create player div displayer
        var divPlayer = document.createElement("div");
        divPlayer.setAttribute("id", "playerTeester");
        divPlayer.style.aspectRatio = "16/9";
        divPlayer.style.marginBottom = "1rem";
        divPlayer.style.marginTop = "-0.5rem";
        // logic 
        divMain.appendChild(divTitle);
        divMain.appendChild(divPlayer);
        document
          .querySelector(
            "body > div.page > div.main > div.product.product--template > div.container > div > div.product__main"
          )
          .prepend(divMain);
          // CTA container  
          var ctaContain = document.createElement("div");
          ctaContain.setAttribute("id", "CtaTeester");
          ctaContain.style.width = "100%";
          ctaContain.style.position = "relative";
          ctaContain.style.display = "flex";
          ctaContain.style.alignItems = "center";
         // CTA 
        var divCta = document.createElement("a");
        divCta.setAttribute("id", "teesterCta");
        divCta.setAttribute("class", "teesterText");
        divCta.innerHTML = "Le produit testé en vidéo par nos clients";
        divCta.style.cursor = "pointer";
        divCta.addEventListener("click", function (i) {
          var scroll = document.querySelector(".product__main");
          scroll.scrollIntoView({block: "start"});
          //top of the player
        });

        divCta.style.fontSize = "15px";
        divCta.style.fontFamily = "Proxima";
        divCta.style.fontStyle = "normal";
        divCta.style.marginTop = "3px";
        divCta.style.textDecoration = "none";
        divCta.style.color = "#50b614";
        divCta.style.fontWeight = "550";
        divCta.style.display = "inline-block";
        divCta.style.marginLeft = "6px";
        // Mobile
        var styleElemG = document.head.appendChild(document.createElement("style"));
        if (window.innerWidth < 770 ){
          styleElemG.innerHTML = "#teesterCta {font-size:14px;}";
          styleElemG.innerHTML = "#iconCta {font-size:14px;}";

        }
        // Cta Style Adjustements
        var toChange = document.querySelector("body > div.page > div.main > div.product.product--template > div.container > div > div.product__sidebar > div > div.product__sidebar-header-actions");
        toChange.style.marginTop = "5px";
        // ICON CTA
         // init icon & set attributes
         var divIcon = document.createElement("img");
         divIcon.setAttribute("id", "iconCta");
         divIcon.src = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xNiAwQzcuMTY0IDAgMCA3LjE2NCAwIDE2czcuMTY0IDE2IDE2IDE2IDE2LTcuMTY0IDE2LTE2UzI0LjgzNiAwIDE2IDB6bS02IDI0VjhsMTYuMDA4IDhMMTAgMjR6IiBmaWxsPSIjNTBiNjE0IiBjbGFzcz0iZmlsbC00ZTRlNTAiPjwvcGF0aD48L3N2Zz4=";
         divIcon.style.width = "16px";
         // Icon style

        ctaContain.appendChild(divIcon);
        ctaContain.appendChild(divCta);

        document.querySelector("body > div.page > div.main > div.product.product--template > div.container > div > div.product__sidebar > div > div.product__title"
        )
        .appendChild(ctaContain);

        // Player init 
        var player = SDK.init(
          {
            type: "player",
            args: {
              key: playerKey,
              product: productSku,
              width: "100%",
              height: "inherit",
            },
          },
          divPlayer
        );

// Init Tracking PDP
      var trackProduct = SDK.init({
        type: "tracking",
        args: {
          key: trackingKey,
          product: productSku,
          event: "PRODUCT_PAGE_VIEW",
        },
      });
      }
    });
})