Kowal PageBuilder Slider Fix – slider responsive senza compromessi

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA E HYVÄ

Kowal PageBuilder Slider Fix

Mantieni lo slider nativo PageBuilder e migliora proporzioni e selezione delle immagini desktop/mobile. Usa la versione standard per Luma o l'adattatore Hyvä incluso nel pacchetto.

Proporzioni dell'immagine · Grafica desktop/mobile · Breakpoint configurabile

COME FUNZIONA IN PRATICA

Magento PageBuilder offre uno slider nativoche, in linea di principio, è un'ottima soluzione:

• non richiede librerie esterne,

• è completamente integrato con l'editor dei contenuti,

• supporta immagini separate per desktop e mobile,

• funziona correttamente con cache, Varnish e PageBuilder Preview.

Ed è proprio per questo che vale la pena usarlo.

Purtroppo, nella pratica molti store Magento incontrano gli stessi problemi, soprattutto con layout moderni e responsive.

Nella configurazione standard di PageBuilder:

• l'altezza dello slider è imposta in modo rigido (min-height),

• le proporzioni dell'immagine non derivano dalle dimensioni reali della grafica,

• su mobile compaiono margini vuoti sopra e sotto lo slider,

• lo slider non sempre reagisce correttamente al cambio dei breakpoint,

• CSS e JS di PageBuilder impongono comportamenti difficili da sovrascrivere senza intervenire sul core.

Il risultato?

Lo slider spesso appare bene solo su uno schermo –
mentre ad altre risoluzioni perde proporzioni o qualità estetica.

Kowal PageBuilder Slider Fix risolve questi problemi senza disattivare PageBuilder e senza intervenire sul core di Magento.

Il modulo:

• rimuove l'imposizione rigida dell'altezza (min-height) da parte di PageBuilder,

• consente allo slider di adattare dinamicamente l'altezza all'immagine,

• mantiene la larghezza completa (100% viewport width),

• gestisce correttamente immagini desktop e mobile separate,

• funziona solo dove lo slider è effettivamente presente.

• utilizza text/x-magento-init – il meccanismo nativo di Magento,

• non carica JS globale su ogni pagina,

• funziona per singolo slider, non globalmente,

• collabora con il meccanismo data-background-images di PageBuilder,

• è compatibile con PageBuilder Preview e con l'editor CMS.

Questo significa:

✔ minore necessità di librerie aggiuntive; la compatibilità richiede verifica
✔ nessun problema con la cache
✔ nessun impatto sulle prestazioni dello store

Questo modulo è ideale se:

• usi PageBuilder Slider o Banner Slider,

• ti interessa una responsività perfetta,

• vuoi mantenere le soluzioni native di Magento,

• non vuoi installare slider esterni pesanti,

• ti interessa l'estetica su mobile, senza margini vuoti.

Gli slider esterni:

• spesso caricano grandi librerie JS,

• non collaborano perfettamente con PageBuilder,

• possono creare problemi con cache / Varnish,

• rendono più difficile la modifica dei contenuti per le persone non tecniche.

Il nostro modulo corregge ciò che serve – e nulla di più.

Kowal PageBuilder Slider Fix:

• mantiene i vantaggi dello slider nativo di Magento,

• elimina i suoi difetti principali,

• funziona in modo stabile su desktop e mobile,

• è leggero, veloce e sicuro,

• destinato all'implementazione dopo la verifica del tema e della configurazione.

Se usi PageBuilder – questo modulo dovrebbe esserne il complemento naturale.

Stores → Configuration → Kowal → PageBuilder Slider Fix offre Desktop Width / Height, Mobile Width / Height e Mobile Breakpoint. I valori predefiniti sono 1920 × 800, 768 × 976 e 768 px. La soglia mobile include anche uno schermo largo esattamente 768 px.

In Luma, lo script dell'altezza utilizza le dimensioni naturali dell'immagine di sfondo; l'adattatore Hyvä usa le proporzioni configurate per la geometria della slide. Il cambio immagine reagisce a resize e orientationchange. Se manca la grafica mobile viene utilizzata quella desktop.

Per Hyvä abilita anche Kowal_PageBuilderSliderFixHyva e nella vista negozio imposta Hyva Compatibility → Enable Hyva Slider Fix su Yes. L'adattatore è disattivato per impostazione predefinita. Non installarlo separatamente accanto al pacchetto principale.

L'adattatore supporta i campi delle immagini WebP Hyvä e il flag di caricamento differito dello sfondo. Il tema nativo gestisce navigazione e riproduzione del carosello. Un markup slider personalizzato deve conservare gli elementi e gli attributi PageBuilder richiesti.

In Luma, l'inizializzazione utilizza text/x-magento-init e il selettore .pagebuilder-slider, senza una libreria carosello aggiuntiva. Il modello di inizializzazione viene aggiunto al layout predefinito; la gestione delle immagini riguarda gli elementi slider presenti nella pagina.

Verifica proporzioni, CSS del tema, breakpoint, anteprima PageBuilder e funzionamento con cache e Varnish nel tuo negozio. Gli effetti riguardano la presentazione dei banner; assenza di conflitti e impatto nullo sulle prestazioni non sono garanzie universali.

Il pacchetto kowal/module-pagebuildersliderfix, modulo Kowal_PageBuilderSliderFix. Dopo aver configurato l'accesso al repository Kowal, installa il pacchetto, abilita il modulo, aggiorna Magento e svuota la cache. In produzione, includi compilazione e deploy dei contenuti statici secondo il processo del negozio.

1. Prepari le immagini
Aggiungi immagini desktop e mobile in PageBuilder.

2. Scegli le impostazioni
Configuri proporzioni e soglia della versione mobile.

3. Lo slider adatta la presentazione
Il meccanismo modifica immagine e geometria per lo schermo.

Per desktop prepari una grafica ampia e per mobile una versione verticale separata. Quando cambia la larghezza dello schermo, il modulo seleziona l'immagine appropriata.

Se manca la versione mobile viene utilizzata la grafica desktop. Scorrimento e riproduzione delle slide restano compiti dello slider nativo.