Untitled
unknown
plain_text
2 years ago
8.2 kB
4
Indexable
// 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) //CAROUSSEL SECTION //DOM SLIDER SECTION var sliderSection = document.createElement("section"); sliderSection.setAttribute("class", "slider-wrapper"); sliderSection.setAttribute("id", "sliderSkeepers"); sliderSection.style.cssText = "height: 450px;width: 750px;margin: 1rem;position: relative;margin: 0 auto;"; //DOM BUTTON PREV var sliderNavPrev = document.createElement("button"); sliderNavPrev.setAttribute("class", "slide-arrow"); sliderNavPrev.innerHTML = "‹"; sliderNavPrev.setAttribute("id", "slide-arrow-prev"); sliderNavPrev.style.cssText = "color:white;border:2px solid; border-color:white;background-color: #ffffff00;z-index:10;position: absolute;display: flex;top: 0;bottom: 0;margin: auto;height: 4rem;width: 4rem;font-size: 4rem;padding: 0;cursor: pointer;opacity: 1;transition: opacity 100ms; left: -50px;padding-left: 11px;padding-bottom: 7px;border-radius:2.2rem;align-items:center;text-align:center;"; //DOM BUTTON NEXT var sliderNavNext = document.createElement("button"); sliderNavNext.setAttribute("class", "slide-arrow"); sliderNavNext.innerHTML = "›"; sliderNavNext.setAttribute("id", "slide-arrow-next"); sliderNavNext.style.cssText = "color:white;border:2px solid; border-color:white;background-color: #ffffff00;z-index:10;position: absolute;display: flex;top: 0;bottom: 0;margin: auto;height: 4rem;width: 4rem;font-size: 4rem;padding: 0;cursor: pointer;opacity: 1;transition: opacity 100ms; right: -50px;padding-left: 13px;padding-bottom: 7px;border-radius: 2.2rem;align-items:center;text-align:center;"; //DOM SLIDER UL var sliderUl = document.createElement("ul"); sliderUl.setAttribute("class", "slides-container"); sliderUl.setAttribute("id", "slides-container"); sliderUl.style.cssText = "display: flex;list-style: none;margin: 0 auto;padding: 0;overflow: hidden;scroll-behavior: smooth;height: calc(100vh - 2rem);width: 100%;"; // Mobile Player init var divPlayerMobile = document.createElement("div") divPlayerMobile.style.width = "380px" var videoPlayerMobile = document.createElement("div"); videoPlayerMobile.setAttribute("id", "ugvplayer"); videoPlayerMobile.style.marginTop = "0.8rem"; videoPlayerMobile.style.aspectRatio = "16/9"; videoPlayerMobile.style.paddingBottom = "56.25%"; SDK.init( { type: "player", args: { key: playerKey, product: productSku, width: "100%", label: "playerMobile", }, }, videoPlayerMobile ); divPlayerMobile.appendChild(videoPlayerMobile) // EVENT LISTENER ctaContainer.addEventListener("click", function (i) { var scroll = document.querySelector("#sliderSkeepers"); scroll.scrollIntoView({ block: "end" }); //top of the player }); if (window.innerWidth < 600 ) { section.appendChild(divPlayerMobile) divContent.style.width = "450px"; 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) } else { let myArray = videos; for (let i = 0; i < videos.length; i++) { let videoArray = videos[i].id; // Slide init var slidePlayer2 = document.createElement("li"); slidePlayer2.setAttribute("class", "slide"); slidePlayer2.style.cssText = "width: 100%; height: 100%; flex: 1 0 100%;"; // Player init var videoPlayer = document.createElement("div"); videoPlayer.setAttribute("id", "ugvplayer"); videoPlayer.style.marginTop = "0.8rem"; videoPlayer.style.aspectRatio = "16/9"; videoPlayer.style.paddingBottom = "56.25%"; SDK.init( { type: "player", args: { key: playerKey, id: videoArray, width: "100%", label: videoArray, }, }, videoPlayer ); // HIERARCHY OF DISPAY slidePlayer2.appendChild(videoPlayer); sliderUl.appendChild(slidePlayer2); sliderSection.appendChild(sliderUl); sliderSection.appendChild(sliderNavPrev); sliderSection.appendChild(sliderNavNext); section.appendChild(sliderSection) } 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) const slide = document.querySelector(".slide"); sliderNavNext.addEventListener("click", () => { const slideWidth = slide.clientWidth; sliderUl.scrollLeft += slideWidth; }); sliderNavPrev.addEventListener("click", () => { const slideWidth = slide.clientWidth; sliderUl.scrollLeft -= slideWidth; }); } }); } }); });
Editor is loading...