Cum se creează widgeturi Magento 2 personalizate

Widgeturile permit administratorilor magazinului Magento 2 să adauge conținut static/dinamic la paginile și blocurile CMS, oferind o mulțime de funcționalități și o implementare simplă. Widgeturile sunt componente reutilizabile care pot fi adăugate în orice bloc CMS al Magento 2.

Prin urmare, acestea permit dezvoltatorilor Magento 2 și administratorilor de magazine să adauge interfețe și funcții interactive în front-end fără a fi nevoie să știe prea multe despre programare. Desigur, ei încă trebuie să cunoască modul în care se află Magento pentru a crea un widget.

Scopul acestui articol este de a demonstra cum să creați widget-uri în Magento 2, cu accent pe widget-uri personalizate.

Widgeturi Magento 2

Magento 2 este cea mai recentă versiune a Magento, una dintre cele mai importante platforme de comerț electronic de astăzi. Widgeturile joacă un rol important în Magento 2, mai ales din punct de vedere al funcționalității. Pe lângă faptul că oferă mai multe funcționalități pentru utilizator, widget-urile Magento îi ajută pe administratori să adauge conținut static sau dinamic paginilor și blocurilor CMS.

Dar, din punct de vedere tehnic... Ce este un widget Magento?

Un widget Magento 2 este în esență o extensie Magento concepută cu un set de opțiuni de configurare avansate. Datorită flexibilității și controlului mai mari, acestea sunt utilizate pentru a furniza informații și conținut de marketing prin intermediul panoului de administrator Magento. Unul dintre avantajele widget-urilor Magento 2 este că le puteți „apela” de oriunde pe site.

Widgeturile permit, de asemenea, administratorilor să adauge interfețe și funcții interactive în front-end-ul Magento, fără a fi nevoie să codifice (de fapt, fără să știe măcar să codifice).

Magento 2 oferă mai multe tipuri de widget-uri

Înainte de a trece la implementare, să aruncăm o privire mai atentă asupra gamei standard de widget-uri acceptate în Magento 2:

• Produse comparate recent — Trebuie să fi observat acest widget în timp ce răsfoiați produse pe site-urile dvs. preferate de comerț electronic. Acest widget este folosit pentru a afișa produse recent vizualizate sau comparate în bara laterală a unei pagini de catalog. Ele pot apărea și în magazinul dvs., în funcție de temă. Unul dintre punctele cruciale este că numărul de produse care sunt listate în fiecare bloc poate fi configurat.
• Comenzi și retururi — Ori de câte ori cumpărați un produs online, există un widget obligatoriu care oferă acces rapid la comenzi și retururi. Dacă un utilizator dorește să revizuiască produsele comandate sau returnate, acesta poate completa detaliile necesare, cum ar fi ID-ul comenzii, Ultima dată de facturare, Găsiți comanda prin, E-mail etc.
• Lista de produse din catalog — Acesta este un alt widget utilizat pe scară largă; toată lumea este familiarizată cu secțiunile „produs recomandat” de pe site-urile de comerț electronic, deoarece aproape fiecare site are unul. Produsele prezentate sunt de obicei plasate pe pagina principală în scopul promovării produsului. Produsul specific este afișat cu detalii scurte, cum ar fi prețul, caracteristicile și opțiunile precum adăugare în coș, adăugare la lista de dorințe și adăugare la o funcție de comparare.
• Link produs catalog — Scopul principal al widgetului Link produs catalog este acela că permite administratorilor să gestioneze linkuri pentru produse, inclusiv produse conexe, vânzări încrucișate, vânzări în plus și produse grupate. Când vizitați pagina de linkuri pentru produse din catalog, veți vedea diferite categorii de catalog inițiate cu o introducere. Acolo, veți găsi legături de produse din catalog cu diferite sublinkuri, cum ar fi atribuirea linkurilor de produse de catalog, atributele de linkuri de produse din catalog, eliminarea linkurilor de produse din catalog, tipurile de linkuri de produse din catalog și multe altele.
• Link pentru categorii de catalog — Pe site-urile de comerț electronic, în special pe cele bazate pe produse, nu veți găsi lipsă de widgeturi de linkuri pentru categoriile de catalog.
• Widget bloc personalizat — Este posibil să combinați blocuri, widget-uri și pagini personalizate pentru a afișa părți din catalog sau alte informații pe care clienții le pot găsi utile.

Acestea pot fi folosite pentru a îmbunătăți experiența utilizatorului și pentru a adăuga funcționalități magazinului. Blocurile și widget-urile sunt elemente importante ale majorității site-urilor de comerț electronic. Acestea permit utilizatorilor să genereze și să controleze rapid conținutul și pot fi folosite pentru a face lucruri precum:

