Consent-Modul im Theme umsetzen

Logik, Nachweise und Runtime liefert Mosaio. Das Theme liefert das Aussehen: ein Banner-Snippet, den Widerrufslink und optional Platzhalter für eingebettete Inhalte. Themes ohne eigenes Snippet bekommen eine generische Systemfassung.

Die vier Tags

Fehlt {% consent_link %}, zeigt der Banner-Reiter im Dashboard eine Warnung. Ohne Widerrufslink können Besucher ihre Einwilligung nicht widerrufen.

Banner-Snippet

snippets/consent-banner.liquid braucht Banner und Dialog als Geschwister unter data-consent-root:

<div class="dc-consent dc-consent--{{ consent.layout }} dc-consent--{{ consent.position }}" data-consent-root>
  <div class="dc-consent-banner" data-consent-banner hidden>
    <p>{{ consent.texts.headline | escape }}</p>
    <p>{{ consent.texts.body | escape }}</p>
    <button class="dc-btn dc-btn--primary" data-consent-action="accept-all">{{ consent.texts.btn_accept_all | escape }}</button>
    {% if consent.mode == 'opt_in' %}
    <button class="dc-btn dc-btn--primary" data-consent-action="deny-all">{{ consent.texts.btn_deny_all | escape }}</button>
    {% endif %}
    <button class="dc-btn dc-btn--secondary" data-consent-action="open-dialog">{{ consent.texts.btn_settings | escape }}</button>
  </div>

  <div class="dc-consent-dialog" data-consent-dialog hidden role="dialog" aria-modal="true">
    {% for cat in consent.categories %}{% unless cat.code == 'unclassified' %}
    <label>
      <input type="checkbox" data-consent-toggle="{{ cat.code }}" {% if cat.code == 'necessary' %}checked disabled{% endif %}>
      {{ cat.name | escape }}
    </label>
    {% endunless %}{% endfor %}
    <button class="dc-btn dc-btn--primary" data-consent-action="save">{{ consent.texts.btn_save | escape }}</button>
    {% if consent.mode == 'opt_in' %}
    <button class="dc-btn dc-btn--primary" data-consent-action="deny-all">{{ consent.texts.btn_deny_all | escape }}</button>
    {% endif %}
    <button data-consent-action="close" aria-label="Dialog schließen">×</button>
  </div>
</div>

• „Alle ablehnen“ steht im Opt-in-Modus auf Banner- und Dialogebene – mit derselben Klasse wie „Alle akzeptieren“. Ein optisch untergeordneter Ablehnen-Knopf ist unzulässig.

• Die Kategorie unclassified erscheint nie als Schalter.

• Alle Texte mit | escape ausgeben.

CSS-Variablen

Das Snippet nutzt ausschließlich --dc-consent-primary, --dc-consent-primary-text, --dc-consent-bg, --dc-consent-text, --dc-consent-border und --dc-consent-radius. Nur so greifen die Farben aus dem Banner-Editor. Decke die Layoutklassen dc-consent--box|bar|center und alle Positionen ab; unter 640 px fällt jedes Layout auf „unten, volle Breite“ zurück.

Platzhalter für Drittinhalte

{% consent_placeholder service: 'youtube', title: 'YouTube-Video', height: '360px', category: 'marketing' %}
  <iframe width="100%" height="360" src="https://www.youtube-nocookie.com/embed/…" allowfullscreen></iframe>
{% endconsent_placeholder %}

Vor der Einwilligung findet kein Netzwerkaufruf statt. category: greift nur, solange der Dienst im Consent-Modul noch nicht angelegt ist. Ein eigenes snippets/consent-placeholder.liquid braucht Buttons mit data-consent-allow (dauerhaft erlauben) und data-consent-load-once (einmalig laden). Widerruft der Besucher, kehrt die Karte ohne Reload zurück.

Cookie-Erklärung

{% consent_declaration %}
{% schema %}
{ "name": "Cookie-Erklärung", "category": "Datenschutz", "enabled_on": { "groups": ["body"] }, "settings": [], "presets": [ { "name": "Cookie-Erklärung" } ] }
{% endschema %}