Ghidul pentru începători pentru blocuri și widget-uri Magento

Publicat: 2022-02-16

Blocurile și widgeturile sunt caracteristicile cheie de aspect în Magento. Aceste două caracteristici sunt foarte strâns legate și sunt adesea folosite împreună.

O modalitate de a ne gândi la Blocuri este că sunt mini-Pagini. Un bloc poate conține, de asemenea, text, imagini, videoclipuri și multe altele. Dar, deoarece blocurile sunt mai mici, le vei vedea pe marginile site-ului tău. Blocurile sunt adesea inserate în anteturi, bare laterale și subsoluri.

Cu toate acestea, blocurile sunt plasate folosind widget-uri. Mai întâi creați un bloc și apoi utilizați un widget pentru a decide unde va fi afișat acel bloc.

Să vă prezentăm câteva exemple și să vă arătăm cum funcționează blocurile și widgeturile în Magento.

Acest ghid este preluat din Magento 2 Explained, cea mai bine vândută carte pentru Magento 2. Folosim exemplul unui magazin numit „Orangeville” în cartea respectivă, așa că veți vedea la care se face referire aici.


Crearea blocurilor Magento explicată

Să trecem prin procesul de creare a primului nostru bloc. Acesta va conține un link HTML.

  • Accesați „Conținut”, apoi „Blocuri”.
  • Faceți clic pe „Adăugați bloc nou” în colțul din dreapta sus.

adăugați un nou bloc magento

  • Introduceți „Legături cheie” ca „Titlu bloc”. Aceasta este ceea ce vizitatorii vor vedea pe ecran.
  • Introduceți „key_links” ca identificator. Acest șir este ceea ce Magento folosește pentru a identifica blocul, dar vizitatorii nu îl vor vedea niciodată.

link-uri cheie bloc magento

  • Faceți clic pe pictograma marcator din bara de instrumente a editorului:

editarea blocului magento

  • Introduceți „Despre Orangeville” ca punct:
  • Selectați textul „Despre Orangeville” și faceți clic pe pictograma linkului.

link în interiorul blocului magento

  • Acum veți vedea o fereastră pop-up. Introduceți adresa URL a paginii dvs. „Despre Orangeville”. Dacă nu sunteți sigur ce este acesta, puteți deschide site-ul dvs. Magento într-o filă nouă de browser și puteți găsi adresa URL, care este probabil să fie example.com/about-orangeville/.
  • Faceți clic pe „Inserare”.
  • Acum aveți un link „Despre Orangeville” în blocul dvs.:

despre Orangeville

  • Faceți clic pe „Salvare bloc”.

Crearea widgeturilor Magento explicată

Acum avem provocarea de a vă plasa blocul în designul site-ului dvs. Aici sunt utile Widgeturile Magento. În Magento, un bloc este doar o bucată de conținut. Widgetul este cel care controlează plasarea blocului.

Cu toate acestea, asta nu este tot ce poate face un widget. Un widget poate plasa blocurile noastre simple și noi, dar poate plasa și multe alte funcții.

  • Accesați „Conținut”, apoi „Widget-uri”.
  • Faceți clic pe „Adăugați widget”.
  • Pentru „Tip”, alegeți „Bloc static CMS”.
  • Pentru „Temă de design”, alegeți „Magento Luma”.
  • Faceți clic pe „Continuare”.

creați blocul magent

  • Introduceți „Link-uri cheie Orangeville” pentru „Titlul widgetului”.
  • Sub „Atribuiți vizualizărilor magazinului”, selectați „Toate vizualizările magazinului”.

link-uri cheie bloc magento

În continuare, vom controla pe ce adrese URL apare acest bloc.

  • Faceți clic pe „Adăugați o actualizare a aspectului”.

actualizări de aspect magento

  • Alegeți „Toate paginile”.

aspectul tuturor paginilor magento

  • Alegeți „Legături de subsol CMS” pentru opțiunea „Container”.

subsolul cms magento

Ambele opțiuni, „Toate paginile” și „Legături de subsol CMS”, ar putea să nu aibă încă prea mult sens pentru dvs. Cu toate acestea, vom termina de crearea widget-ului și mai târziu în capitol, în secțiunea numită „Plasarea widgetului Magento explicată”, vom explica mai multe despre motivul pentru care am făcut aceste alegeri.

Sub „Actualizări de aspect”, vom face o a doua alegere pentru a plasa widget-ul nostru.

  • Alegeți „Toate tipurile de produse”.
  • Alegeți din nou „Legături de subsol CMS”.
  • După ce adăugați ambele opțiuni, ecranul dvs. va arăta ca imaginea de mai jos.

plasarea blocurilor magento

În acest moment, ați creat widget-ul și ați spus Magento unde ar trebui să apară pe site-ul dvs.: acest widget va apărea pe toate Paginile și toate Produsele noastre.

Acum este timpul să alegeți conținutul widgetului, care va fi Blocul pe care l-ați creat mai devreme.

  • Faceți clic pe „Opțiuni widget” în bara laterală.
  • Faceți clic pe „Selectați bloc”.

selectați blocul magento

  • Acum puteți alege blocul „Legături cheie” pe care l-ați creat mai devreme:

selectați blocul magento

  • Faceți clic pe „Salvare”.
  • Vizitați partea din față a site-ului dvs. și veți vedea că linkul dvs. este acum publicat în subsol. Ați creat un bloc cu conținutul și l-ați publicat într-un widget.

nou bloc magento vizibil


Crearea de blocuri și widget-uri împreună

