Contao – nicht mein Lieblings-CMS. Das liegt aber daran, dass ich bisher nur eine Handvoll Projekte mit dem Open-Source-Projekt realisieren durfte. Dass mich als Webentwickler die DSGVO ganz schön mitgenommen hat, habe ich ja vor einer Weile schon berichtet. Vor ein paar Wochen habe ich eines dieser Contao-Projekte mit einem Cookie Hinweis ausgestattet und mich während der Entwicklung die ganze Zeit gewundert, warum der Einsatz des HTML-Moduls in eine Fehlerausgabe mündet.
Cookie Hinweis für Contao als Modul
Ich hatte mir überlegt einfach ein HTML-Modul mit dem Cookie Consent Script einzusetzen und dieses dann über die Layouts im Footer auszugeben. Der Inhalt dieses Moduls sah dann ungefähr so aus:
// Initialisierung von Cookie Consent
window.cookieconsent.initialise({
palette:{
popup: {background: "#333"},
button: {background: "#ffffff"},
},
content: {
header: 'Datenschutz',
message: 'Hinweis Text ...',
dismiss: 'OK',
link: 'mehr erfahren',
href: '/datenschutz.html',
close: 'x',
},
law: {
regionalLaw: false,
},
elements: {
header: '<span class="cc-header">{{header}}</span>[nbsp]',
message: '<span id="cookieconsent:desc" class="cc-message">{{message}}</span>',
messagelink: '<span id="cookieconsent:desc" class="cc-message">{{message}} <a aria-label="learn more about cookies" tabindex="0" class="button tiny cc-btn" href="{{href}}" target="_blank">{{link}}</a></span>',
dismiss: '<a aria-label="dismiss cookie message" tabindex="0" class="button tiny cc-btn cc-dismiss">{{dismiss}}</a>',
link: '<a aria-label="learn more about cookies" tabindex="0" class="button tiny cc-btn" href="{{href}}" target="_blank">{{link}}</a>',
}
});
Der Scriptcode weicht von dem Standard ab, da wir die Ausgabe mit der Definition der einzelnen Elemente beeinflussen wollten. Dafür hält das Cookie Consent Script einen Parameter bereit („elements“).
Cookie-Hinweis und Body-Klassen
Zusätzlich haben wir noch eine Default-Body-Klasse im Layout ergänzt („cookies-not-set“), welche wir unterhalb der Cookie Consent Initialisierung um eine Cookie-Prüfung ergänzt haben. Diese checkt, ob das Cookie Script akzeptiert wurde und entfernt die Body-CSS-Klasse anschließend. Dies ist übrigens nur aus Layoutgründen implementiert, damit wir durch den Cookie Hinweis nicht Elemente wie das Impressum überdecken und entsprechend die Paddings im Footer anpassen können.
// Check Cookie and remove Body Class
var cookies = document.cookie;
if(cookies.indexOf('cookieconsent_status') != -1) {
jQuery('body').removeClass('cookies-not-set');
}
Cookie-Hinweis und Inserttags
Nun zum eigentlichen Problemfall: Das Cookie Consent Skript arbeitet gewissermaßen mit eigenen Inserttags wie {{href}}, die leider mit der Inserttag-Konvention von Contao kollidieren. Eine richtig clevere Lösung konnte ich kurzfristig nicht finden, daher habe ich die Werte einfach direkt in die Element-Templates geschrieben:
elements: {
header: '<span class="cc-header">Datenschutz</span>[nbsp]',
message: '<span id="cookieconsent:desc" class="cc-message">Hinweis Text</span>',
messagelink: '<span id="cookieconsent:desc" class="cc-message">Hinweis Text <a aria-label="learn more about cookies" tabindex="0" class="button tiny cc-btn" href="/datenschutz.html" target="_blank">mehr erfahren</a></span>',
dismiss: '<a aria-label="dismiss cookie message" tabindex="0" class="button tiny cc-btn cc-dismiss">OK</a>',
link: '<a aria-label="learn more about cookies" tabindex="0" class="button tiny cc-btn" href="/datenschutz.html" target="_blank">mehr erfahren</a>',
}