Page 4 - Hyvä

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.

Multiple brands or country shops on the same Magento instance need different colors, fonts and sometimes even different layouts, yet want to share the same codebase. Clean Hyvä multi store theming with Tailwind CSS separates shared structure from store specific design tokens, instead of maintaining a full copy of the theme for every brand.

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.

A functional test confirms that a button stays clickable and a form still submits, but it says nothing about whether the very same interaction shifted two pixels or ended up with the wrong contrast after a Tailwind refactor. This article shows how to build visual regression testing with Playwright screenshots or Percy as its own test layer in the Hyvä theme, which pages actually make sense for the test scope, and how dynamic content like prices and dates stops corrupting snapshots for good.

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.

The Hyvä checkout is built from Alpine.js components with no Knockout.js and no UI components, styled entirely with Tailwind CSS utility classes. Knowing the right Hyvä checkout styling patterns for the step indicator, payment method selection and order summary helps you avoid layout shifts, unclear error states and inconsistent spacing between checkout steps.

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.

Slow bucket aggregations on the category page often cost more time than the actual rendering in Hyvä shops. Tuning facet count, the GraphQL query, and caching together brings layered navigation back to a speed that matches the rest of the frontend.