Working with AlpineJs in Hyvä Themes
An alpinejs is a lightweight javascript framework that contains same kind of data binding that we love in other js frameworks. Hyvä Themes uses only alpine js as its single js dependency as shown in the image below.
Benefits of Alpine Js
- lightweight js framework
- easy to learn and understand
- low file size having 8.77KB
- alpinejs Syntax is very much inspired by Vue
Following common attributes of alpine used by Hyvä Themes with explanation and example:-
x-data
It declares the new Alpine Component and its data for the HTML block
<div x-data="{open : false}"></div>
declares a new component scope. It tells the framework to initialize a new component with the following data object
x-bind
Dynamically set HTML attributes on an element
<div x-bind:class="! open ? 'hidden' : ''"> ... </div>
we can bind the value of a class or any other HTML attribute dynamically and also we conditionally set the value as shown in the example that if the value open is false then it will bind ‘hidden’ value to class or else it will not
x-on
It listens for browser events on an element like click, keydown, keyup and many more
<button x-on:click="open = ! open"> Toggle </button>
we can run any JS expression or call the function by adding x-on attribute
x-text
Set the text content of an element
<div> Copyright © <span x-text="new Date().getFullYear()"></span> </div>
Here we can set the dynamic text with JS expression to the any HTML element
x-html
Set the inner HTML of an element
<div x-html="(await axios.get('/some/html/partial')).data">
...
</div>
x-model
Synchronize a piece of data with an input element
<div x-data="{ search: '' }">
<input type="text" x-model="search">
Searching for: <span x-text="search"></span>
</div>
Here search will play the role of variable when we type any thing in the Input text then that value will be stored in search and that stored value will be shown in span tag using x-text attribute.
x-show
Toggle the visibility of an element
<div x-show="open"> ... </div>
x-for
Repeat a block of HTML based on a data set
<template x-for="post in posts"> <h2 x-text="post.title"></h2> </template>
x-if
Conditionally add/remove a block of HTML from the page entirely.
<template x-if="open"> <div>...</div> </template>
x-init
Run code when an element is initialized by alpine
<div x-init="date = new Date()"></div>
It works like a constructor in PHP
x-ref
Reference elements directly by their specified keys using the $refs magic property
<input type="text" x-ref="content"> <button x-on:click="console.log($refs.content.value)"> Copy </button>
As we type in the input field and on click of a button it will console log the refer elements value using $refs by using name declare in x-ref attribute
x-cloak
Hide a block of HTML until after alpine is finished initializing its contents
<div x-cloak> ... </div>
x-ignore
Prevent a block of HTML from being initialized by alpine
<div x-ignore> ... </div>
Hyvä 1.1.x is currently using Alpine.js version 2. Hopefully, an update to version 3 will be available for a future update. If you check the documentation of alpine js it will come up with version 3. So please refer to the documentation for version 2 https://github.com/alpinejs/alpine/tree/v2.8.2#readme
Debugging tools as per browser
Alpine Debugger for Chrome – https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk
Alpine Debugger for Firefox – https://addons.mozilla.org/en-US/firefox/addon/alpinejs-devtools/?src=recommended
Note: – As per Hyvä ‘s good practice, Scripts related to the particular .phtml file should be written in that .phtml file only to avoid render-blocking and if a large amount of JavaScript is needed, it of course can be moved to an external file.
In this blog, we learned the basics of the Alpine js, and this concept we will use at the time of module compatibility with Hyvä Themes
Previous blog Installation of Hyvä Themes in Magento 2.4.x
Next blog Working with TailwindCSS in Hyvä Theme