TIL: How to create a super simple Cookie Consent Alpine.js component
For some time I have been searching for a simple way of creating a Cookie Consent banner.
It is super simple to just show or hide a div with some text about cookies. But in order to use analytics we have to be able to react to changes e.g. if the user accepts or declines cookies.
So I cooked up a simple Alpine component using @alpinejs/persist
to save the state and then Alpine.data
to do the logic and dispatch a custom event.
This is the JavaScript code for the component. It is super simple. It just shows a banner if we don’t know the state (accepted/rejected) otherwise it just hides the banner. When it is accepted/declined or initialized it will dispatch a custom event called cookieConsent
which can be used with a simple document.addEventListener('cookieConsent', function () {})
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
Alpine.plugin(persist)
document.addEventListener("DOMContentLoaded", function () {
Alpine.start()
})
document.addEventListener("alpine:init", function () {
Alpine.data('cookieConsent', () => ({
state: Alpine.$persist('unknown').as('cookieConsent'),
init() {
this.dispatchEvent()
},
dialogue: {
['x-show']() {
return this.state == 'unknown'
}
},
accept: {
['@click']() {
this.state = 'accepted'
this.dispatchEvent()
}
},
decline: {
['@click']() {
this.state = 'declined'
this.dispatchEvent()
}
},
dispatchEvent() {
document.dispatchEvent(new CustomEvent('cookieConsent', {
detail: this.state
}))
}
}))
})
We also need some HTML for this. Fortunately this is also very simple and can be customised however you see fit
<!-- Borrowed from https://tailwindflex.com/sophia-baker/cookie-consent -->
<div x-data="cookieConsent" x-cloak>
<div x-bind="dialogue" class="fixed bottom-0 p-6 w-full flex justify-center z-[2000]">
<div class="bg-white bg-opacity-95 text-xs rounded-md fade w-[450px] show">
<div class="p-4 flex items-center justify-between px-6 rounded border border-green-700">
<p>
By using XYZ, you agree to our
<a class="underline font-bold" href="#" target="_blank">Cookies Policy.</a>
</p>
<button x-bind="decline" type="button" class="px-5 py-3 rounded-lg text-white bg-red-700 hover:bg-red-800 ml-1.5 min-w-max">Decline</button>
<button x-bind="accept" type="button" class="px-5 py-3 rounded-lg text-white bg-green-700 hover:bg-green-800 ml-1.5 min-w-max">Accept</button>
</div>
</div>
</div>
</div>
Thats it!