Creating a Custom Hyvä Alpine.js Plugin

Create a custom inline Alpine.js plugin for your Hyvä theme. For detailed plugin development, refer to the official Alpine.js documentation on extending Alpine.js.

Step 1: Create the Plugin File

Create a .phtml file in your module's view/frontend/templates directory:

app/code/Acme/Module/view/frontend/templates/page/js/plugins/custom.phtml

Step 2: Add the Plugin Code

Add your Alpine.js plugin code within <script> tags inside `custom.phtml`. Use this boilerplate:

<script>
    (() => {
        const yourPlugin = (alpine) => {
            alpine.directive('your-directive', (el, { expression }, { evaluate }) => {
                console.log(evaluate(expression));
            });
        };

        document.addEventListener("alpine:init", () => {
            window.Alpine.plugin(yourPlugin);
        });
    })();
</script>

Customize the yourPlugin constant with your logic or an existing plugin's code.

Step 3: Load the Plugin via Layout XML

Load your plugin by adding this block to your theme's layout XML (e.g., default.xml):

<referenceBlock name="script-alpine-js">
    <block name="alpine-plugin-custom" template="Acme_Module::page/js/plugins/custom.phtml"/>
</referenceBlock>

This injects your script after Alpine.js initialization, making your plugin available on all pages with the script-alpine-js block.