Dezvoltare personalizată în Magento

Pentru o perioadă de timp, Magento a fost punctul de referință printre cadrele de comerț electronic disponibile pe piață. Creditul se îndreaptă spre multitudinea de caracteristici îmbogățite și la extinderea cadrului de bază pentru a dezvolta extensii personalizate.

În acest tutorial, veți învăța conceptul de widget-uri în Magento și cum le puteți folosi. Voi demonstra cum vă puteți crea un widget personalizat, care este o modalitate foarte puternică de a adăuga în Magento funcții suplimentare.

Introducere în widgeturi

Ca dezvoltator Magento sau administrator de site-uri, probabil sunteți conștient de structura layout-ului de la Magento. Aproape fiecare bucată de conținut afișată în partea din față a Magento este generată de "Blocuri de conținut". Blocurile Magento reprezintă o modalitate foarte puternică de a structura conținutul din front-end și de a vă oferi flexibilitate în a vă permite să vă ocupați de acestea utilizând fișiere XML.

Pe de altă parte, widgeturile sunt bunuri mici, care permit administratorilor site-ului să activeze funcții noi în front-end folosind un set predefinit de opțiuni de configurare. Putem spune că widgeturile sunt mai prietenoase administratorilor în comparație cu blocurile, deoarece nu trebuie să se ocupe de codurile scurte de bloc pentru a introduce blocurile. Pentru a insera un widget în pagină, trebuie doar să selectați widget-ul din meniul widget-urilor și să selectați opțiunile de configurare, dacă există.

Să încercăm să înțelegem acest lucru printr-un exemplu simplu. În paginile de informații ale site-ului dvs., doriți să afișați linkurile "Imprimare" și "Contactați-ne". Legătura "Imprimare" permite utilizatorilor să tipărească pagina selectată, iar linkul "Contactați-ne" le permite să trimită un e-mail de interogare departamentului de asistență. Pentru a realiza acest lucru, putem dezvolta un widget Magento care permite administratorilor site-ului să introducă acest widget în pagina statică selectată a site-ului.

Deci, fără a mai pierde niciun timp, să ne aruncăm cu gust și să vedem exact ce este nevoie pentru a dezvolta un widget personalizat! Și da, voi rămâne cu exemplul amintit mai sus.

Dezvoltarea personalizată a widgeturilor

Vom dezvolta un widget personalizat, care va permite administratorului site-ului să introducă linkurile "Imprimare" și "Contactați-ne" în paginile CMS. De asemenea, vom furniza configurația widget pentru linkuri astfel încât administratorul să poată selecta ce link-uri vrea să afișeze în pagina CMS.

Presupun că sunteți familiarizat cu structura modulelor Magento. Mai întâi, să vedem structura de fișiere pe care va trebui să o implementăm pentru widget-ul personalizat.

app / etc / module / Envato_All.xml: Este un fișier folosit pentru a activa modulul widget.
app / code / local / Envato / WidgetLinks / etc / config.xml: Este un fișier de configurare a modulelor.
app / code / local / Envato / WidgetLinks / etc / widget.xml: Este un fișier declarație widget care este folosit pentru a declara informații și parametri widget.
app / code / local / Envato / WidgetLinks / Model / Options.php: Este un fișier model care oferă opțiunile pentru configurație.
app / code / local / Envato / WidgetLinks / Helper / Data.php: Este un fișier care este doar acolo conform standardelor.
app / code / local / Envato / WidgetLinks / Block / Links.php: Logica afișajului widget-ului merge aici.

Setarea fișierelor

Conform convențiilor Magento, mai întâi trebuie să creăm fișierul de activare a modulelor. Crea app / etc / module / Envato_All.xml și lipiți următorul conținut în acel fișier. Am folosit "Envato" ca spațiu de nume al modulelor noastre și "WidgetLinks" ca numele modulului nostru. Acesta va permite modulul "WidgetLinks" în mod implicit.

     Adevărat local

De acum încolo, vom crea fișierele necesare sub app / code / local / Envato / WidgetLinks, care este calea modulului widget. Crea app / code / local / Envato / WidgetLinks / etc / config.xml și lipiți următorul conținut în acel fișier. După cum puteți vedea, tocmai am declarat numele de model, helper și bloc de clase conform convențiilor XML ale modulului Magento.

     0.0.1      Envato_WidgetLinks_Helper     Envato_WidgetLinks_Block     Envato_WidgetLinks_Model

Acum, pentru lucrurile interesante: să creați app / code / local / Envato / WidgetLinks / etc / widget.xml fișierul și inserați conținutul de mai jos.

    Opțiuni de imprimare și de interogare Permite adăugarea opțiunilor legăturii de tipărire și de interogare   Link Opțiuni 1 1 selectare multipla widgetlinks / opțiuni

