Page 2 - Hyvä

Anyone who wants to register a custom payment method in the Hyvä checkout will not get far with the classic Knockout renderer lists from the Luma checkout. Hyvä checkout resolves payment templates through block aliases in layout XML, while all form logic is built entirely with Alpine.js, phtml templates and PHP view models. This article walks through the full path from the payment method model to template registration, Alpine validation and server-side hooks, all the way to PCI compliance considerations for Magento 2.4.8-p4.

Serving a generic error message with an HTTP status of 200 for a URL that does not exist quietly costs both search engine trust and real users. This article shows how to properly implement 404 and 500 error pages in the Hyvä theme, from the noroute controller through the correct HTTP status code to an Nginx fallback for when PHP-FPM itself stops responding.

How shipping methods in checkout are presented often decides between an abandoned cart and a completed order. In the Hyvä checkout, a lean Alpine.js component that loads its data through a GraphQL availableShippingMethods query replaces the Knockout shipping-rates component. Anyone customizing shipping methods in the Hyvä checkout works with shipping-methods.phtml, ViewModels and custom carrier models instead of uiComponents, observables and RequireJS modules, and gets card layouts, delivery estimates, free shipping thresholds and click and collect as reactive, maintainable building blocks in return.

Hyva has no Knockout viewmodels and therefore no classic JavaScript unit test layer the way Luma themes had it. Building a testing strategy for Hyva themes means rethinking the test pyramid itself: PHPUnit checks the PHP logic behind the ViewModels, PHPStan catches type errors before a single test even runs, and Playwright covers exactly the Alpine.js interaction in a real browser for which Hyva simply has no meaningful unit test layer.

A robust reorder function does more than blindly copy order items into the cart: it checks before the click whether products are still sellable, surfaces missing items transparently, and lets customers decide consciously, through an Alpine.js confirmation dialog, which items are actually reordered, all backed cleanly by a controller, a ViewModel, CSRF protection and CSP-compliant scripts.

A third-party module shows only a placeholder in the Hyvä theme because its frontend still relies on Knockout.js, UI components and RequireJS widgets. Anyone who wants to use it permanently and performantly needs to make it Hyvä compatible: rewrite templates as phtml with Alpine.js, replace LESS with Tailwind utilities and register every script CSP compliant. This article covers the concrete process and the realistic effort involved.

Anyone planning a new Magento storefront eventually faces the same fundamental question: Hyva or PWA Studio. One approach renders PHP directly inside the Magento monolith, the other fully decouples frontend and backend and communicates exclusively through GraphQL. This article compares architecture, hosting effort, performance, team skillset and extensibility concretely, and shows when each approach actually makes sense.

Anyone who builds a new Alpine component for every modal dialog in a Hyvä theme multiplies maintenance effort and bugs around focus handling, the Escape key and z-index. This article shows how a single generic Alpine modal component, driven by Alpine.store, powers both a login popup and a product size chart on the PDP at the same time, including x-teleport against overflow clipping, focus trap, Escape and click-outside handling, and a CSP-safe implementation with registerInlineScript.

A Hyvä theme follows its own directory structure and build approach: registration.php and theme.xml declare the package, web/tailwind/ carries the single real build step, and Alpine.js runs directly in the template with no compile step. Once you understand Hyvä theme architecture, you can find your way around any Hyvä project immediately.

Anyone who implements swatches for configurable products as mere color boxes without a well thought out state model ends up with price, gallery, and stock bugs on the product detail page. A clean Alpine.js state machine, a proper ViewModel, and a GraphQL-ready data model make Hyvä swatches robust, accessible, and cache friendly at the same time.