Come creare widget Magento 2 personalizzati

I widget consentono agli amministratori del negozio Magento 2 di aggiungere contenuto statico/dinamico a pagine e blocchi CMS, fornendo molte funzionalità e un'implementazione semplice. I widget sono componenti riutilizzabili che possono essere aggiunti in qualsiasi blocco CMS di Magento 2.

Quindi, consentono agli sviluppatori Magento 2 e agli amministratori di negozi di aggiungere interfacce e funzionalità interattive nel front-end senza dover sapere molto sulla programmazione. Ovviamente, devono ancora conoscere Magento per creare un widget.

L'obiettivo di questo articolo è dimostrare come creare widget in Magento 2, con particolare attenzione ai widget personalizzati.

Widget Magento 2

Magento 2 è l'ultima versione di Magento, una delle principali piattaforme di eCommerce oggi. I widget svolgono un ruolo importante in Magento 2, soprattutto dal punto di vista della funzionalità. Oltre a offrire più funzionalità lato utente, i widget Magento aiutano gli amministratori ad aggiungere contenuto statico o dinamico a pagine e blocchi CMS.

Ma, dal punto di vista tecnico... Cos'è un widget Magento?

Un widget Magento 2 è essenzialmente un'estensione Magento progettata con una serie di opzioni di configurazione avanzate. Grazie alla maggiore flessibilità e controllo, vengono utilizzati per fornire informazioni e contenuti di marketing tramite il pannello di amministrazione di Magento. Uno dei vantaggi dei widget di Magento 2 è che puoi "chiamarli" da qualsiasi punto del sito.

I widget consentono inoltre agli amministratori di aggiungere interfacce e funzionalità interattive nel front-end di Magento, senza dover programmare (in realtà, senza nemmeno sapere come programmare).

Magento 2 offre diversi tipi di widget

Prima di passare all'implementazione, diamo un'occhiata più da vicino alla gamma standard di widget supportati in Magento 2:

• Prodotti confrontati di recente — Devi aver osservato questo widget durante la navigazione dei prodotti sui tuoi siti di e-commerce preferiti. Questo widget viene utilizzato per visualizzare i prodotti visualizzati o confrontati di recente nella barra laterale di una pagina del catalogo. Possono anche apparire nel tuo negozio a seconda del tema. Uno dei punti cruciali è che è possibile configurare il numero di prodotti che sono elencati in ogni singolo blocco.
• Ordini e resi : ogni volta che acquisti un prodotto online, è disponibile un widget indispensabile che fornisce un rapido accesso a ordini e resi. Se un utente desidera rivedere i prodotti ordinati o restituiti, può inserire i dettagli necessari come ID ordine, Data ultima fatturazione, Trova ordine per, Email, ecc.
• Elenco prodotti catalogo — Questo è un altro widget ampiamente utilizzato; tutti hanno familiarità con le sezioni "prodotto in primo piano" sui siti di eCommerce, poiché quasi tutti i siti ne hanno una. I prodotti in evidenza vengono generalmente inseriti nella home page ai fini della promozione del prodotto. Il particolare prodotto viene mostrato con brevi dettagli come prezzo, caratteristiche e opzioni come aggiungi al carrello, aggiungi alla lista dei desideri e aggiungi a una funzione di confronto.
• Link prodotto catalogo : lo scopo principale del widget Link prodotto catalogo è che consente agli amministratori di gestire i collegamenti ai prodotti, inclusi prodotti correlati, vendite incrociate, upsell e prodotti raggruppati. Quando visiti la pagina di collegamento del prodotto catalogo, vedrai diverse categorie di catalogo iniziate con un'introduzione. Lì troverai i collegamenti ai prodotti del catalogo con vari collegamenti secondari, come l'assegnazione dei collegamenti ai prodotti del catalogo, gli attributi dei collegamenti ai prodotti del catalogo, le rimozioni dei collegamenti ai prodotti del catalogo, i tipi di collegamenti ai prodotti del catalogo e altro ancora.
• Collegamento alla categoria del catalogo : nei siti Web di eCommerce, in particolare in quelli basati su prodotti, non mancano i widget di collegamento alla categoria del catalogo.
• Widget blocco personalizzato : è possibile combinare blocchi, widget e pagine personalizzate per visualizzare parti del catalogo o altre informazioni che i clienti potrebbero trovare utili.

Questi possono essere utilizzati per migliorare l'esperienza dell'utente e aggiungere funzionalità al negozio. Blocchi e widget sono elementi importanti della maggior parte dei siti Web di eCommerce. Consentono agli utenti di generare e controllare rapidamente i contenuti e possono essere utilizzati per fare cose come:

• Aggiungi blocchi dinamici/informativi nelle barre laterali
• Aggiungi banner nelle pagine CMS
• Aggiungi menu personalizzati
• Aggiungi interfacce utente interattive

Il caso dei widget personalizzati di Magento 2

Qualsiasi sito Web o pagina Web ha bisogno di molte funzionalità per funzionare senza intoppi e per coinvolgere più visitatori e creare un'esperienza utente coinvolgente è un must nell'eCommerce. È qui che entrano in gioco i widget Magento 2 personalizzati, ed è quello che dovrebbero fare.

I widget sono insiemi di codice più piccoli che possiamo aggiungere allo store. Utilizzando semplici collegamenti a codice dinamico, i widget possono visualizzare tutti i tipi di dati utili su misura per aiutare i visitatori e migliorare la loro esperienza. La possibilità di aumentare il coinvolgimento utilizzando widget riutilizzabili a basso costo ovviamente significa molto, ma a volte non si tratta solo di scegliere e aggiungere un widget standard.

L'utilizzo della funzionalità widget personalizzati in Magento 2 ci consente di creare i nostri modelli di widget. Un widget personalizzato a volte può offrire un modo ancora migliore per modificare o aggiungere contenuti di qualità all'interno di blocchi o pagine CMS.

Tuttavia, prima di passare ai widget personalizzati, dobbiamo esaminare un caso d'uso standard per i widget in Magento 2. Diamo un'occhiata a qualcosa di base e ampiamente utilizzato, ad esempio:

Come aggiungere un nuovo elenco di prodotti alla home page utilizzando un widget

Questo semplice widget ci consente di aggiungere un nuovo elenco di prodotti ovunque richiesto sul sito Web e ci sono vari modi in cui i nuovi prodotti possono essere elencati in Magento 2.

Per aggiungere un elenco di prodotti Magento alla home page, è sufficiente seguire una semplice procedura:

• Accedi alla pagina di amministrazione di Magento 2 e vai su Contenuto> Widget

• Fare clic sul pulsante Aggiungi widget . Successivamente, verremo reindirizzati alla scheda Impostazioni , dove dobbiamo selezionare le opzioni e i temi di tipo e design .

• Possiamo vedere lo screenshot qui sotto, in cui abbiamo già selezionato l' elenco dei nuovi prodotti del catalogo che mostreremo nel front-end.

• Abbiamo selezionato LUMA come opzione del tema del design.

• Dopo aver selezionato entrambi i valori, dobbiamo passare al secondo passaggio, dove dobbiamo riempire le proprietà della vetrina. Ora dobbiamo impostare il titolo del widget e le proprietà della vetrina , come il titolo del widget e la visualizzazione del negozio . Stiamo usando Toptal New Product List e All Store Views .

• La parte più importante è la sezione Aggiornamenti layout , che ci dirà dove apparirà questo widget (ad esempio, home page, pagina di elenco, pagina di pagamento, ecc.). È anche possibile definire un'area in cui apparirà il contenitore, ad esempio sotto l'intestazione, sopra il piè di pagina, il piè di pagina, ecc.

Le impostazioni di Aggiornamenti layout forniscono le seguenti opzioni:

• Visualizza On: Pagina specificata o Tutte le pagine.
• Pagina: Pagina iniziale del CMS
• Contenitore: Area Contenuti Principale
• Modello: qui puoi selezionare in quale stile desideri visualizzare i nuovi prodotti Modalità griglia o Modalità elenco

Una volta selezionata l'opzione Pagina specificata , possiamo procedere all'impostazione delle proprietà, consentendoci di visualizzare il widget su una pagina particolare. Qui abbiamo il menu a tendina Pagina , che ci permette di selezionare la Home Page del CMS . Successivamente, dobbiamo selezionare il contenitore e il modello che utilizzeremo per visualizzare il widget in una particolare sezione.

Infine, passiamo all'ultima scheda, che include le opzioni del widget. Qui possiamo impostare la Condizione , come il tipo di prodotti che verranno visualizzati, o includere limiti al numero di prodotti e così via.

Se selezioniamo Tutti i prodotti , in questa sezione verrà visualizzato l'ultimo prodotto aggiunto. Se selezioniamo Nuovi prodotti , in questa sezione verranno visualizzati solo i prodotti che abbiamo contrassegnato come "Nuovo". Se vogliamo consentire ai nostri clienti di controllare la navigazione per più elenchi, dobbiamo impostare il controllo della pagina di visualizzazione su "Sì". Se abbiamo selezionato "Sì", è necessario inserire il numero di prodotti nell'elenco.

In Numero di prodotti da visualizzare , possiamo definire quanti prodotti possono essere visualizzati nella sezione Nuovi prodotti . Inoltre, se necessario, possiamo modificare le impostazioni di Cache Lifetime .

