Come creare un widget personalizzato in Magento 2

I widget sono incredibili funzionalità che ti consentono di aggiungere contenuti dinamici o statici alle pagine e ai blocchi CMS nel tuo sito Web Magento 2. Sono strumenti riutilizzabili ed essenziali che forniscono molteplici funzionalità che possono essere utilizzate nel blocco CMS di un negozio Magento 2.


Quando aggiunti al negozio Magento, i widget consentono ai visitatori di navigare e visualizzare facilmente il tuo negozio. Creano modelli e design accattivanti per siti Web che arricchiscono l’esperienza dell’utente offrendo al contempo controllo e flessibilità senza precedenti sul pannello di amministrazione.

Questo tutorial ti aiuterà a creare un widget personalizzato sul tuo negozio Magento 2 per migliorare l’esperienza dei visitatori e migliorare la navigazione all’interno del negozio.

Pronto? Iniziamo.

Passaggio 1: creazione di un nuovo modulo

Il primo passo quando si crea un widget personalizzato in Magento 2 è stabilire un nuovo modulo. Il modulo richiede una cartella del modulo e uno spazio dei nomi, nel nostro caso, utilizzerà HostAdvice come spazio dei nomi e CustomWidget come nome della cartella del modulo. La cartella del modulo si trova nella cartella del fornitore denominata app / code.

Per il bene di questo tutorial, useremo app / code / HostAdvicel / CustomWidget / composer.json. Il compositore caricherà questo file quando lo eseguiremo, anche se non useremo il compositore con il modulo.

Passaggio 2: creazione di registration.php

Dobbiamo registrare il modulo con Magento. Per fare ciò, innanzitutto, crea un register.php nella posizione app / code / HostAdvice / CustomWidget / registration.php usando il codice qui sotto.

<?php
\ Magento \ Framework \ Component \ ComponentRegistrar :: registro (
\ Magento \ Framework \ Component \ ComponentRegistrar :: MODULO,
‘Toptal_CustomWidget’,
__DIR__
);

Quindi, utilizzare il codice seguente per creare un file di registrazione, module.xml nella posizione app / code / HostAdvice / CustomWidget / module.xml.

<?versione xml ="1.0" ?>

Passaggio 3: inizializzazione del widget

Dopo aver creato i file di registrazione richiesti, il passaggio successivo è l’inizializzazione del widget. Creare un widget.xml file di configurazione nella posizione app / code / HostAdvice / CustomWidget / etc / widget.xml. Utilizzare il comando seguente:

<?versione xml ="1.0" ?>

Widget di esempio HostAdvice

Titolo

Soddisfare

Nel comando sopra, abbiamo etichettato due campi di input, Titolo, e Soddisfare. Ogni volta che viene chiamato il nuovo widget, verranno visualizzati i valori di entrambi i campi. Inoltre, nel tag, abbiamo dichiarato la classe di blocco, HostAdvice \ CustomWidget \ Blocco \ Widget \ Samplewidget per indirizzare il nuovo widget per utilizzare il modello specifico.

Passaggio 4: creazione di un blocco widget

Quindi, crea un campo di blocco intitolato Samplewidget.php, nella posizione HostAdvice / CustomWidget / blocchi / Widget /, usando il codice qui sotto:

<?php

spazio dei nomi HostAdvicel \ CustomWidget \ Block \ Widget;

usa Magento \ Framework \ View \ Element \ Template;
usa Magento \ Widget \ Block \ BlockInterface;

class Samplewidget estende Template implementa BlockInterface
{

protetto $ _template = "widget di / samplewidget.phtml";

}

Nel comando sopra, HostAdvice \ CustomWidget \ Blocco \ Widge \ Samplewidget è correttamente dichiarato e un modello personalizzato è assegnato all’interno di $ _template variabile.

Ora utilizzeremo il comando seguente per creare un file modello samplewidget.phtml, nella posizione HostAdvice / CustomWidget / view / frontend / templates / widget di.

<?php if ($ block->getData ( ‘widgettitle’)): ?>

<?php echo $ block->getData ( ‘widgettitle’); ?>

<?php endif; ?>
<?php if ($ block->getData ( ‘widgetcontent’)): ?>

<?php echo $ block->getData ( ‘widgetcontent’); ?>

<?php endif; ?>
Nel codice sopra, i parametri del widget sono stati scelti chiamando $ this->getData ( ‘widgettitle’); e $ questo->getData ( ‘widgetcontent’); valori.

Passaggio 5: Pubblicazione del widget

Ormai, il tuo widget personalizzato è stato creato con successo. Accedi all’area di amministrazione di Magento 2 e seleziona Soddisfare poi pagine.

Clic Selezionare nell’opzione Homepage e selezionare modificare.

Espandi il Soddisfare sezione e fare clic sulla Inserisci widget icona per pubblicare il widget personalizzato.

Questo ti porterà al Inserisci widget la zona. Fare clic sulla freccia nel tipo di widget, selezionare Widget di esempio HostAdvice, dall’elenco a discesa.

Nel Opzioni widget, Inserisci il Soddisfare e Titolo da visualizzare sulla home page e fare clic su Inserisci widget.

Infine, per apportare eventuali modifiche, svuota la cache di Magento 2 avviando l’interfaccia della riga di comando ed eseguendo i comandi seguenti:

php bin / magento cache: pulito
php bin / magento cache: flush

Carica il front-end del tuo negozio.

Conclusione

Questo è tutto! Hai sviluppato e pubblicato con successo un nuovo widget personalizzato nel tuo negozio Magento 2. Il nuovo widget sarà cruciale per le operazioni front-end in quanto offre maggiore libertà creativa e consente di commercializzare i tuoi prodotti con facilità.

Dai un’occhiata a questi 3 principali servizi di hosting Magento:

FastComet

Prezzo di partenza:
$ 2.95


Affidabilità
9.7


Prezzi
9.5


Di facile utilizzo
9.7


Supporto
9.7


Caratteristiche
9.6

Leggi le recensioni

Visita FastComet

Hosting A2

Prezzo di partenza:
$ 3.92


Affidabilità
9.3


Prezzi
9.0


Di facile utilizzo
9.3


Supporto
9.3


Caratteristiche
9.3

Leggi le recensioni

Visita A2 Hosting

ScalaHosting

Prezzo di partenza:
$ 4,95


Affidabilità
9.4


Prezzi
9.5


Di facile utilizzo
9.5


Supporto
9.5


Caratteristiche
9.4

Leggi le recensioni

Visita ScalaHosting

Articoli How-To correlati

  • Come creare prodotti in bundle in Magento 2
    intermedio
  • Come creare un nuovo prodotto in Magento
    novizio
  • Come impostare la crittografia SSL / TLS su Magento
    intermedio
  • Come creare un nuovo tema Magento
    intermedio
  • Come installare Magento in Cpanel
    novizio
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me