Google Maps Cookiebar Script (Twig Template) for CONTAO CMS

google_maps_cookiebar.html.twig

{#
    1. Store this file in the contao/templates/_new/content_element/template folder.
    2. Don't forget to add an empty .twig-root file to the "contao/templates/_new" folder.
    3. Clear the cache

    Configuration:
    a) Set the target id
    b) Set your cookiebar markup

    a)
    Determine here where the cookie banner will be injected in the layout.
    Let the variable empty to inject the cookiebar inside th body tag.

    <div id="box"></div> <!-- The cookiebar will be injected inside the element with the id 'box'
#}

{% set target = 'box' %}

{# b) Set your cookie markup here: #}
{% set cookie_banner = '
<div id="cookieBanner">
    <div id="cookieBannerInner">
        <div id="cookieConsentText">This site uses cookies to enhance your experience, personalize content and advertisements, and analyze traffic. We may share your information with our marketing and analytics partners. For further information, please review our <a href="">Privacy Policy</a>. By clicking "Accept", you agree to our use of cookies and similar technologies.</div>
        <div id="cookieBannerButtonGroup">
            <a href="javascript:void(0)" id="cookieBannerAcceptBtn"><span>Accept</span></a>
            <a href="/privacy"><span>privacy</span></a>
        </div>
    </div>
</div>
'|spaceless %}

{% if app.request.attributes.get('_scope')|default('') == 'frontend' %}



    <iframe id="gooMap" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d43503.52410060096!2d8.276053236727932!3d47.04081445493324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478ffa2a79547379%3A0xaef02ad1409952af!2sLuzern!5e0!3m2!1sde!2sch!4v1708548590852!5m2!1sde!2sch" width="600" height="450" style="display:none;border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    <script type="text/javascript">
        class CookieBanner {
            #options = {
                'cookieName': 'cookieConsent',
                'cookieValue': 'accepted',
                'cookieDuration': 14,
                'target': document.getElementsByTagName('body')[0],
            }

            constructor(options = {}) {
                this.#options = {
                    ...this.#options,
                    ...options,
                }
            }

            getOption(key) {
                return this.#options[key];
            }

            setOption(key, value) {
                return this.#options[key] = value;
            }

            showUnlessAccepted(html) {
                if (this.#checkCookie(this.getOption('cookieName')) !== this.getOption('cookieValue')) {
                    // There is no cookie, let's show the cookie banner
                    this.#createBanner(html);
                } else {
                    // cookie has been accepted
                    this.#dispatchCookieAcceptedEvent();
                }
            }

            createAcceptCookie() {
                this.#createCookie(this.getOption('cookieName'), this.getOption('cookieValue'), this.getOption('cookieDuration')); // Create the cookie
            }

            closeBanner() {
                const element = document.getElementById('cookie-law');
                element.parentNode.removeChild(element);
            }

            accept() {
                this.createAcceptCookie();
                this.closeBanner();
                this.#dispatchCookieAcceptedEvent();
            }

            #createBanner(html) {
                const target = this.getOption('target');
                const div = document.createElement('div');
                div.setAttribute('id', 'cookie-law');
                div.innerHTML = html;

                target.insertBefore(div, target.firstChild);
                target.classList.add('cookie-banner');

                if (this.getOption('createCookieWhenBarIsShown')) {
                    this.createAcceptCookie();
                }
            }

            #createCookie(name, value, days) {
                let expires;
                if (days) {
                    const date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    expires = "; expires=" + date.toUTCString();
                } else {
                    expires = "";
                }
                document.cookie = name + "=" + value + expires + "; path=/";
            }

            #checkCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];

                    while (c.charAt(0) === ' ') {
                        c = c.substring(1, c.length);
                    }

                    if (c.indexOf(nameEQ) === 0) {
                        return c.substring(nameEQ.length, c.length);
                    }
                }
                return null;
            }

            #removeCookie(name) {
                this.#createCookie(name, "", -1);
            }

            #dispatchCookieAcceptedEvent() {
                const event = new CustomEvent('CookieAccepted', {details: this});
                document.dispatchEvent(event);
            }
        }

        // Check if there is a valid cookie on domready
        document.addEventListener('DOMContentLoaded', () => {
            const cookieBannerMarkup = '{{ cookie_banner|raw }}';
            const targetId = '{{ target|default('') }}';
            let targetElement;

            if (targetId) {
                targetElement = document.getElementById(targetId);
                if (null === targetElement) {
                    targetElement = document.getElementsByTagName('body')[0];
                }
            } else {
                targetElement = document.getElementsByTagName('body')[0];
            }

            let options = {
                'target': targetElement,
            }

            // Show the cookie banner if there is no cookie
            const cookieBanner = new CookieBanner(options);
            cookieBanner.showUnlessAccepted(cookieBannerMarkup);

            // Set the cookie and hide the banner, when clicking the accept button
            const acceptBtn = document.getElementById('cookieBannerAcceptBtn');

            if (acceptBtn) {
                acceptBtn.addEventListener('click', () => cookieBanner.accept());
            }
        });

        // Load google maps (get the src from data-src
        document.addEventListener('CookieAccepted', () => {
            const elGooMap = document.getElementById('gooMap');
            if (elGooMap) {
                elGooMap.setAttribute('src', elGooMap.getAttribute('data-src'));
                elGooMap.style.display = 'block';
            }
        });
    </script>

{% endif %}