Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:
In unserem ersten Beitrag zur Verwendung von Alpine.js in einer Produktionsumgebung haben wir ein Szenario skizziert, in dem Alpine’s Kontexte verwendet werden können, um sowohl lokale als auch globale Scopes abzubilden, über die Daten bereitgestellt werden können.
Mit diesem Beitrag möchten wir dieses Szenario wieder aufgreifen und vertiefen. In dieser Demonstration werden wir eine Compliance-Lösung für externe Inhalte realisieren und die Entscheidungen der Nutzer:innen temporär oder persistent speichern.
Notwendige Utilities einrichten
Bevor wir mit der Gestaltung der tatsächlichen Komponenten beginnen, benötigen wir eine einfache Funktion, um Daten aus localStorage
zu lesen oder Daten dorthin zu schreiben.
local()
gibt entweder ein Objekt zurück, das aus dem lokal gespeicherten JSON-Wert des angegebenen key
erzeugt wurde, oder ein leeres Objekt, wenn kein Wert für den angegebenen key
im lokalen Speicher gefunden wurde.
Aufsetzen des globalen Scopes mit app
Um auf den Zustand der Compliance innerhalb der Applikation zugreifen zu können, konzipieren wir einen neuen Kontext für Alpine: app
. Im Kontext von app
speichern wir unter compliance
das Objekt aus dem lokalen Speicher, beziehungsweise das leere Objekt, insofern der lokale Speicher erstmals konfiguriert werden muss:
Die hier verwendete Methode weicht von unseren vorherigen Beiträgen zu Alpine.js ab und setzt auf einen späteren Import des Kontexts
app
in einer globalen Skript-Datei.
Unseren Kontext app
registrieren wir anschließend für ein Element, dass alle späteren Implementierungen der Compliance umfassen wird:
In unserem Beispiel registrieren wir unseren globalen Kontext über das Element <html>
, wobei aber auch <body>
oder Root-Elemente für Apps wie <div id="root">
verwendet werden können.
Aufbau der Compliance
Jetzt, wo wir die nötigen Vorbereitungen für den lokalen Speicher und den globalen Scope abgeschlossen haben, können wir mit der tatsächlichen Implementierungen der Compliance beginnen:
Im neuen Kontext compliance
deklarieren wir die Methode toggle()
mit dem Parameter type
, über die wir die Zustimmung der Nutzer:innen zukünftig erfassen wollen.
Unsere vorab deklarierte Methode local()
hilft uns hierbei - sofern die Präferenz der Nutzer:innen nicht 'single'
, also temporär ist - die erfassten Daten in Form eines Objektes im lokalen Speicher festzuhalten.
Das entsprechende HTML-Snippet, das in der Anwendung platziert wird, kann wie folgt aussehen und besteht im Wesentlichen aus zwei Abschnitten:
- dem Nutzerdialog zur Zustimmung, gesteuert durch
x-show="!compliance?.youtube"
- und dem Inhalt in Form eines Iframes, dessen externer Inhalt durch
x-bind
gesteuert wird
Indexierung der Komponenten
Um den Zugriff auf die deklarierten Methoden zu vereinfachen, erstellen wir eine index.ts
im Alpine-Verzeichnis und exportieren die zuvor erstellten Dateien.
Integration
Für die Integration unseres neuen Compliance Snippets importieren wir einfach Alpine.js und unsere Methoden für Alpine und registrieren diese im Callback des addEventListener
für alpine:init
.
Schließlich importieren wir das kompilierte Skript als Modul in unser Projekt:
TL;DR
Alpine.js kann verwendet werden, um temporäre und persistente States zu verwalten, um eine Compliance-Lösung für externe Inhalte zu realisieren.