• Adăugați blocuri dinamice/informaționale în barele laterale
• Adăugați bannere în paginile CMS
• Adăugați meniuri personalizate
• Adăugați interfețe de utilizator interactive

Carcasa pentru widget-urile personalizate Magento 2

Orice site web sau pagină web are nevoie de multe funcționalități pentru a funcționa fără probleme și pentru a atrage mai mulți vizitatori, iar crearea unei experiențe de utilizator captivante este o necesitate în comerțul electronic. Acolo intră în joc widget-urile personalizate Magento 2 și asta ar trebui să facă.

Widgeturile sunt seturi mai mici de coduri pe care le putem adăuga în magazin. Folosind linkuri simple către codul dinamic, widget-urile pot afișa tot felul de date utile, adaptate pentru a ajuta vizitatorii și pentru a le îmbunătăți experiența. Capacitatea de a spori implicarea folosind widget-uri reutilizabile, cu costuri reduse, înseamnă, evident, mult, dar uneori nu este doar o chestiune de alegere și adăugare a unui widget disponibil.

Utilizarea funcției de widget personalizat din Magento 2 ne permite să ne creăm propriile șabloane de widget. Un widget personalizat poate oferi uneori o modalitate și mai bună de editare sau adăugare de conținut de calitate în blocurile sau paginile CMS.

Cu toate acestea, înainte de a trece la widget-uri personalizate, trebuie să examinăm un caz de utilizare standard pentru widget-uri în Magento 2. Să aruncăm o privire la ceva de bază și utilizat pe scară largă, de exemplu:

Cum să adăugați o nouă listă de produse la pagina de pornire folosind un widget

Acest widget simplu ne permite să adăugăm o nouă listă de produse oriunde este necesar pe site și există diferite moduri prin care produsele noi pot fi listate în Magento 2.

Pentru a adăuga o listă de produse Magento pe pagina de pornire, trebuie doar să urmați un proces simplu:

• Conectați-vă la pagina de administrare Magento 2 și accesați Conținut > Widget

• Faceți clic pe butonul Adăugați widget . După aceea, vom fi redirecționați către fila Setări , unde trebuie să selectăm opțiunile și temele Tip și Design .

• Putem vedea captura de ecran de mai jos, în care am selectat deja Lista de produse noi din catalog pe care o vom afișa pe front-end.

• Am selectat LUMA ca opțiune pentru tema de design.

• După selectarea ambelor valori, trebuie să trecem la a doua etapă, unde trebuie să completăm proprietățile vitrinei. Acum trebuie să setăm titlul widgetului și proprietățile magazinului , cum ar fi titlul widgetului și vizualizarea magazinului . Folosim Lista de produse noi Toptal și toate vizualizările magazinului .

• Cea mai importantă parte este secțiunea Actualizări aspect , care ne va spune unde va apărea acest widget (de exemplu, pagina de pornire, pagina de listare, pagina de finalizare a achiziției etc.). De asemenea, este posibil să definiți o zonă în care va apărea containerul - de exemplu, sub antet, deasupra subsolului, subsolului etc.

Setările Actualizărilor aspectului vă oferă următoarele opțiuni:

• Afișare activată: Pagina specificată sau Toate paginile.
• Pagina: Pagina de pornire CMS
• Container: Zona principală de conținut
• Șablon: Aici puteți selecta în ce stil doriți să afișați produsele noi Modul Grilă sau Modul Listă

Odată ce selectăm opțiunea Pagină specificată , putem trece la setarea proprietăților, permițându-ne să afișăm widget-ul pe o anumită pagină. Aici avem meniul derulant Pagină , care ne permite să selectăm Pagina de pornire CMS . Apoi, trebuie să selectăm containerul și șablonul pe care le vom folosi pentru a afișa widget-ul într-o anumită secțiune.

În cele din urmă, trecem la ultima filă, care include opțiuni pentru widget-uri. Aici, putem seta Condiția , cum ar fi tipul de produse care urmează să fie afișate sau să includem limite ale numărului de produse și așa mai departe.

Dacă selectăm Toate produsele , atunci cel mai recent produs adăugat va fi afișat în această secțiune. Dacă selectăm Produse noi , atunci numai acele produse pe care le-am marcat ca „Nou” vor fi afișate în această secțiune. Dacă dorim să lăsăm clienții noștri să controleze navigarea pentru mai multe liste, trebuie să setăm Controlul paginii de afișare la „Da”. Dacă am selectat „Da”, atunci este necesar să introduceți numărul de produse în listă.

În Număr de produse de afișat , putem defini câte produse pot fi afișate în secțiunea Produse noi . De asemenea, putem modifica setările Cache Lifetime dacă este necesar.

Acum trebuie să salvăm acest widget și să ștergem memoria cache Magento 2. Acest lucru se poate face din admin sau din linia de comandă. Putem folosi următoarea comandă pentru a goli memoria cache:

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

