Read More
Read More
Menu Close

    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.

    alpinejsloadpic-1

    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

    Searching for an experienced
    Magento 2 Company ?
    Read More

    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

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top