La guida per principianti ai blocchi e ai widget Magento

Blocchi e widget sono le funzionalità chiave del layout in Magento. Queste due caratteristiche sono strettamente collegate e vengono spesso utilizzate insieme.

Un modo per pensare ai blocchi è che sono mini-pagine. Un blocco può anche contenere testo, immagini, video e altro. Ma poiché i blocchi sono più piccoli, li vedrai attorno ai bordi del tuo sito. I blocchi sono spesso inseriti in intestazioni, barre laterali e piè di pagina.

Tuttavia, i blocchi vengono posizionati utilizzando i widget. Per prima cosa crei un blocco, quindi usi un widget per decidere dove verrà visualizzato quel blocco.

Ti guidiamo attraverso alcuni esempi e ti mostriamo come funzionano i blocchi e i widget in Magento.

Questa guida è tratta da Magento 2 Explained, il libro più venduto per Magento 2. Usiamo l'esempio di un negozio chiamato "Orangeville" in quel libro, quindi lo vedrai citato qui.

Spiegazione della creazione di blocchi Magento

Esaminiamo il processo di creazione del nostro primo blocco. Questo conterrà un collegamento HTML.

• Vai su "Contenuto" e poi su "Blocchi".
• Fai clic su "Aggiungi nuovo blocco" nell'angolo in alto a destra.

• Inserisci "Link chiave" come "Titolo del blocco". Questo è ciò che i visitatori vedranno sullo schermo.
• Immettere "key_links" come identificatore. Questa stringa è ciò che Magento usa per identificare il blocco, ma i visitatori non lo vedranno mai.

• Fare clic sull'icona del punto elenco nella barra degli strumenti dell'editor:

• Digita "Informazioni su Orangeville" come punto elenco:
• Seleziona il testo "Informazioni su Orangeville" e fai clic sull'icona del collegamento.

• Ora vedrai una finestra pop-up. Inserisci l'URL della tua pagina "Informazioni su Orangeville". Se non sei sicuro di cosa si tratti, puoi aprire il tuo sito Magento in una nuova scheda del browser e trovare l'URL, che probabilmente sarà example.com/about-orangeville/.
• Fare clic su "Inserisci".
• Ora hai un link "Informazioni su Orangeville" all'interno del tuo blocco:

• Fai clic su "Salva blocco".

Spiegazione della creazione di widget Magento

Ora abbiamo la sfida di inserire il tuo blocco nel design del tuo sito. È qui che i widget di Magento tornano utili. In Magento, un Block è solo un pezzo di contenuto. È il Widget che controlla il posizionamento del Blocco.

Tuttavia, non è tutto ciò che un widget può fare. Un widget può posizionare i nostri nuovi blocchi semplici, ma può anche posizionare molte altre funzionalità.

• Vai su "Contenuto" e poi su "Widget".
• Fai clic su "Aggiungi widget".
• Per "Tipo", scegli "Blocco statico CMS".
• Per "Tema design", scegli "Magento Luma".
• Fare clic su "Continua".

• Inserisci "Key Orangeville Links" per il "Titolo widget".
• In "Assegna a visualizzazioni negozio", seleziona "Tutte le visualizzazioni negozio".

Successivamente, controlleremo su quali URL appare questo blocco.

• Fai clic su "Aggiungi aggiornamento layout".

• Scegli "Tutte le pagine".

• Scegli "Collegamenti a piè di pagina CMS" per l'opzione "Contenitore".

Entrambe queste scelte, "Tutte le pagine" e "Collegamenti a piè di pagina CMS", potrebbero non avere ancora molto senso per te. Tuttavia, finiremo di creare il widget e più avanti nel capitolo, nella sezione chiamata "Spiegazione del posizionamento del widget Magento", spiegheremo di più sul perché abbiamo fatto queste scelte.

In "Aggiornamenti layout", faremo una seconda scelta su dove posizionare il nostro widget.

• Scegli "Tutti i tipi di prodotto".
• Scegli di nuovo "Collegamenti a piè di pagina CMS".
• Dopo aver aggiunto entrambe queste opzioni, lo schermo apparirà come l'immagine qui sotto.

A questo punto hai creato il Widget e detto a Magento dove dovrebbe apparire sul tuo sito: questo Widget apparirà su tutte le nostre Pagine e su tutti i nostri Prodotti.

Ora è il momento di scegliere il contenuto del Widget, che sarà il Blocco che hai creato in precedenza.

• Fai clic su "Opzioni widget" nella barra laterale.
• Fai clic su "Seleziona blocco".

• Ora puoi scegliere il blocco "Link chiave" che hai creato in precedenza:

• Fare clic su "Salva".
• Visita la parte anteriore del tuo sito e vedrai che il tuo link è ora pubblicato nel footer. Hai creato un blocco con il contenuto e lo hai pubblicato all'interno di un widget.

Creare blocchi e widget insieme

Ci sono sicuramente alcuni passaggi difficili durante la creazione di blocchi e widget. Quindi proviamo insieme l'intero processo. Creeremo un secondo Blocco e lo posizioneremo sul nostro sito con l'aiuto di un Widget. Questo blocco dirà alle persone che abbiamo una garanzia di soddisfazione al 100%.