Să înțelegem acest fișier în detaliu. În primul rând, declarăm widget-ul nostru prin împachetarea acestuia utilizând identificatorul unic widgetlinks_links. Apoi, tip atributul este folosit pentru a mapa numele fișierului widget - în cazul nostru va fi app / code / local / Envato / WidgetLinks / Block / Links.php. Traduceți și modul atributele sunt explicative.

În plus, pe măsură ce vrem să furnizăm configurația pentru widget-ul nostru, am declarat acest lucru folosind Etichete. Puteți declara cât mai mulți parametri pe care doriți să le oferiți, dar în cazul nostru este doar un singur parametru numit . Va fi un simplu drop-down cu mai multe selecții, cu două opțiuni: "Imprimare" și "Contactați-ne". Și da, etichetați hărți în fișierul model app / code / local / Envato / WidgetLinks / Model / Options.php, de unde vom primi opțiunile noastre pentru drop-down.

Apoi, să creăm fișierul model app / code / local / Envato / WidgetLinks / Model / Options.php.

 'print', 'label' => 'Butonul de imprimare'), array ('value' => 'email', 'label' => 'Butonul de e-mail de interogare'););

Are nevoie de explicații? Este folosit pentru a returna opțiunile pentru meniul derulant de configurare!

Mergeți mai departe, creați app / code / local / Envato / WidgetLinks / Block / Links.php fișier și introduceți următorul cod în acel fișier.

getData ( 'link_options'); dacă (gol ($ link_options)) return $ html;  $ arr_options = explode (',', $ link_options); dacă is_array ($ arr_options) && count ($ arr_options)) foreach ($ arr_options ca opțiune $) Switch (opțiunea $) case 'print': $ html.Imprimare
„; pauză; cazul "e-mail": $ html. = 'Contacteaza-ne
„; pauză;  returnați $ html;

Acesta este fișierul care va face munca reală de afișare a legăturilor widget în partea frontală. În primul rând, preluăm valoarea variabilei de configurare link_options utilizând următorul fragment de cod.

$ link_options = $ this-> getData ("link_options");

Sunt doar opțiunile selectate de administratorul site-ului în timp ce configurați widget-ul în pagina CMS. Restul codului este destul de ușor de înțeles, pe măsură ce pregătim html ieșire conform opțiunilor configurate.

În cele din urmă, va trebui să creați app / code / local / Envato / WidgetLinks / Helper / Data.php doar pentru a vă asigura că sistemul de traducere al Magento funcționează corect. Este aproape un dosar gol, dar ar trebui să fie acolo! Deci, să o creăm.

Vă mulțumim pentru răbdare, aproape că am făcut-o! În următoarea secțiune, vom vedea cum să folosim widgetul personalizat în paginile CMS din back-end.

Conectați widgetul utilizând interfața de administrare

Acum, ștergeți toate cache-urile din spatele Magento și asigurați-vă că modulul nostru este activat. După aceea, du-te la CMS> Pagini și adăugați o nouă pagină CMS utilizând Adăugați o pagină nouă. Completați informațiile necesare după cum este necesar și în timp ce vă aflați în Conţinut , există o pictogramă în editorul WYSIWYG, după cum se arată mai jos.

Faceți clic pe acea pictogramă, care va deschide Introducerea widgetului după cum se arată în următoarea imagine de ecran.

În Tip widget câmp, selectați widgetul personalizat Opțiuni de imprimare și de interogare. Când selectați acest lucru, ar trebui să apară opțiunea de configurare Link Opțiuni. Selectați opțiunile dorite și faceți clic pe Introduceți un widget pentru a introduce widget-ul nostru în pagina CMS. Iată cum arată după inserarea în pagina CMS.

Acum, salvați pagina CMS după ce ați completat toate informațiile solicitate și vă îndreptați spre front-end pentru a vedea cum arată!

După cum puteți vedea, există două link-uri afișate pe pagina CMS în partea din față a Magento: Imprimare și Contacteaza-ne. Deci, acesta a fost un exemplu foarte simplu pentru a înțelege conceptul de widget-uri și sper că îl puteți extinde la ceva mai util în cazul dvs., conform cerințelor dvs..

Concluzie

Widgeturile din Magento oferă o modalitate de a îmbogăți funcționalitatea front-end special pentru administratorii back-end non-tehnici ai site-ului. În afară de asta, Magento vă permite să creați widget-uri personalizate conform cerințelor dvs., ceea ce este foarte ușor de configurat.

Deci, sper că acest tutorial v-a ajutat să înțelegeți conceptul de widget-uri și dezvoltarea de widget-uri personalizate! Așteaptă cu nerăbdare gândurile tale în feed-ul de mai jos!

Cod