statikbe/craft-cookie-banner

Cookie banner and modal package

5.0.3 2024-11-21 14:34 UTC

Requires

• craftcms/cms: ^5.0.0
• jaybizzle/crawler-detect: ^1.2

Requires (Dev)

• craftcms/ecs: dev-main
• craftcms/phpstan: dev-main

MIT

• Statik
• Jan Henckens

• cms
• cookies
• Craft
• craftcms
• craft-plugin
• gdpr

README

This is an internal Statik.be plugin for use with our Tag Manager consent management solution.

⚠️ The plugin will only render templates out of the box, it won't do anything to prevent tracking without proper configuration.

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

To install the plugin, follow these instructions:

cd /path/to/project
composer require statikbe/craft-cookie-banner
./craft  plugin/install cookie-banner

Usage

The plugin uses a Twig function to render the initial popup and the cookie settings modal.

{{ craft.cookieBanner.render() }}

You can also pass an array of options:

• modal: path to the template for the modal
• banner: path to the template for the banner
• overlay: HTML string with styling that will you use as overlay behind the banner
• supportIE: wether or not the Javascript used should be compiled for ES6 or ES5 (defaults to false so using ES6)
• cookiePage: the entry where the cookie policy content is defined. This is used on the modal template to show the possible settings.

For example:

{{ craft.cookieBanner.render({
        modal: '_site/_snippet/_cookie/_modal',
        banner: '_site/_snippet/_cookie/_banner',
        overlay: '<div class="fixed inset-0 hidden bg-black opacity-80 z-99" id="cookiebanner-overlay"></div>',
        supportIE: true,
        cookiePage: craft.entries.section('cookiePolicy').one(),
        showCookieBanner: (entry.type is defined and entry.type.handle != 'cookiePolicy')
}) }}

It's adviced to not overwrite the templates just for styling, only for more fundamental and structural changes.

Modal, banner and overlay templates have generic classes that can be used for styling.

To trigger the settings modal after closing the cookie banner, you can use the following code:

<a href="#" class="js-cookie-settings" role="button">{{ 'Cookie settings'|t }}</a>

Listeners

You can listen to the following events:

cookie-banner-opened
cookie-closed
cookie-modal-opened
cookie-prop-performance-disabled
cookie-prop-performance-enabled
cookie-prop-marketing-disabled
cookie-prop-marketing-enabled

Example:

window.addEventListener('cookie-closed', () => {
  console.log('cookie-closed');
});