Download the PHP package pixelpoems/silverstripe-vanilla-cookieconsent without Composer

Silverstripe / Vanilla Cookie Consent

This module adds a simple cookie consent banner to your Silverstripe website. It uses the CookieConsent v3 script. You can use it with the Fluent translation module.

• Requirements
• Installation
• Configuration
• Custom Styling
• Translations
• Reporting Issues
• Credits

Requirements

• Silverstripe CMS ^6
• Silverstripe Framework ^6

Installation

Use Tag ^1 for Silverstripe ^4.0 - ^5.0

For Silverstripe ^6 use Tag ^2

Configuration

Template

If you want the cookie config in consent mode include the template like this:

The other option is to pass the config via the body tag like this:

The consent will NOT be displayed on "Security" Pages (Login, Register, ForgotPassword, ResetPassword) and on the Admin Area. Furthermore, you can hide it on specific pages by checking the "Hide Cookie Consent" checkbox in the CMS (Page Settings).

If you want to add an "Open Modal" button you can add this in your template:

JavaScript Customization

If you not want to use the default js (for example if you want to use the script in a different way or display it after you asked for the language or something else) you can disable the default js by adding the following to your project:

Include the script in your template:

or your PageController:

In your js file:

In your yml config:

YML Configuration

You can configure the cookies via the YML config. The following options are available:

If you want to update or add the storage of a specific cookie in your cookie table, you have to do this via the lang yml files:

The Base Translations for those are already included in the module. If you want don't want to use the video category you can add the cookies to analytics or create a new category, but attention, then you need to add the translations for the new category and the cookies.

Script Management

Available script Attributes

According to orestbida.com there are the following script attributes available:

data-category: name of the category

data-service (optional): if specified, a toggle will be generated in the preferencesModal

data-type (optional): custom type (e.g. "module")

data-src (optional): can be used instead of src to avoid validation issues

Example usage:

For further information have a look at the Cookie Consent Documentation - Script Management

iFrames

This module comes with an iFrame solution for the video category.

If you want to use the iFrame solution you need to add the following to your yml config:

TinyMCE Fields

If you add an embed in your TinyMCE for the DBHTMLTexts you there is an Extension witch preps the iframe for the usage of the iframemanager script. In your template just call: $HTML.Embeded - this will update the html so that the iframemanager can do the rest automatically.

DNA Design Element

This Module comes with an Video Element for DNA Design. If you want to overwrite the template just copy the file from the module to your theme and adjust it to your needs (templates > DNADesign > Elemental > Layout > VideoElement.ss) Within this element a video can be added via youtube, vimeo, yumpu or a simple upload.

You can edit the allowed embeddable services in the config:

Also add a video category to your consent categories so the consent can handle the services:

So your full config for the iframe looks like this:

Vanilla Usage

If you want to use the iFrame solution without the DNA Design Element you can use the following code:

Only IFrameManager (without Cookie Consent Modal)

If you want to use the IFrame without the cookie Consent you can disable the modal like this in your yml:

! Attention: Make sure that the default_lang and the languages are stil defined so that the info strings are displayed in the correct language. Furthermore if no categories or services defined - all of the possibilities are added to the iframe manager if this is enabled. Furthermore make sure you add the CCConfig to your body.

For further information have a look at the Cookie Consent Documentation - iFrameManager

Custom Styling

If you want to overwrite the default styling which are loaded from the js library, you can do this by adding the following CSS to your project:

Or have a look here: https://cookieconsent.orestbida.com/advanced/ui-customization.html

Translations

You can add your own translations or overwrite the existing ones by adding the following to your project look into the existing translations here translations

For your custom categories and cookies you can add your translations like this:

For basic description and a cookie listing you can have look at the Open Cookie Database

If you want to translate the texts in the modal and the first section in the preferences window you need to make sure that the Fluent Extension is added to the SiteConfig like this (the fields are already registered for translation in the module):

Reporting Issues

Please create an issue for any bugs you've found, or features you're missing.

Credits

Cookie Consent from https://cookieconsent.orestbida.com/ Cookie Descriptions from https://jkwakman.github.io/Open-Cookie-Database/open-cookie-database.html

ToDos

• [ ] Add custom styling instructions