Share
Per un po 'di tempo, Magento è stato il punto di riferimento tra le strutture di e-commerce disponibili sul mercato. Il merito va alla moltitudine di caratteristiche integrate di cui è dotato e all'estensione della struttura di base stessa per sviluppare estensioni su misura.
In questo tutorial imparerai il concetto di widget in Magento e come utilizzarli. Dimostrerò come è possibile creare un widget personalizzato, che è un modo davvero potente per inserire funzionalità aggiuntive in Magento.
Come sviluppatore Magento o amministratore del sito, probabilmente sei a conoscenza della struttura del layout front-end di Magento. Quasi tutti i contenuti visualizzati nel front-end di Magento sono generati da "Content Blocks". I blocchi di Magento sono un modo davvero potente per strutturare il contenuto front-end e offrono flessibilità nel consentire di gestirli utilizzando i file XML.
D'altra parte, i widget sono piccoli accessori che consentono agli amministratori del sito di abilitare nuove funzionalità nel front-end utilizzando un set predefinito di opzioni di configurazione. Possiamo dire che i widget sono più amichevoli per gli amministratori rispetto ai blocchi, perché non devono occuparsi dei codici funzione del blocco per inserire i blocchi. Per inserire un widget nella pagina, è sufficiente selezionare il widget dal menu a discesa dei widget e selezionare le opzioni di configurazione, se fornite.
Proviamo a capire questo attraverso un semplice esempio. Nelle pagine informative del tuo sito, desideri visualizzare i link "Stampa" e "Contattaci". Il collegamento "Stampa" consente agli utenti di stampare la pagina selezionata e il collegamento "Contattaci" consente loro di inviare una email di richiesta al reparto assistenza. Per fare ciò, possiamo semplicemente sviluppare un widget Magento che consente agli amministratori del sito di inserire questo widget nella pagina statica selezionata del sito.
Quindi, senza perdere altro tempo, tuffiamoci e vediamo esattamente cosa serve per sviluppare un widget personalizzato! E sì, seguirò l'esempio appena menzionato.
Svilupperemo un widget personalizzato che consentirà all'amministratore del sito di inserire i link "Stampa" e "Contattaci" nelle pagine CMS. Forniremo inoltre la configurazione del widget per i collegamenti in modo che l'amministratore possa selezionare i collegamenti che desidera visualizzare nella pagina CMS.
Presumo che tu abbia familiarità con la struttura dei moduli Magento. Innanzitutto, vediamo la struttura del file che dovremo implementare per il nostro widget personalizzato.
Accentsconagua
app / etc / modules / Envato_All.xml: È un file utilizzato per abilitare il nostro modulo widget.app / code / local / Envato / WidgetLinks / etc / config.xml: È un file di configurazione del modulo.app / code / local / Envato / WidgetLinks / etc / widget.xml: È un file di dichiarazione del widget che viene utilizzato per dichiarare informazioni e parametri del widget.app / code / local / Envato / WidgetLinks / Modello / Options.php: È un file di modello che fornisce le opzioni per la configurazione.app / code / local / Envato / WidgetLinks / Helper / Data.php: È un file che è proprio lì secondo gli standard.app / code / local / Envato / WidgetLinks / blocchi / links.php: La logica di visualizzazione per il widget va qui.Secondo le convenzioni di Magento, per prima cosa dobbiamo creare il file di abilitazione del modulo. Creare app / etc / modules / Envato_All.xml e incollare i seguenti contenuti in quel file. Abbiamo usato "Envato" come spazio dei nomi del nostro modulo e "WidgetLinks" come nome del nostro modulo. Abiliterà il nostro modulo "WidgetLinks" per impostazione predefinita.
vero Locale
D'ora in poi, creeremo i file richiesti sotto app / code / local / Envato / WidgetLinks, che è il nostro percorso del modulo widget. Creare app / code / local / Envato / WidgetLinks / etc / config.xml e incollare i seguenti contenuti in quel file. Come puoi vedere, abbiamo appena dichiarato i nomi delle classi modello, helper e blocco secondo le convenzioni XML del modulo Magento.
0.0.1 Envato_WidgetLinks_Helper Envato_WidgetLinks_Block Envato_WidgetLinks_Model
Ora per le cose interessanti: creiamo il app / code / local / Envato / WidgetLinks / etc / widget.xml file e incollare i seguenti contenuti in esso.
Opzioni di stampa e inchiesta Permette di aggiungere opzioni di collegamento Stampa e Richiesta 1 1 selezione multipla widgetlinks / opzioni
Comprendiamo questo file con un po 'di dettagli. Per prima cosa dichiariamo il nostro widget avvolgendolo usando l'identificativo univoco widgetlinks_links. Quindi, il genere l'attributo è usato per mappare il nome del file del widget, nel nostro caso lo sarà app / code / local / Envato / WidgetLinks / blocchi / links.php. Il tradurre e modulo gli attributi sono auto-esplicativi.
Inoltre, poiché vogliamo fornire la configurazione per il nostro widget, lo abbiamo dichiarato utilizzando il comando app / code / local / Envato / WidgetLinks / Modello / Options.php, da dove otterremo le nostre opzioni per il menu a discesa.
Quindi, creiamo il file del modello app / code / local / Envato / WidgetLinks / Modello / Options.php.
'print', 'label' => 'Print Button'), array ('value' => 'email', 'label' => 'Email pulsante di ricerca'),); Ha bisogno di spiegazioni? È solo usato per restituire le opzioni per il nostro menu a discesa di configurazione!
Andando oltre, crea il app / code / local / Envato / WidgetLinks / blocchi / links.php file e inserire il seguente codice in quel file.
Getdata ( 'link_options'); if (vuoto ($ link_options)) return $ html; $ arr_options = explode (',', $ link_options); if (is_array ($ arr_options) && count ($ arr_options)) foreach ($ arr_options come $ option) Switch ($ option) case 'print': $ html. = 'Stampare'; rompere; caso 'email': $ html. = 'Contattaci'; rompere; return $ html; Questo è il file che farà il vero lavoro di visualizzare i collegamenti del widget nel front-end. Per prima cosa, recuperiamo il valore della variabile di configurazione link_options utilizzando il seguente frammento di codice.
$ link_options = $ this-> getData ('link_options');
Sono solo le opzioni selezionate dall'amministratore del sito durante l'impostazione del widget nella pagina CMS. Il resto del codice è abbastanza facile da capire, mentre prepariamo il html uscita secondo le opzioni configurate.
Infine, dovremo creare il app / code / local / Envato / WidgetLinks / Helper / Data.php file solo per assicurarsi che il sistema di traduzione di Magento funzioni correttamente. È quasi un file vuoto, ma dovrebbe essere lì! Quindi creiamolo.
Grazie per la pazienza, ce l'abbiamo quasi fatta! Nella prossima sezione vedremo come utilizzare il nostro widget personalizzato nelle pagine CMS back - end.
Collega il widget usando l'interfaccia utente di amministrazione
Ora, cancella tutte le cache dal back-end di Magento e assicurati che il nostro modulo sia abilitato. Dopo, vai a CMS> Pagine e aggiungi una nuova pagina CMS usando Aggiungi nuova pagina. Compila le informazioni necessarie secondo necessità e mentre sei nel Soddisfare scheda, c'è un'icona nell'editor WYSIWYG come mostrato di seguito.
Clicca su quell'icona, che aprirà il Inserimento di widget interfaccia come mostrato nello screenshot seguente.
Nel Tipo di widget campo, seleziona il nostro widget personalizzato Opzioni di stampa e inchiesta. Quando lo selezioni, dovrebbe mostrare l'opzione di configurazione Opzioni di collegamento. Seleziona le opzioni che desideri e fai clic su Inserisci widget pulsante per inserire il nostro widget nella pagina CMS. Ecco come appare dopo l'inserimento nella pagina CMS.
Ora, salva la pagina CMS dopo aver riempito tutte le informazioni richieste e vai al front-end per vedere come appare!
Quindi, come puoi vedere, ci sono due link visualizzati nella pagina CMS nel front-end di Magento: Stampare e Contattaci. Quindi questo è stato un esempio molto semplice per capire il concetto di widget, e spero che tu possa estenderlo a qualcosa di più utile nel tuo caso secondo le tue esigenze.
Conclusione
I widget in Magento forniscono un modo per arricchire la funzionalità front - end in modo specifico per gli amministratori back - end non tecnici del sito. Oltre a ciò, Magento ti consente di creare widget personalizzati secondo le tue esigenze, che è davvero facile da configurare.
Quindi spero che questo tutorial ti abbia aiutato a cogliere il concetto di widget e lo sviluppo di widget personalizzati! In attesa di vostri pensieri nel feed qui sotto!
