Untitled
unknown
plain_text
2 years ago
10 kB
2
Indexable
Never
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'
}
});
});