Start Working with Alpine.js in Hyva themes

In Hyva theme, it uses Alpine JS for DOM reactivity and tailwind for CSS styling.

Alpinejs is a lightweight JavaScript framework that contains the same kind of data binding that we love in other JS frameworks. 

Hyvä Themes uses only Alpine JS as its single JS dependency.

What is Alpine.js?

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

AlpineJS homepage: https://alpinejs.dev/

It comprises 15 attributes, 6 properties, and 2 methods.

There is no build process unlike of VueJS, React, many nodeJS based frameworks.

Though, it is similar to VueJS when writing syntax.

If you have the latest version of Hyva theme, then you can take advantage of AlpineJS v3. Though, if your hyva theme is older than you have to use AlpineJS V2.

In a seminar, William Wigwam said that by dropping jQuery and replacing it with AlpineJS changed the performance of the page. They do not recommend using jQuery and jQuery plugins in hyva themes.

They recommend using AlpineJS, so the DOM is reactive with the component. Either pure JavaScript if AlpineJS is not possible.

Like every programming language, AlpineJS has state, templating, events, and lifecycle.

Benefits of Alpine Js

• lightweight JS framework
• easy to learn and understand
• low file size, having 15.6KB
• AlpineJs syntax is very much inspired by Vue
• Plugin extensible
• Reusable UI components

New to Hyvä?? Learn about the Hyvä Theme from basics!

x-data

We can declare a new Alpine Component scope and its data for the HTML block.

It tells the framework to initialize a new component with the following data object.

<div x-data="{ open: false }">
   ...
</div>

X-init

It will initialize the component after x-data is triggered.

<div
   x-data="{ posts: [] }"
   x-init="posts = await (await fetch('/posts')).json()"
>...</div>

x-bind

x-bind allows you to set HTML attributes on elements based on the result of JavaScript expressions.

x-on

It can attach events with the elements like button, Input, etc.

<button x-on:click="alert('Hello World!')">Say Hi</button>

x-text

It can show text data stored in a component to any element.

<div x-data="{ username: 'calebporzio' }">
   Username: <strong x-text="username"></strong>
</div>

x-html

It can show HTML data in a component to any element.

<div x-data="{ username: '<strong>calebporzio</strong>' }">
   Username: <span x-html="username"></span>
</div>

x-model

It binds the value of an input element to Alpine data.

<div x-data="{ message: '' }">
  <input type="text" x-model="message">

  <span x-text="message">
</div>

X-for

It creates DOM elements by iterating through a list of arrays or objects.

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
   <template x-for="color in colors">
       <li x-text="color"></li>
   </template>
</ul>

<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
   <template x-for="(value, index) in car">
       <li>
           <span x-text="index"></span>: <span x-text="value"></span>
       </li>
   </template>
</ul>

x-if

It shows/hides the DOM element on the condition matching with the variable in the data.

Here to use x-if, <template> tag is required otherwise it will throw errors.

<template x-if="open">
   <div>Contents...</div>
</template>

x-show

It shows/hide the DOM element with inline display CSS. It works without a template tag.

<div x-data="{ open: false }">
   <button x-on:click="open = ! open">Toggle Dropdown</button>
 
   <div x-show="open">
       Dropdown Contents...
   </div>
</div>

x-ref

It will create a ref to a DOM element with an alias name. It can be used in any component.

<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hello 👋</span>

x-cloak

Sometimes, your component’s HTML is showing before AlpineJS is initialized, so we can hide it with this.

After the AlpineJS is initialized, it will remove the x-clock and show your components.

CSS:

[x-cloak] { display: none !important; }

Your HTML here

<span x-cloak x-show="false">This will not 'blip' onto screen at any point</span>

x-ignore

By default, Alpine will crawl and initialize the entire DOM tree of an element containing x-init or x-data.

If for some reason, you don’t want Alpine to touch a specific section of your HTML, you can prevent it from doing so using x-ignore.

<div x-data="{ label: 'From Alpine' }">
   <div x-ignore>
       <span x-text="label"></span>
   </div>
</div>

For writing AlpineJS in your favourite editor like PHP Storm, or VS Code, you can try these plugins:

• PHP STORM
• VS Code 

Here are some tools to debug AlpineJS in the browser:

• Alpine Debugger for Chrome 
• Alpine Debugger for Firefox 

Thank you.

More resources on Hyva themes:

• Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
• Hyva Themes Development – For Online Merchants
• Hyvä Theme Benefits that your store needs
• 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
• Hyvä VS PWA: Where to Invest?
• How a Slow Magento Website Can Cost You Advertising Dollars
• Mobile Commerce: How Hyva Themes Boost Mobile Conversions