Per la nostra rubrica dedicata a Mage-OS, oggi Davide Lunardon e Samuele Martini di Webito, ci parlano di come Mage-OS porti innovazione nel Frontend e nel Pagebuilder di Magento.
Ma lasciamo la parola a Davide e Samuele con il loro articolo scritto a 4 mani su questo argomento di grande interesse.
PageBuilder Import/Export
https://github.com/mage-os-lab/module-pagebuilder-template-import-export
Mage-OS ha rilasciato nel Marzo 2025 un nuovo modulo per Magento 2 che permette di esportare ed importare template pagebuilder tra diverse istanze magento.
Questo permette di creare contenuti in ambiente di dev per poi migrarli in produzione con una manciata di click.
Il modulo si occupa anche di integrare Dropbox per far si che le agenzie possano repositorare questi template e riutilizzarli su vari progetti. Si apre quindi la possibilità di creare dei veri e propri “app-store” di template pre-formattati scaricabili e utilizzabili dai merchant e dalle agenzie.
PageBuilder Widget
https://github.com/mage-os-lab/module-page-builder-widget
Dopo aver realizzato le funzionalità di import/export dei template è stato deciso di colmare un’altra grossa pecca del pagebuilder: la creazione di componenti custom.
Storicamente il pagebuilder di Magento 2 ha sempre permesso di creare componenti custom ma l’effort di sviluppo necessario per realizzarli era enorme.
I Widget CMS di contro sono sempre stati uno strumento potente ma limitato dal fatto di non permettere agli utenti di capire come il loro operato si sarebbe comportato a frontend prima della conclusione delle lavorazioni effettuate con il pagebuilder.
Per questo nel Maggio del 2025 Mage-OS ha rilasciato il nuovo modulo “Pagebuilder Widget” con il quale, anziché creare componenti custom, si possono sviluppare dei widget, mantenendo la loro facilità e velocità di implementazione, ma integrandoli nel pagebuilder come se fossero un componente con tutte le relative utility e la preview integrata.
Integrazione UIkit3: il nuovo tema frontend
https://github.com/mage-os-lab/theme-frontend-uikit
La creazione di componenti UI complessi su Luma è sempre stato un argomento scottante. Varie le criticità, dalla standardizzazione di un sistema pratico, il decremento delle performance frontend, la difficoltà di non avere un framework che permettesse di sviluppare velocemente layout e stili.
A seguito di una RFC ( letteralmente una “Richiesta di commenti”, un dibattito online ) aperta a Giugno del 2025 su github, è stato deciso che si sarebbe potuto procedere con lo sviluppo di un nuovo frontend basato sullo standard di Magento 2 ( Blank e Luma ).
Questo, con lo scopo di garantire piena compatibilità con tutti i moduli di terze parti già realizzati dai vari vendor e con sviluppi compiuti negli anni dalle agenzie.
La scelta è ricaduta sull’adozione di UIkit3, framework CSS/JS scritto da Yootheme, azienda leader nella produzione di temi per Joomla e WordPress.
Con questo tema si possono utilizzare tutte le utility CSS e Javascript avanzate fornite da UIkit3, paragonabili a quelle di Bootstrap, Tailwind ed altri framework ma mantenendo la piena compatibilità con i moduli di terze parti e compilando il tema senza dover effettuare nessuna operazione aggiuntiva rispetto al classico comando setup:static-content:deploy.
Un requisito importante era quello di mantenere uno standard di performance in linea con il tema Luma e per fare ciò è stato esteso il compilatore in modo che tutti i riferimenti CSS di UIkit non utilizzati nel progetto vengano rimossi, riducendo al minimo l’impatto sulle performance da parte del nuovo sistema aggiunto sopra al frontend già in uso.
Dimostrazioni pratiche
Abbiamo testato il funzionamento di questi moduli e del nuovo tema partendo da una demo di un componente di Yootheme scritto con UIkit: https://demo.yootheme.com/joomla/widgetkit/uikit/home/popover#popover
Copiando l’html del componente direttamente in un widget CMS è possibile visualizzare la preview nel pagebuilder, esportare il template riutilizzandolo in un secondo momento e visualizzare correttamente il componente a frontend. L’effort di sviluppo è davvero ridotto, ed il risultato è innovativo: << si è aperto un nuovo scenario in cui Magento 2 non ha più necessità di software esterni per la creazione di contenuti CMS o html scritto a mano che solo le agenzie sanno come modificare limitando i merchant. >>
Qui di seguito il branch relativo all’esperimento da noi effettuato: https://github.com/dadolun95/dadolun95-mageos-uikit-popover-widget
Prossimi step
Ora che con il modulo Pagebuilder_Widget i widget sono integrabili in maniera più smart e sostituiscono di fatto lo sviluppo di nuovi componenti, Mage-OS sta valutando l’opzione di sviluppare un modulo che contenga delle funzionalità avanzate al fine di rendere più semplice la produzione di landing, blocchi e pagine CMS.
In Magento nativamente non esistono tali funzionalità, come ad esempio la gestione di campi ripetibili utili per slider e caroselli.
Questi widget non solo saranno pronti all’uso per gli store manager, ma possono essere usati dagli sviluppatori come boilerplate per widget più complessi, inoltre avendo ora delle funzionalità css e javascript avanzate fornite da UIKit3, si integreranno nativamente con questo framework per offrire animazioni e implementazioni di frontend avanzate già pronte.
Le possibilità sono molto ampie, basti vedere la lista di componenti che Yootheme propone nel suo prodotto “Widgetkit” ( https://yootheme.com/widgetkit-joomla-gallery ) o l’elenco di componenti nativi del framework ( https://getuikit.com/docs/accordion ).
Combinando il modulo di import/export template, il pagebuilder widget e questa nuova soluzione per widget avanzati si ottiene una suite che porta il pagebuilder ad un nuovo livello, che migliora l’usabilità per gli store manager e l’estensibilità per gli sviluppatori. Questa suite che nasce già integrata con UIkit3, ma utilizzabile anche con Luma o qualsiasi altro tema, ringiovanisce tecnologicamente la piattaforma e la potenzia notevolmente per lo sviluppo frontend.
Vuoi conoscere e confrontarti con la community di Mage-OS?
Puoi unirti al gruppo italiano e seguire le ultime novità su discord ( https://discord.com/invite/nvZDVA2NdC ).