Există cu siguranță câțiva pași dificili pe măsură ce creați blocuri și widget-uri. Deci, să încercăm împreună întreg acest proces. Vom crea un al doilea bloc și îl vom plasa pe site-ul nostru cu ajutorul unui widget. Acest bloc va spune oamenilor că avem o garanție de satisfacție 100%.

  • Accesați „Conținut”, apoi „Blocuri”.
  • Faceți clic pe „Adăugați bloc nou”.
  • Titlu: Satisfacție garantată
  • Identificator: garantie

bloc magento nou

  • Introduceți text pentru blocul dvs. Am scris „Aici, la Orangeville, satisfacția ta este prioritatea noastră principală. Dacă nu ești mulțumit, îți vom returna banii”.

nou bloc de imagini magento

În continuare, vom încărca o imagine pentru blocul nostru.

  • Plasați cursorul în zona de conținut principal, sub textul pe care tocmai l-ați scris.
  • Faceți clic pe pictograma arborelui din bara de instrumente a editorului.
  • Când vedeți caseta pop-up, faceți clic pe pictograma casetei mici.
  • Găsiți o imagine pe care o puteți încărca. Am ales o insignă 100%.

adăugați blocul magento de imagine

  • Faceți clic pe „Inserați fișierul”.
  • Descrierea imaginii: Garanție de satisfacție
  • Faceți clic pe „Inserare”.

se încarcă imaginea magento

  • Acum aveți un bloc care conține atât text, cât și noua imagine.
  • Faceți clic pe „Salvare bloc” pentru a termina crearea acestui bloc.

bloc magento nou cu imagine

În continuare, să creăm widgetul care va afișa acest bloc pe site-ul nostru.

  • Accesați „Conținut”, apoi „Widget-uri”.
  • Faceți clic pe „Adăugați widget”.
  • Tip: bloc static CMS
  • Tema de design: Magento Luma

setările blocului magento

  • Titlul widgetului: Satisfacție garantată
  • Atribuiți vizualizărilor magazinului: Toate vizualizările magazinului

proprietățile blocului magento

  • Actualizare aspect: categorii de ancorare
  • Container: bară laterală principală
  • Faceți clic pe „Opțiuni widget” și alegeți blocul „Satisfacție garantată” pe care tocmai l-ați creat.

opțiunile widget magento alege

  • Faceți clic pe „Salvare”.
  • Vizitați partea din față a site-ului dvs. Faceți clic pe unul dintre linkurile categoriei din meniul de sus. În imaginea de mai jos, am dat clic pe „Fructe”. Acum veți vedea Blocul dvs. de garanție în bara laterală din stânga:

bloc magento în bara laterală


Plasarea widgetului Magento este explicată

O întrebare frecventă pe care o primesc de la cursanții Magento este despre plasarea widgeturilor.

De unde știi să alegi „CMS Footer Links” sau „Sidebar Main” pentru Container? La urma urmei, există 22 de opțiuni diferite, așa cum puteți vedea în imaginea de mai jos.

Care este diferența dintre „After Page Header” și „After Page Header Top”? Care este diferența dintre „Subsol de pagină” și „Container de subsol de pagină”? Aceste nume sunt atât de asemănătoare încât pot fi cu siguranță confuze.

containere de widget-uri magento

Din păcate, nu există o modalitate sigură de a spune în avans, deși numele vă va oferi o idee bună despre plasare:

  • După antetul paginii: este probabil să fie în meniul principal.
  • Partea de jos a conținutului principal: acesta este probabil jos în partea centrală a ecranului, sub produsele noastre sau conținutul paginii.
  • Începutul paginii: aceasta va apărea sus pe Pagini, dar nu pe ecranele Produs.

Este de remarcat faptul că aceste opțiuni se schimbă, chiar și pe același site. Dacă încercați să plasați un bloc și alegeți „Toate tipurile de produse” pentru „Opțiunile de aspect” ale widgetului dvs., atunci veți obține un set diferit de opțiuni, prezentat în imaginea de mai jos. Aceste opțiuni oferă unele destinații de plasare care au sens doar pentru ecranele produselor dvs. De exemplu, acum vedeți opțiuni care includ „Container de linkuri sociale pentru produse” și „Câmpurile formularului de revizuire înainte”. Acele destinații de plasare widget nu au sens nicăieri, cu excepția ecranelor cu produse.

Pe de altă parte, această listă poate fi uneori mult mai scurtă. În următoarea parte a acestui capitol, vom vedea că unele Widgeturi vin cu doar trei opțiuni Container.

Deci, nu există nicio modalitate garantată de a spune exact unde va apărea widgetul dvs. dacă alegeți un anumit Container. Vor fi implicate unele teste și experimente pe măsură ce testați aceste opțiuni diferite.

produs container widget magento


Rezumatul blocurilor și widgeturilor Magento

Blocurile și widgeturile vă permit să adăugați elemente noi la designul site-ului dvs. Cu toate acestea, există unele elemente pe site-ul dvs. care nu pot fi ușor modificate sau înlocuite din interfața de administrare a Magento. Arată ca și cum ar trebui să fie blocuri și widget-uri, dar Magento nu le-a creat așa. Deci, am creat o pagină cu instrucțiuni pentru actualizarea unora dintre aceste elemente implicite.

Dacă sunteți gata să aflați mai multe despre Magento, consultați Magento 2 Explained, cea mai bine vândută carte pentru Magento 2.

Avem, de asemenea, câteva tutoriale Magento mai grozave online, inclusiv:

  • Ghidul începătorilor pentru înțelegerea taxelor Magento
  • Imagini de bază, mici, miniaturi și Swatch în Magento
  • Aflați ce sunt indecșii Magento 2 și cum îi puteți gestiona