Back to Top

Working with AlpineJs in Hyvä Themes

Updated 25 April 2024

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:-


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

Searching for an experienced
Magento 2 Company ?
Find out More


Dynamically set HTML attributes on an element

<div x-bind:class="! open ? 'hidden' : ''">

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


It listens for browser events on an element like click, keydown, keyup and many more

<button x-on:click="open = ! open">

we can run any JS expression or call the function by adding x-on attribute


Set the text content of an element

  Copyright ©
  <span x-text="new Date().getFullYear()"></span>

Here we can set the dynamic text with JS expression to the any HTML element


Set the inner HTML of an element

<div x-html="(await axios.get('/some/html/partial')).data">


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>

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.


Toggle the visibility of an element

<div x-show="open">


Repeat a block of HTML based on a data set

<template x-for="post in posts">
  <h2 x-text="post.title"></h2>


Conditionally add/remove a block of HTML from the page entirely.

<template x-if="open">


Run code when an element is initialized by alpine

<div x-init="date = new Date()"></div>

It works like a constructor in PHP


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)">

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


Hide a block of HTML until after alpine is finished initializing its contents

<div x-cloak>


Prevent a block of HTML from being initialized by alpine

<div x-ignore>

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

Debugging tools as per browser

Alpine Debugger for Chrome – 

Alpine Debugger for Firefox –

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home