The texts in this article were partly composed with the help of artificial intelligence and corrected and revised by us. The following services were used for the generation:
In our first article on using Alpine.js in a production environment, we outlined a scenario where Alpine’s contexts can be used to map both local and global scopes over which data can be provided.
With this article, we would like to revisit and deepen this scenario. In this demonstration, we will implement a compliance solution for external content and store the user’s decisions temporarily or persistently.
Set up necessary utilities
Before we start designing the actual components, we need a simple function to read data from
localStorage or write data to it.
local() returns either an object created from the locally stored JSON value of the specified
key, or an empty object if no value for the specified
key was found in local storage.
Set up the global scope with
To be able to access the compliance state within the application, we design a new context for Alpine:
app. In the context of
app we store under
compliance the object from the local storage, respectively the empty object, insofar as the local storage has to be configured for the first time:
The method used here differs from our previous articles on Alpine.js and relies on a later import of the context
appin a global script file.
We then register our context
app for an element that will encompass all subsequent implementations of compliance:
In our example, we register our global context using the
<html> element, but
<body> or root elements for apps like
<div id="root"> can also be used.
Now that we have completed the necessary preparations for the local store and the global scope, we can start with the actual compliance implementations:
In the new context
compliance we declare the method
toggle() with the parameter
type, via which we want to capture the consent of the user:s in the future.
Our pre-declared method
local() helps us - if the user preference is not
'single', i.e. temporary - to store the collected data in the form of an object in local memory.
The corresponding HTML snippet placed in the application may look like the following and consists mainly of two sections:
- the user dialog for consent, controlled by
- and the content in the form of an iframe, whose external content is controlled by
Indexing of the components
To simplify access to the declared methods, we create an
index.ts in the Alpine directory and export the previously created files.
To integrate our new compliance snippet, we simply import Alpine.js and our methods for Alpine and register them in the
addEventListener callback for
Finally, we import the compiled script as a module into our project:
Alpine.js can be used to manage temporary and persistent states to implement a compliance solution for external content.