custom widget

Własny widget

Widżet (ang. widget) to komponent z dodatkowymi funkcjonalnościami, który możemy wstawić do strony CMS lub bloku, np: lista produktów z danej kategorii, galeria.
Przycisk „Wstaw Widget” znajduje się w pasku narzędziowym edytora treści.

widget magento2 cms page

Po otwarciu panelu, do wyboru mamy kilka gotowych widżetów:



Aby dodać własny widżet do tej listy, musimy przygotować nowy moduł:
– utwórz plik registration.php i zarejestruj moduł
app/code/Geek/Example/registration.php:

– utwórz plik konfiguracyjny module.xml
app/code/Geek/Example/etc/module.xml:

A teraz rozszerzymy moduł dodając do niego konfigurację widżetu. W tym celu:
– utwórz plik widget.xml
app/code/Geek/Example/etc/widget.xml:

Wewnątrz znaczników <widget></widget> definiujemy podstawowe elementy widżetu, min:

  • <label>Geek Test</label> – nazwa, która wyświetli się w liście widżetów,
  • <description>… widget description …</description> – informacja z podpowiedzią, czego dotyczy widżet,
  • <parameters></parameters> – parametry:
    <parameter name=”title” xsi:type=”text”> – pole tekstowe xsi:type=”text” z podpisem <label> „Title” </label>
    <parameter name=”content” xsi:type=”textarea”> – obszar tekstowy xsi:type=”textarea” z podpisem <label> „Content” </label>.

Bezpośrednio w tagu <widget> definiujemy klasę np: Test, w której możemy dodawać własny kod:

– tak więc utwórz plik: Test.php i ustaw w nim szablon, który będzie wczytany na frontendzie:
app/code/Geek/Example/Block/Widget/Test.php

– utwórz plik szablonu test.phtml i wyświetl w nim pola title i content:
app/code/Geek/Example/view/frontend/templates/widget/test.phtml

Z wiersza poleceń SSH wykonaj instrukcje:

Końcowy efekt powinien być taki 🙂 :

backend:
Wprowadź testową zawartość do widżetu jak na obrazku poniżej.

własny widget w magento 2

frontend:

 


Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *