django-commons/django-cookie-consent

{% all_cookie_groups 'cookie-consent__cookie-groups' %}

Closed this issue · 5 comments

Is there a trick to getting the tag 'all_cookie_groups' to work?

At the moment I am getting an error 'Invalid block tag' for {% all_cookie_groups 'cookie-consent__cookie-groups' %}.

To confirm, I have the following essentials in my template:
{% load static %}
{% load cookie_consent_tags %}
{% all_cookie_groups 'cookie-consent__cookie-groups' %}

I have looked in cookie_consent_tags.py and the tag doesn't appear to exist.

Everything else's is set up correctly :
django-cookie-consent 0.4 installed
urls.py - path("cookies/", include("cookie_consent.urls"))
Migrated and cookiegroup populated.
Django 4.2 and Django-cookie-consent 0.40

I note that all_cookie_groups is present as a tag in 0.5.0-beta

Does installing that beta resolve your issue?

You can find the instructions here: #15 (comment)

Yes it does - thank you.
One, question - I am trying to integrate a bootstrap modal (instead of the
<template id="cookie-consent__cookie-bar"> option) without much success, can you offer any suggestions on how I would do this?

I got the bootstrap modal to work (rightly or wrongly?) as follows:

in the html template:

{% load static cookie_consent_tags %}
{% static "test_app/cookiebar.module.js" as cookiebar_src %}
{% url 'cookie_consent_status' as status_url %}
{% all_cookie_groups 'cookie-consent__cookie-groups' %}

<script type="module">
    import {showCookieBar} from '{{ cookiebar_src }}';

    $(document).ready(function () {
        showCookieBar({
            statusUrl: '{{ status_url|escapejs }}',
            templateSelector: '#cookie-consent__cookie-bar',
            cookieGroupsSelector: '#cookie-consent__cookie-groups',
            onShow: () => {$('#cookieModal').modal('show');},
            onAccept: () => $('#cookieModal').modal('hide'),
            onDecline: () => $('#cookieModal').modal('hide'),
        });
    });
</script>

<template id="cookie-consent__cookie-bar">
    <!-- Cookie Consent Modal -->
    <div class="modal fade" id="cookieModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-gdpr">
            <div class="modal-content">
                <div class="modal-body">
                    <strong>Allow optional cookies?</strong>
                    <p>Accepting optional cookies helps us provide a better experience, improve our products, and
                        tailor our marketing.
                        For more information read our cookie policy.</p>
                </div>
                <button type="button" class="btn btn-success cookie-consent__accept">Accept</button>
                <button type="button" class="btn btn-outline-info cookie-consent__decline">Decline</button>
            </div>
        </div>
    </div>
    <!-- Cookie Consent Modal -->
</template>

In cookiebar.module.js
Changing the end of the file from:

// grab the contents from the template node and add them to the DOM, optionally
   // calling the onShow callback
   const cookieBarNode = templateNode.content.firstElementChild.cloneNode(true);
   registerEvents(cookieBarNode, cookieGroups);
   onShow?.();
   doInsert(cookieBarNode);
};

to:

    // grab the contents from the template node and add them to the DOM, optionally
    // calling the onShow callback
    const cookieBarNode = templateNode.content.firstElementChild.cloneNode(true);
    registerEvents(cookieBarNode, cookieGroups);
    onShow?.();
    doInsert(cookieBarNode);

    // Use setTimeout to defer execution of onShow until rest of synchronous code finished
    setTimeout(() => {
        onShow?.();
    }, 0);

};

Version 0.6.0 is now published, with the Javascript fix that should make the bootstrap modal work out of the box now!