flowbox-pdp.html

<style>
    .flowbox-container h2 {
        font-size: 30px;
        font-family: "KwantumSansWebBold", "KwantumSansWebBook", Arial, sans-serif;
        margin-bottom: 10px;
        display: none;
    }

    .flowbox-container h3 {
        font-family: "KwantumSansWebBook", Arial, sans-serif;
        font-size: 20px;
        margin-bottom: 40px;
        display: none;
    }

    .flowbox-container h3::after {
        content: "\E015";
        font-size: 13px;
        font-family: "hfgicon";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        margin-left: 10px;
        color: #ee7f00;
    }
</style>
<div class="flowbox-container flowbox-container--topspacing flowbox-container--bottomspacing">
    <div class="row">
        <div class="small-12 medium-12 large-12 columns">
            <h2>Zó staat-ie!</h2>
            <h3>#Kwantuminhuis</h3>
            <div id="js-flowbox-flow" style="min-height: 250px; width: 100%; position: relative">
                <div class="custom-loader__loading rotate" style="position: absolute"></div>
            </div>
        </div>
    </div>
</div>
<script>
    // Container div the flowbox needs to be rendered in
    const containerId = "#js-flowbox-flow";
    // Flowbox flow key
    const key = "2vkzHCHySqi_6a0Fn5ZmLA";

    const loadScript = () => {
        (function (d, id) {
            if (!window.flowbox) {
                var f = function () {
                    f.q.push(arguments);
                };
                f.q = [];
                window.flowbox = f;
            }
            if (d.getElementById(id)) {
                return;
            }
            var s = d.createElement("script"),
                fjs = d.scripts[d.scripts.length - 1];
            s.id = id;
            s.async = true;
            s.src = "https://connect.getflowbox.com/flowbox.js";

            //Init flowbox component when the script is loaded
            s.addEventListener("load", () => {
                window.flowbox("init", {
                    container: containerId,
                    key: key,
                    locale: "auto",
                    productId: "0221056",
                });
            });
            fjs.parentNode.insertBefore(s, fjs);
        })(document, "flowbox-js-embed");
    };

    const watchIntersection = () => {
        const callback = (entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    loadScript();
                    observer.disconnect();
                }
            });
        };

        const observer = new IntersectionObserver(callback, {
            rootMargin: "400px",
            threshold: 0.1,
        });

        const target = document.querySelector(containerId);
        observer.observe(target);
    };

    // Watch mutations on the container to see if there are items getting loaded in
    const watchMutation = () => {
        const displayTitles = () => {
            const title = document.querySelector('.flowbox-container h2').style.display = 'block';
            const subtitle = document.querySelector('.flowbox-container h3').style.display = 'block';
        }

        const callback = function (mutationsList, observer) {
            for (const mutation of mutationsList) {
                if (mutation.type === "childList") {
                    if(mutation.addedNodes.length > 0 ) {
                        displayTitles();
                        mutationObserver.disconnect();
                    }
                }
            }
        };

        const mutationObserver = new MutationObserver(callback);
        const target = document.querySelector(containerId);
        mutationObserver.observe(target, {attributes: true, childList: true, subtree: true});
    };

    watchIntersection();
    watchMutation();
</script>