Tag: Hyvä

1. Extending the Hyvä Customer Account Dashboard: Custom Tabs with a ViewModel and Alpine.js

   Apr 27, 2026

   A custom loyalty points tab in the customer account dashboard shows exactly how to extend Magento_Customer cleanly: a layout XML addition for the sidebar navigation, a controller with proper customer authentication, a ViewModel for the data and Alpine.js for filtering and detail views without a page reload, all without copying a single core template.

   Read more

2. Building Custom Alpine Components for Hyvä Templates: A Structured Approach

   Apr 10, 2026

   Anyone who solves every interaction with a quickly hand-rolled x-data object in the template builds an unmaintainable tangle of business logic and markup over the course of months. Custom Alpine components built with Alpine.data(), a clean naming convention, safe PHP data passing and Alpine.store() for shared state make Hyvä frontends testable, reusable and CSP-compliant instead, even when a second or third module needs the same interaction.

   Read more

3. Hyvä Block Cache Strategy: Setting Cache Tags Right Without Breaking the Full Page Cache

   Mar 30, 2026

   Block cache and full page cache are two independent cache layers, and confusing them produces either data leaks between customers or a cache that gets fully rebuilt over the smallest change. This Hyva block cache strategy shows how cache_lifetime, getIdentities() and targeted invalidation cleanly work together on Magento 2.4.8 with PHP 8.4, without breaking the full page cache.

   Read more

4. Organizing SVG Icon Sprites in the Hyvä Theme

   Mar 20, 2026

   Anyone who copies every icon as a full inline SVG into each phtml template in a Hyvä theme bloats the DOM unnecessarily and makes later changes to the icon set harder. SVG icon sprites solve this problem by defining every icon shape only once and reusing it across as many places in the theme as needed through a simple reference. This article shows how to build, optimize, generate and accessibly wire up SVG icon sprites in a Hyvä theme, including a concrete Node build script, an SVGO configuration and a reusable icon partial.

   Read more

5. CSS Purge in Hyvä Themes: From 3 MB to a Few KB

   Mar 16, 2026

   A freshly scaffolded Hyvä theme ships a CSS bundle of several megabytes in development mode, because Tailwind CSS deliberately does not purge in watch mode. The CSS purge step in the production build scans every phtml and Alpine.js file for class names actually in use and shrinks the stylesheet down to a few kilobytes, provided dynamic class names are handled correctly and the deploy sequence runs cleanly.

   Read more

6. Terms and Conditions Checkbox in the Hyvä Checkout, Done Right

   Feb 26, 2026

   A single, pre-checked, or combined terms and conditions checkbox at checkout is a legal risk that gets worse in a Hyvä theme when server-side validation is missing. This article shows how such a mandatory field is implemented on top of Magento's checkout_agreements mechanism, an extended Alpine.js component for multiple mandatory fields, and a server-side PHP plugin, so customers must actively consent and an order cannot complete without a genuine confirmation.

   Read more

7. Customizing the Hyvä Minicart: Behavior and Presentation

   Feb 23, 2026

   The Hyvä minicart replaces Knockout templates and customer-data sections with a lean Alpine.js component model that loads its data directly through a GraphQL cart query. Anyone customizing it works with minicart.phtml, Alpine state and layout XML instead of Knockout observables, RequireJS modules and UI components, and gets a component that can be extended in a targeted way: icon, slide-in behavior, cross-sell content and quantity changes.

   Read more

8. Implementing B2B Features in the Hyvä Theme

   Jan 26, 2026

   Magento B2B ships company management, approval workflows, negotiable quotes and requisition lists by default as Luma components built on Knockout.js and UI components, none of which work in a Hyvä theme because Hyvä removes exactly this layer. Anyone who still wants to map B2B features cleanly in the frontend needs ViewModels for the company context, Alpine.js for interactive states, and targeted layout XML overrides of the Luma templates.

   Read more

9. Hyvä GraphQL Queries in the Frontend: Build and Cache Them

   Jan 23, 2026

   Anyone building custom frontend blocks in a Hyvä theme, product recommendations, bespoke widgets or filter logic, will eventually need custom Hyvä GraphQL queries. Structured correctly, preloaded server-side and cached on multiple layers, they deliver fresh data quickly without putting the Full Page Cache or page speed at risk.

   Read more

10. Setting Up CSP in Hyva: registerInlineScript and Co

    Jan 14, 2026

    Anyone who adds an inline script to a Hyva template without the right pattern will eventually see a blocked execution in the browser console instead of a working Alpine widget. CSP in Hyva rests on a clear interplay between Magento_Csp, the HyvaCsp ViewModel, csp_whitelist.xml and a hash mechanism that makes full page cache and a strict Content Security Policy possible at the same time. This article walks through every building block with real code from Magento 2.4.8 and PHP 8.4.

    Read more