Sarà capitato a molti la necessità di personalizzare il layout di specifiche categorie su Magento 2 diversificando la visualizzazione rispetto alle impostazioni generali del proprio sito eCommerce. Grazie alla versatilità di Magento questo è possibile.
Se per esempio, in una specifica categoria si vuole nascondere il filtro o cambiare la visualizzazione di default dei prodotti (es.: modalità griglia invece che elenco o viceversa), questo tutorial può essere di aiuto.
Dalla versione 2.3.4 in poi, per motivi di sicurezza, le modifiche al layout si possono applicare sovrascrivendo il file di visualizzazione del tema. Mentre, nelle versioni precedenti ed in Magento 1, è possibile applicare le modifiche inserendo le direttive nella configurazione della categoria interessata.
Personalizzare il layout di specifiche categorie su Magento 2, breve introduzione
Questo tutorial come anticipato, può aiutare in tutti quei casi in cui si ha la necessità di personalizzare la visualizzazione di una o più categorie del proprio sito di commercio elettronico realizzato con Magento 2. Per rimuovere un elemento come il filtro, cambiare l’ordine di visualizzazione rispetto alla configurazione generale o cambiare la modalità di elencare i prodotti, griglia – elenco, rispetto alle impostazioni di default.
Quindi, quello che faremo con questa guida, è aggiungere un “Custom Layout Update” con le impostazioni desiderate ed ottenere una visualizzazione della categoria personalizzata. L’impostazione del Custom Layout Update si effettua nelle singole categorie dei prodotti nell’area di amministrazione di Magento 2.
Per farsi un’idea, effettuare l’accesso come amministratore. Alla voce Catalogo > Categorie, selezionare una categoria e, nella sezione “Aspetto”, troviamo il selettore del Custom Layout Update.
Anche in questo caso si consiglia di creare prima un tema child in modo da non modificare il tema di default del sito. Leggi il tutorial per generare un tema child per Magento 2. Inoltre fare sempre un backup completo in modo da ripristinare il sito in caso di problemi.
Tempo richiesto: 10 minuti
Con questa guida andremo a disabilitare il filtro ad una specifica categoria con 2 semplici passaggi.
- Come personalizzare una categoria aggiungendo un “Custom Layout Update”
La prima cosa da fare è individuare l’identificativo (ID) della categoria da personalizzare. L’identificativo è il numero riportato tra le parentesi tonde a fianco al nome della categoria es.: (ID:23), da non confondere con il numero successivo che si riferisce invece alla quantità di prodotti presenti nella stessa categoria.
Una volta recuperato l’identificativo, creare un file denominato: “catalog_category_view_selectable_23_filtro.xml”
Come si può notare, nel nome del file xml si dovrà inserire l’ID della categoria “23” ed il nome “filtro” per identificarlo nel selettore “Custom Layout Update”.
All’interno del file, riportiamo il seguente codice:
Caricare quindi il file nel proprio tema, generalmente nella seguente posizione:
“app/design/frontend/[theme_vendor]/[theme_nome]/Magento_Catalog/layout/” - Come applicare le modifiche apportate alla categoria
Una volta scritto il file, se il sito è in modalità “Produzione”, rigeneriamo i file statici con questo comando
php bin/magento setup:static-content:deploy -f
Poi puliamo la cache
php bin/magento cache:flush
Successivamente accedere nell’area di amministrazione Magento e, nella sezione di gestione delle categorie, nel tab “Aspetto” della categoria interessata, si dovrebbe visualizzare la voce “filtro” nel selettore “Custom Layout Update”.
Selezionarlo e salvare. Verificare, inoltre, che nel tab “impostazioni di visualizzazione” la voce “Ancora” sia impostata su “No”.
Svuotare di nuovo la cache e verificare la nuova visualizzazione della categoria nel front end.
Documentazione ufficiale Magento
Per maggiori dettagli sulla personalizzazione del layout, fare riferimento alla documentazione ufficiale di Magento
Hai bisogno di personalizzare il tuo eCommerce Magento o realizzare un sito per il commercio elettronico e stai cercando uno sviluppatore?
Parliamone.