Magento 2 & Hyvä articles tagged “Alpine.js”: hands-on tutorials, fixes, and guides from Kishan Savaliya, an Adobe-certified Magento developer.
13 articles
2026 is the year hypermedia stopped being a contrarian take. HTMX 4.0 and the ~11 KB Datastar let you build reactive UIs by shipping HTML, not 300 KB of JavaScript, and they slot neatly into a Magento + Hyvä stack.
Customize a Hyvä theme without breaking the production build: the four layers a change can live in, the Tailwind pipeline end to end, and the purge bug that bites every team exactly once.
Every Magento + AI chatbot tutorial stops at the demo. This one builds the real thing on Magento 2.4.4-2.4.9 with Hyvä: an Alpine drawer that persists history to localStorage, a fetch ReadableStream SSE parser, a REST controller that proxies to Claude with cart context, a Zendesk handoff trigger, and a per-conversation cost cap that fires before the API bill spirals. Code, math, and the gotchas we hit shipping it.
Conditional checkout fields are the rule set that says "only show field A when condition B is true", and they look identical on Luma and Hyvä until you try to ship one. This is the production recipe for three real rules on both stacks: a Knockout subscribe on Luma, a Magewire $reactive plus Alpine x-show on Hyvä, plus the quote_extension_attributes wiring that keeps the value alive across page reload and 3DS redirect. The three rules ship together in roughly 38 hours on Magento 2.4.4-2.4.9 with Hyvä Checkout 1.1+.
Five Hyvä Checkout customizations that actually shipped on production Magento 2.4.4-2.4.9 stores: what the merchant asked for, what was tricky, and the code shape. Google Places address autocomplete bound to the Magewire shipping component via an Alpine.js bridge. CPF for Brazil / VAT for the EU as reactive Magewire fields with wire:model.live. Runtime carrier filtering through a collectShippingRates plugin. A post-purchase upsell Magewire component on the success page with one-click PayPal Express. Locale-aware date pickers via the Hyvä i18n partial. For each: the trigger, the file shape, the gotcha.
Surfacing BNPL options (Klarna, Affirm, Sezzle) in Magento checkout is not just a payment-method toggle: those gateways need the shipping country and cart total to decide eligibility, which means payment must become its own step that boots only after shipping is set. Here is the full Luma path (Knockout subscribe on setShippingInformation) and the Hyvä path (Magewire listener on shipping.updated), with server-side guards via Magento\Quote\Model\QuoteValidator and the gateway-eligibility cache layer that keeps the step responsive.
There are two honest ways to check whether a Magento extension is Hyvä-compatible, manual grep across the module source, and the hyva-themes/magento2-compatibility-checker CLI. Neither one catches everything. This post lists the exact bash one-liners I run against vendor/, walks through what the official Hyvä compat CLI flags and what it silently ignores (Magewire deps, GraphQL schema needs, form validation libs), and ends with the checklist I work through when the CLI prints "compatible" but the module still throws KO errors in the Hyvä storefront on Magento 2.4.4-2.4.9.
Generic Alpine.js docs do not tell you how to wire cart counts from PHP, why x-cloak is non-negotiable on PDP swatches, or how $dispatch lets an Alpine.js drawer talk to a Magewire form without a refresh. After shipping 40+ Hyvä modules across Magento 2.4.4-2.4.9, the same 10 patterns appear in nearly every one. This post walks through each, x-data hydrated from PHP, x-cloak flash-prevention, $store cross-component state, x-bind:class active tabs, x-on:click.outside drawers, x-intersect lazy loads, x-show transitions, x-html with DOMPurify, x-init with $watch + localStorage, and $dispatch for Magewire, with copy-pasteable snippets, when-to-reach-for-it notes, and the trap that bites first-time Hyvä devs.
Most Hyvä checkout customization tutorials stop at "render a field" and skip the backend plumbing that actually persists the value to the order. Here is a complete, copy-pasteable delivery_date field for Hyvä Checkout 1.2+ on Magento 2.4.4-2.4.9: the Magewire vs Alpine.js decision tree, the extension_attributes.xml declaration, the Magewire component class, the date input partial with HTML5 min/max constraints, the QuoteRepository save plugin, and the admin sales_order_view.xml display. Plus the gotcha that breaks guest checkouts: the date does not survive submitQuote without a second plugin.
Most Hyvä compatibility tutorials stop at "install hyva-themes/magento2-default-theme and pray". This one ports a real Luma-only filter extension, Mageplaza Layered Navigation, to Hyvä across five concrete phases with diffs at every step. Phase 1: composer require the compat-module shell. Phase 2: copy the phtml and strip Knockout data-bind. Phase 3: rebuild the live-filter UI in Alpine.js against the existing Magento AJAX endpoint. Phase 4: swap Luma selectors for Tailwind utility classes that follow the Hyvä theme tokens. Phase 5: a Magewire wire-up for the count badges that need server-side reactivity. Plus a decision matrix on when to ditch the port and buy the Hyvä Catalog Add-on instead.