Apoi vom putea vedea noile produse pe pagina de start.

Cum se creează un widget personalizat în Magento 2

Acum, vom învăța cum să creăm widget-uri personalizate pentru Magento 2. Widgeturile personalizate oferă cea mai bună modalitate de a adăuga și edita conținut în blocurile sau paginile CMS, deoarece pot fi adaptate pentru a se potrivi cerințelor dumneavoastră.

Să începem cu elementele de bază. Știm cu toții cum să creăm un modul, nu? Doar în cazul în care nu sunteți familiarizat cu crearea de module personalizate în Magento 2, avem un tutorial grozav care acoperă procesul în profunzime.

Acum, să trecem la procesul pas cu pas de a crea widget-uri personalizate în Magento 2.

Mai întâi, trebuie să creăm un nou modul care va necesita spații de nume și foldere de module. Pentru acest exemplu, vom folosi Toptal pentru spațiul de nume și CustomWidget pentru numele modulului. Deci, să începem ca de obicei cu composer.json , registration.php și etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Acest fișier va fi încărcat de Composer de fiecare dată când îl rulăm, chiar dacă de fapt nu folosim Composer cu modulul nostru.

Acum trebuie să ne înregistrăm modulul cu Magento, așa că ni se cere să creăm register.php în următoarea locație: app/code/Toptal/CustomWidget/registration.php .

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

Acum, vom crea ultimul fișier de înregistrare, 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>

După finalizarea pasului de înregistrare, în continuare creăm fișierul de configurare 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>

În codul de mai sus, obținem Title și Content ca parametri care urmează să fie afișați oriunde este apelat widget-ul. Eticheta <widget> conține clasa de bloc Toptal\CustomWidget\Block\Widget\Samplewidget . Această clasă este decelerata în Block/Widget/Samplewidget.php . Clasa indică widget-urilor noastre ce șablon să folosească.

Următorul fragment de cod arată cum să definiți un bloc pentru widget; ne vom seta șablonul aici. Să vedem cum arată.

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 este declarat mai sus de cod. În acest fișier, atribuim un fișier șablon personalizat în interiorul variabilei $_template .

În continuare, vom vedea ce conține șablonul nostru de 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; ?>

Aici, putem vedea cum să ridicăm valoarea din parametrii widgetului. E simplu:

$this->getData('widgettitle');

și

$this->getData('widgetcontent');

Care este rezultatul nostru final? Permiteți-mi să vă arăt cum arată în Magento Admin:

Acum trebuie să salvăm acest widget și să ștergem memoria cache. După cum sa subliniat anterior, acest lucru se poate face din admin sau din linia de comandă, folosind php bin/magento cache:clean și php bin/magento cache:flush

Puteți descărca acest modul simplu de aici. Evident, nu este un șablon complet de widget Magento 2, dar este totuși un ajutor de învățare. În cazul în care aveți nevoie de mai multe resurse sau dacă sunteți relativ nou în Magento, documentația oficială Magento 2 este locul evident pentru a începe.

În cele din urmă, aș dori să menționez câteva bloguri personale pentru dezvoltatori pe care le-am găsit destul de utile. Alan Storm are probabil cel mai didactic conținut când vine vorba de învățarea Magento și cred că ar trebui să consultați și blogul lui Alan Kent.

Widgeturi: o parte crucială a imaginii de ansamblu

Scopul acestui articol a fost de a oferi un ghid pentru crearea de widget-uri în Magento 2, începând cu un tutorial de bază pas cu pas care acoperă dezvoltarea widget-ului Magento 2 și crearea de widget-uri personalizate. Sunt, evident, un fan al acestuia din urmă, deoarece soluțiile personalizate tind să ofere mai multă flexibilitate și funcționalitate.

Widgeturile Magento oferă o funcționalitate front-end crucială, așa că nu este deloc exagerat să spunem că widget-urile personalizate inteligente vă pot ajuta să vă aduceți următorul proiect Magento la nivelul următor. Ne permit să implementăm și mai multe funcționalități, să adăugăm diferite tipuri de articole pe pagina de pornire folosind diferite widget-uri și, în cele din urmă, pur și simplu oferă dezvoltatorilor mai multă libertate creativă.

Dar nu este doar o chestiune de îmbunătățire a experienței utilizatorului și a conversiilor sau de a crea un design minunat. Toate sunt, evident, o prioritate pentru orice client, dar există câștiguri mai mici, mai puțin evidente. De exemplu, widget-urile Magento pot economisi mult timp și dureri de cap și în partea de administrator, iar fiecare client caută să economisească și ore de lucru.

Cu toate acestea, asta depășește scopul acestui articol. Intenția mea a fost să ofer o privire de ansamblu tehnică rapidă, un tutorial de widget Magento 2 ușor de urmat, nu să discut despre ROI și marketing.