Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
10 kB
1
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'
            }
        });
    });