Ora dobbiamo salvare questo widget e svuotare la cache di Magento 2. Questo può essere fatto da admin o dalla riga di comando. Possiamo usare il seguente comando per svuotare la cache:

php bin/magento cache:clean and php bin/magento cache:flush

Quindi potremo vedere i nuovi prodotti sulla home page.

Come creare un widget personalizzato in Magento 2

Ora impareremo come creare widget personalizzati per Magento 2. I widget personalizzati offrono il modo migliore per aggiungere e modificare contenuti all'interno di blocchi o pagine CMS, perché possono essere adattati alle tue esigenze.

Cominciamo con le basi. Sappiamo tutti come creare un modulo, giusto? Nel caso in cui non hai familiarità con la creazione di moduli personalizzati in Magento 2, abbiamo un ottimo tutorial che copre il processo in modo approfondito.

Ora, passiamo al processo passo-passo di creazione di widget personalizzati in Magento 2.

Innanzitutto, dobbiamo creare un nuovo modulo che richiede spazio dei nomi e cartelle dei moduli. Per questo esempio, utilizzeremo Toptal per lo spazio dei nomi e CustomWidget per il nome del modulo. Quindi, iniziamo come al solito con composer.json , registration.php e etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Questo file verrà caricato da Composer ogni volta che lo eseguiamo, anche se in realtà non stiamo usando Composer con il nostro modulo.

Ora dobbiamo registrare il nostro modulo con Magento, quindi ci viene richiesto di creare register.php nella seguente posizione: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Ora creeremo l'ultimo file di registrazione, module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

Dopo aver completato la fase di registrazione, creiamo il file di configurazione widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

Nel codice sopra, otteniamo Title e Content come parametri da visualizzare ovunque venga chiamato il widget. Il tag <widget> contiene la classe di blocco Toptal\CustomWidget\Block\Widget\Samplewidget . Questa classe viene decelerata all'interno di Block/Widget/Samplewidget.php . La classe indica ai nostri widget su quale modello utilizzare.

Il prossimo frammento di codice mostra come definire un blocco per il widget; imposteremo il nostro modello qui. Vediamo come appare.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget è dichiarato sopra il codice. In questo file, assegniamo un file modello personalizzato all'interno della variabile $_template .

Successivamente, vedremo cosa contiene il nostro modello di widget.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Qui possiamo vedere come prelevare il valore dai parametri del widget. È semplice:

$this->getData('widgettitle');

e

$this->getData('widgetcontent');

Qual è il nostro risultato finale? Lascia che ti mostri come appare in Magento Admin:

Ora dobbiamo salvare questo widget e svuotare la cache. Come indicato in precedenza, questo può essere fatto da admin o dalla riga di comando, usando php bin/magento cache:clean e php bin/magento cache:flush

Puoi scaricare questo semplice modulo qui. Ovviamente non è un modello di widget Magento 2 completo, ma è comunque un aiuto per l'apprendimento. Se hai bisogno di più risorse, o se sei relativamente nuovo su Magento, la documentazione ufficiale di Magento 2 è il punto di partenza più ovvio.

Infine, vorrei citare un paio di blog di sviluppo personali che ho trovato molto utili. Alan Storm ha probabilmente il contenuto più didattico quando si tratta di imparare Magento, e penso che dovresti dare un'occhiata anche al blog di Alan Kent.

Widget: una parte cruciale del quadro generale

L'obiettivo di questo articolo era fornire una guida alla creazione di widget in Magento 2, iniziando con un tutorial passo-passo di base che copre lo sviluppo di widget Magento 2 e la creazione di widget personalizzati. Sono ovviamente un fan di quest'ultimo, poiché le soluzioni personalizzate tendono a fornire maggiore flessibilità e funzionalità.

I widget Magento forniscono funzionalità front-end cruciali, quindi non è esagerato dire che widget personalizzati intelligenti possono aiutare a portare il tuo prossimo progetto Magento al livello successivo. Ci consentono di implementare ancora più funzionalità, aggiungere diversi tipi di elementi alla home page utilizzando diversi widget e, in definitiva, offrono semplicemente agli sviluppatori una maggiore libertà creativa.

Ma non si tratta solo di migliorare l'esperienza utente e le conversioni o di creare un design dall'aspetto fantastico. Tutti sono ovviamente una priorità per qualsiasi cliente, ma ci sono guadagni minori e meno evidenti. Ad esempio, i widget Magento possono far risparmiare molto tempo e mal di testa anche dal lato amministratore e ogni cliente sta cercando di risparmiare anche ore di lavoro.

Tuttavia, questo esula dallo scopo di questo articolo. Il mio intento era quello di fornire una rapida panoramica tecnica, un tutorial sul widget Magento 2 facile da seguire, non discutere di ROI e marketing.