Con il rilascio di Hyvä theme 1.4 e delle successive versioni 1.4.x, il frontend Magento 2 compie un salto importante in termini di performance, modernizzazione e gestione del CSS. Non si tratta di un semplice aggiornamento incrementale: alcune scelte architetturali introducono cambiamenti che vanno compresi e gestiti con attenzione, soprattutto in presenza di personalizzazioni o moduli di terze parti.
In questo articolo riassumiamo i cambiamenti introdotti da Hyvä 1.4, integrando le informazioni ufficiali provenienti dalla documentazione Hyvä e l’analisi di compatibilità pubblicata da Amasty.
Le principali novità di Hyvä 1.4
Supporto a bfcache e navigazione più fluida
Hyvä 1.4 introduce il supporto alla back/forward cache del browser (bfcache), migliorando sensibilmente la velocità percepita quando l’utente naviga avanti e indietro tra le pagine del sito.
A questo si affianca l’integrazione stabile delle speculation rules e delle view transitions, che permettono prefetch mirati e transizioni visive più fluide tra le pagine.
Miglioramenti al reset di base e TTFB
Il precedente pacchetto hyva-themes/magento2-reset-theme viene sostituito dal nuovo hyva-themes/magento2-base-layout-reset. Questo cambiamento riduce il numero di layout XML caricati in fase di cold cache, con benefici diretti sul time to first byte.
Tailwind CSS v4 e nuovo approccio css-first
Uno dei cambiamenti più rilevanti di Hyvä 1.4 è l’adozione di Tailwind CSS v4. Il passaggio non riguarda solo la versione, ma introduce un nuovo paradigma: la configurazione non ruota più attorno a tailwind.config.js, ma a un approccio css-first basato su direttive.
Questo impatta direttamente temi custom e moduli Hyvä-ready che devono essere adattati alla nuova pipeline.
Direttiva @source e gestione delle classi
Per garantire che Tailwind includa correttamente le classi usate in template e file XML, Hyvä 1.4 utilizza la direttiva @source.
Esempio:
@source inline('text-gray-500');Questa sintassi permette di forzare l’inclusione di classi che altrimenti verrebbero eliminate durante il processo di build.
Inclusione manuale di file phtml e xml
La documentazione ufficiale Hyvä mostra come includere esplicitamente file sorgente appartenenti a moduli non ancora pienamente compatibili con la nuova pipeline CSS.
@source "../../../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/**/*.phtml";
@source "../../../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/**/*.xml";Nuovi componenti frontend in Hyvä 1.4
Snap slider basato su AlpineJS
A partire da Hyvä theme 1.4, lo slider basato su CSS Scroll Snap e AlpineJS diventa parte integrante del tema open source Hyvä, rendendo disponibile questa soluzione anche senza Hyvä UI. Lo slider è pensato per sostituire soluzioni più obsolete e migliorare accessibilità e performance, semplificando l’implementazione nei temi custom.
Esempio di markup riportato nella documentazione:
<section x-data x-snap-slider>
<div data-track>
<!-- Slides go here -->
</div>
</section>Slider definito via layout xml
In alternativa, lo slider può essere definito direttamente tramite layout XML, evitando logica JavaScript nei template.
<block name="block-slider" template="Hyva_Theme::elements/slider.phtml">
<!-- Your Slides -->
</block>Ogni blocco figlio diretto viene automaticamente interpretato come slide.
Nuovi dialog e off-canvas basati su <dialog>
I componenti modal e off-canvas sono stati riprogettati utilizzando l’elemento HTML <dialog> e il plugin AlpineJS x-htmldialog, migliorando accessibilità e comportamento nativo.
<div x-data="{ open: false }">
<button class="btn" @click="open = true">
Open Dialog
</button>
<dialog x-htmldialog="open = false">
<h3 class="text-lg font-medium">Dialog Title</h3>
<p>This is the content of the dialog.</p>
<button class="btn" @click="open = false">
Close
</button>
</dialog>
</div>Versioni 1.4.1, 1.4.2 e 1.4.3
Hyvä 1.4.1
La versione 1.4.1 introduce principalmente bugfix, ma include un cambiamento rilevante: il widget dei prodotti visti di recente è stato migrato al nuovo Snap Slider. Eventuali override personalizzati di Magento_Catalog::product/widget/viewed/list.phtml basati sulla precedente implementazione JavaScript potrebbero non funzionare più.
Hyvä 1.4.2
La release 1.4.2 migliora la stabilità generale e risolve diversi problemi noti, tra cui:
- correzioni alle speculation rules con store code negli URL
- fix alla gallery prodotto e alla fullscreen gallery
- introduzione del componente CSS
input-group
Hyvä 1.4.3
La versione 1.4.3 è focalizzata sulla stabilità e include:
- correzione della visualizzazione delle tasse nel carrello con CSP attivo
- fix a una race condition che poteva bloccare i pulsanti PayPal In-Context
Compatibilità con moduli di terze parti
Il passaggio a Tailwind CSS v4 può causare problemi di compatibilità con moduli non ancora aggiornati. Amasty segnala che molti dei loro moduli Hyvä-compatibili sono già stati adattati e che l’allineamento completo è in corso.
Particolare attenzione va prestata agli ambienti Adobe Commerce Cloud, dove il file .gitignore può impedire la corretta risoluzione delle direttive @source se non configurato adeguatamente.
Conclusione
Hyvä 1.4 rappresenta un aggiornamento strategico per il frontend Magento 2: migliora performance, accessibilità e modernità dello stack, ma richiede consapevolezza tecnica nell’adozione.
L’aggiornamento va pianificato con attenzione, testato in staging e accompagnato da una revisione delle personalizzazioni CSS e dei moduli frontend, seguendo esclusivamente le linee guida ufficiali.