• Vai su "Contenuto" e poi su "Blocchi".
• Fai clic su "Aggiungi nuovo blocco".
• Titolo: Soddisfazione garantita
• Identificatore: garanzia

• Inserisci il testo per il tuo blocco. Ho scritto "Qui a Orangeville, la tua soddisfazione è la nostra massima priorità. Se non sei soddisfatto, ti rimborseremo i soldi".

Successivamente, caricheremo un'immagine per il nostro blocco.

• Posiziona il cursore nell'area del contenuto principale, sotto il testo che hai appena scritto.
• Fai clic sull'icona dell'albero nella barra degli strumenti dell'editor.
• Quando vedi la finestra pop-up, fai clic sull'icona della piccola casella.
• Trova un'immagine che puoi caricare. Ho scelto un badge al 100%.

• Fare clic su "Inserisci file".
• Descrizione immagine: Garanzia di soddisfazione
• Fare clic su "Inserisci".

• Ora hai un blocco che contiene sia il testo che la tua nuova immagine.
• Fai clic su "Salva blocco" per completare la creazione di questo blocco.

Successivamente, creiamo il Widget che visualizzerà questo Blocco sul nostro sito.

• Vai su "Contenuto" e poi su "Widget".
• Fai clic su "Aggiungi widget".
• Tipo: blocco statico CMS
• Tema del design: Magento Luma

• Titolo del widget: Soddisfazione garantita
• Assegna a visualizzazioni negozio: tutte le visualizzazioni negozio

• Aggiornamento del layout: Categorie di ancoraggio
• Contenitore: barra laterale principale
• Fai clic su "Opzioni widget" e scegli il blocco "Soddisfazione garantita" che hai appena creato.

• Fare clic su "Salva".
• Visita la parte anteriore del tuo sito. Fare clic su uno dei collegamenti di categoria nel menu in alto. Nell'immagine qui sotto, ho cliccato su "Frutta". Ora vedrai il tuo blocco di garanzia nella barra laterale di sinistra:

Spiegazione del posizionamento del widget Magento

Una domanda comune che ricevo dagli studenti di Magento riguarda il posizionamento dei widget.

Come fai a sapere se scegliere "CMS Footer Links" o "Sidebar Main" per il contenitore? Dopotutto, ci sono 22 diverse scelte, come puoi vedere nell'immagine qui sotto.

Qual è la differenza tra "Dopo l'intestazione della pagina" e "Dopo l'intestazione della pagina in alto"? Qual è la differenza tra "Piè di pagina" e "Contenitore del piè di pagina"? Quei nomi sono così simili che possono sicuramente creare confusione.

Sfortunatamente, non c'è un modo sicuro per dirlo in anticipo, anche se il nome ti darà una buona idea del posizionamento:

• Dopo l'intestazione della pagina: è probabile che si trovi nel menu principale.
• Contenuto principale in basso: questo è probabilmente in basso nella parte centrale dello schermo, sotto i nostri prodotti o il contenuto della pagina.
• Inizio pagina: apparirà in alto nelle pagine, ma non nelle schermate dei prodotti.

Vale la pena notare che queste opzioni cambiano, anche sullo stesso sito. Se stai cercando di posizionare un blocco e scegli "Tutti i tipi di prodotto" per le "Opzioni di layout" del tuo Widget, otterrai un diverso insieme di scelte, mostrato nell'immagine qui sotto. Queste opzioni forniscono alcuni posizionamenti che hanno senso solo per le schermate dei tuoi prodotti. Ad esempio, ora vengono visualizzate le scelte che includono "Contenitore dei collegamenti social del prodotto" e "Rivedi i campi del modulo prima". Quei posizionamenti del widget non hanno senso da nessuna parte tranne che nelle schermate dei prodotti.

D'altra parte, questo elenco a volte può essere molto più breve. Nella prossima parte di questo capitolo, vedremo che alcuni Widget hanno solo tre opzioni Contenitore.

Quindi, non esiste un modo garantito per dire esattamente dove apparirà il tuo Widget se scegli un determinato contenitore. Ci saranno alcuni test e sperimentazioni coinvolti mentre testerai queste diverse opzioni.

Riepilogo blocchi e widget Magento

Blocchi e widget ti consentono di aggiungere nuovi elementi al design del tuo sito. Tuttavia, ci sono alcuni elementi sul tuo sito che non possono essere facilmente modificati o sostituiti dall'interfaccia di amministrazione di Magento. Sembrano che dovrebbero essere blocchi e widget, ma Magento non li ha creati in questo modo. Quindi, ho creato una pagina con le istruzioni per aggiornare alcuni di quegli elementi predefiniti.

Se sei pronto per saperne di più su Magento, dai un'occhiata a Magento 2 Explained, il libro più venduto per Magento 2.

Abbiamo anche altri fantastici tutorial Magento online, tra cui:

• La guida per principianti alla comprensione delle tasse Magento
• Immagini di base, piccole, miniature e campioni in Magento
• Scopri cosa sono gli indici Magento 2 e come gestirli