Untitled

 avatar
unknown
plain_text
2 years ago
5.4 kB
10
Indexable
/*
 ** Author: Jack Toothill
 ** Company: Conversion
 ** Date: Jan 2023
 */
 (function (w) {
    "use strict";

    var tag = "cv-1-0",
        debug = document.cookie.indexOf("cfQA") > -1,
        window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;

    window[tag] = {
        log: function (msg) {
            if (debug) console.log("[CONV]", tag, "-->", msg);
        },

        waitForElement: function (cssSelector, callback) {
            var stop,
                elementCached,
                timeout,
                check = function () {
                    try {
                        elementCached = document.querySelector(cssSelector);

                        if (stop) return;

                        if (elementCached) {
                            callback(elementCached);
                            clearTimeout(timeout);

                            window[tag].log(cssSelector + " found");
                        } else {
                            window.requestAnimationFrame(check);
                        }
                    } catch (err) {
                        window[tag].log(err.message);
                    }
                };

            window.requestAnimationFrame(check);

            timeout = setTimeout(function () {
                stop = true;
                window[tag].log(cssSelector + " not found");
            }, 5000);
        },

        init: function () {
            try {
                this.waitForElement("body", function (docBody) {
                    docBody.classList.add(tag);
                });

                initVariation();

                window[tag].log("test running");
            } catch (err) {
                window[tag].log(err.message);
            }
        },
    };

    window[tag].init();

    function initVariation() {
        if(window.innerWidth > 768) {
            updateDesktop()
            return;
        }

        updateMobile();
    }

    function updateDesktop(){
        window[tag].waitForElement('div[class^="SearchBar-module_desktopSearchBar"]', (searchBar)=>{
            const cvHtml = `
                <div class="cv-container">
                    <img src="https://cfactory-img.s3.amazonaws.com/POC/zooplus/cv-cat.png" alt="" class="cv-img cv-cat">
                    <div class="cv-content">
                        <p class="cv-copy">Entdecken Sie eine große Auswahl an <br> hochwertiger Tiernahrung und Zubehör</p>
                    </div>
                    <img src="https://cfactory-img.s3.amazonaws.com/POC/zooplus/cv-dog.png" alt="" class="cv-img cv-dog">
                </div>
            `;

            document.querySelector('div[class^=HomeContainer_pageContainer]').insertAdjacentHTML('beforebegin', cvHtml);

            const copy = document.querySelector('.cv-copy');
            copy.insertAdjacentElement('afterend', searchBar);

            window[tag].waitForElement("div[data-component-name^='shopHeaderDeliveryInformation']", (element)=>{
                element.insertAdjacentHTML('beforebegin', '<img class="cv-truck" src="https://cfactory-img.s3.amazonaws.com/POC/zooplus/cv-truck.svg">')
            })

            var waitForHeader = setInterval(() => {
                const links = document.querySelectorAll("div[class^='TopBar-module_desktopSectionContainer']:nth-of-type(3) #shopHeaderAccountFlyout > a");
                const midContainer = document.querySelector('div[class^="MiddleBar-module_miniCartContainer"]');

                if(links.length < 3) return;

                if (
                    midContainer
                ) {
                    clearInterval(waitForHeader);
                    const oldHead = document.querySelector("div[class^='TopBar-module_desktopSectionContainer']:nth-of-type(3)");
                        
                    oldHead.classList.add('cv-new-header');
                    midContainer.before(oldHead);
                }
            }, 50);
        })
    }

    function updateMobile(){
        window[tag].waitForElement('div[class^="SearchBar-module_searchBarFlyout__"]', (searchBar)=>{
            const mobileHtml = `
                <div class="cv-mobile-content">
                    <p class="cv-copy">Entdecken Sie eine große Auswahl an hochwertiger Tiernahrung und Zubehör</p>
                </div>
            `
            searchBar.insertAdjacentHTML('afterbegin', mobileHtml);

            checkAppBanner();

            var targetNode = document.querySelector('body');
            var config = {childList: true, subtree: true };
            var observer = new MutationObserver(function(mutations){
                const navActiveMob = document.querySelector('[class*="BurgerNavigation-module_mobileBurgerNav"]');
        
                if(navActiveMob){
                    document.querySelector('#search_query_field_mobile').blur()
                }
        
                checkAppBanner();
            });
            observer.observe(targetNode, config);
        })
    }

    function checkAppBanner(){
        const appBanner = document.querySelector('[class*="SmartAppBanner-module_bannerWrapper"]');

        if(appBanner){
            document.body.classList.add('cv-1-0-app-banner-present')
        } else {
            document.body.classList.remove('cv-1-0-app-banner-present')
        }
    }
})(window);
Editor is loading...