Jak tworzyć niestandardowe widżety Magento 2?

Widgety umożliwiają administratorom sklepu Magento 2 dodawanie statycznych/dynamicznych treści do stron i bloków CMS, zapewniając wiele funkcjonalności i prostą implementację. Widgety to komponenty wielokrotnego użytku, które można dodać w dowolnym bloku CMS Magento 2.

W związku z tym umożliwiają programistom Magento 2 i administratorom sklepów dodawanie interaktywnych interfejsów i funkcji we front-endzie bez konieczności posiadania dużej wiedzy na temat programowania. Oczywiście nadal muszą znać się na Magento, aby stworzyć widżet.

Celem tego artykułu jest zademonstrowanie, jak tworzyć widżety w Magento 2, z naciskiem na niestandardowe widżety.

Widżety Magento 2

Magento 2 to najnowsza wersja Magento, jednej z wiodących platform eCommerce. Widgety odgrywają ważną rolę w Magento 2, zwłaszcza z punktu widzenia funkcjonalności. Oprócz oferowania większej funkcjonalności po stronie użytkownika, widżety Magento pomagają administratorom dodawać statyczne lub dynamiczne treści do stron i bloków CMS.

Ale z technicznego punktu widzenia… Czym jest widżet Magento?

Widżet Magento 2 to zasadniczo rozszerzenie Magento zaprojektowane z zestawem zaawansowanych opcji konfiguracyjnych. Ze względu na większą elastyczność i kontrolę służą do dostarczania treści informacyjnych i marketingowych za pośrednictwem panelu Administratora Magento. Jedną z zalet widżetów Magento 2 jest to, że możesz do nich „wywoływać” z dowolnego miejsca na stronie.

Widgety umożliwiają również administratorom dodawanie interaktywnych interfejsów i funkcji w interfejsie Magento, bez konieczności kodowania (właściwie nawet bez znajomości kodu).

Magento 2 oferuje wiele rodzajów widżetów

Zanim przejdziemy do implementacji, przyjrzyjmy się bliżej standardowej gamie widżetów obsługiwanych w Magento 2:

• Ostatnio porównywane produkty — musisz zaobserwować ten widżet podczas przeglądania produktów w swoich ulubionych witrynach e-commerce. Ten widżet służy do wyświetlania ostatnio oglądanych lub porównywanych produktów na pasku bocznym strony katalogu. Mogą również pojawić się w Twoim sklepie w zależności od motywu. Jednym z kluczowych punktów jest to, że można skonfigurować liczbę produktów wymienionych w każdym bloku.
• Zamówienia i zwroty — Za każdym razem, gdy kupujesz produkt online, istnieje niezbędny widżet, który zapewnia szybki dostęp do zamówień i zwrotów. Jeśli użytkownik chce przejrzeć zamówione lub zwrócone produkty, może podać niezbędne dane, takie jak identyfikator zamówienia, ostatnia data rozliczenia, znajdź zamówienie według, e-mail itp.
• Lista produktów katalogowych — to kolejny powszechnie używany widżet; każdy zna sekcje „polecanych produktów” w witrynach eCommerce, ponieważ prawie każda witryna ma taką. Polecane produkty umieszczane są zazwyczaj na stronie głównej w celu promocji produktu. Konkretny produkt jest wyświetlany z krótkimi szczegółami, takimi jak cena, funkcje i opcje, takie jak dodaj do koszyka, dodaj do listy życzeń i dodaj do funkcji porównania.
• Łącze do produktów katalogowych — Głównym celem widżetu Łącze do produktów katalogowych jest umożliwienie administratorom zarządzania łączami do produktów, w tym produktów powiązanych, sprzedaży krzyżowej, sprzedaży dodatkowej i produktów pogrupowanych. Gdy odwiedzisz stronę z łączem do produktu w katalogu, zobaczysz różne kategorie katalogu zainicjowane wprowadzeniem. Znajdziesz tam łącza do produktów katalogowych z różnymi linkami podrzędnymi, takie jak przypisanie łączy do produktów katalogowych, atrybuty łączy do produktów katalogowych, usuwanie łączy do produktów katalogowych, typy łączy do produktów katalogowych i inne.
• Link do kategorii katalogu — W witrynach eCommerce, zwłaszcza opartych na produktach, nie brakuje widżetów linków do kategorii katalogu.
• Niestandardowy widżet bloku — możliwe jest łączenie bloków, widżetów i niestandardowych stron w celu wyświetlenia części katalogu lub innych informacji, które mogą być przydatne dla klientów.

Można je wykorzystać do poprawy doświadczenia użytkownika i dodania funkcjonalności do sklepu. Bloki i widżety to ważne elementy większości witryn eCommerce. Pozwalają użytkownikom na szybkie generowanie i kontrolowanie treści i mogą być używane do wykonywania takich czynności jak:

• Dodaj dynamiczne/informacyjne bloki na paskach bocznych
• Dodaj banery na stronach CMS
• Dodaj niestandardowe menu
• Dodaj interaktywne interfejsy użytkownika

Etui na niestandardowe widżety Magento 2

Każda witryna lub strona internetowa wymaga wielu funkcji, aby działać płynnie i angażować większą liczbę odwiedzających, a tworzenie angażującego doświadczenia użytkownika jest koniecznością w eCommerce. W tym miejscu do gry wchodzą niestandardowe widżety Magento 2 i to właśnie mają robić.

Widgety to mniejsze zestawy kodu, które możemy dodać do sklepu. Korzystając z prostych łączy do kodu dynamicznego, widżety mogą wyświetlać wszelkiego rodzaju przydatne dane, które pomagają odwiedzającym i poprawiają ich wrażenia. Możliwość zwiększenia zaangażowania za pomocą niedrogich widżetów wielokrotnego użytku oczywiście wiele znaczy, ale czasami nie jest to tylko kwestia wyboru i dodania gotowego widżetu.

Korzystanie z funkcjonalności Custom Widget w Magento 2 pozwala nam tworzyć własne szablony widżetów. Niestandardowy widżet może czasami oferować jeszcze lepszy sposób edytowania lub dodawania wysokiej jakości treści wewnątrz bloków lub stron CMS.

Zanim jednak przejdziemy do niestandardowych widżetów, musimy przeanalizować standardowy przypadek użycia widżetów w Magento 2. Przyjrzyjmy się czemuś podstawowemu i szeroko stosowanemu, na przykład:

Jak dodać nową listę produktów do strony głównej za pomocą widżetu?

Ten prosty widżet umożliwia nam dodawanie nowej listy produktów tam, gdzie jest to wymagane na stronie internetowej, a istnieje wiele sposobów, dzięki którym nowe produkty mogą być wyświetlane w Magento 2.

Aby dodać listę produktów Magento do strony głównej, wystarczy wykonać prosty proces:

• Zaloguj się do strony administratora Magento 2 i przejdź do Treść > Widget

• Kliknij przycisk Dodaj widżet . Następnie zostaniemy przekierowani do zakładki Ustawienia , gdzie musimy wybrać opcje i motywy Typ i Projekt .

• Widzimy zrzut ekranu poniżej, na którym wybraliśmy już listę nowych produktów w katalogu , którą będziemy wyświetlać w interfejsie użytkownika.

• Jako opcję Design Theme wybraliśmy LUMA.

• Po wybraniu obu wartości musimy przejść do drugiego kroku, w którym musimy wypełnić właściwości witryny sklepowej. Teraz musimy ustawić tytuł widżetu i właściwości witryny sklepowej , takie jak tytuł widżetu i widok sklepu . Używamy Toptal New Product List i All Store Views .

• Najważniejszą częścią jest sekcja Aktualizacje układu , która poinformuje nas, gdzie ma się pojawić ten widżet (np. strona główna, strona listy, strona kasy itp.). Możliwe jest również zdefiniowanie obszaru, w którym kontener będzie się pojawiał – na przykład pod nagłówkiem, nad stopką, stopką itp.

Ustawienia aktualizacji układu udostępniają następujące opcje:

• Wyświetl wł.: określona strona lub wszystkie strony.
• Strona: Strona główna CMS
• Pojemnik: główny obszar zawartości
• Szablon: Tutaj możesz wybrać, w jakim stylu chcesz wyświetlać nowe produkty Tryb siatki lub Tryb listy

Po wybraniu opcji Określona strona możemy przystąpić do ustawiania właściwości, pozwalających na wyświetlenie widżetu na konkretnej stronie. Tutaj mamy menu rozwijane Strona , które pozwala nam wybrać stronę główną CMS . Następnie musimy wybrać kontener i szablon, których użyjemy do wyświetlenia widżetu w określonej sekcji.

Na koniec przechodzimy do ostatniej zakładki, która zawiera opcje widżetów. Tutaj możemy ustawić Warunek , np. rodzaj produktów, które mają być wyświetlane, lub uwzględnić limity liczby produktów i tak dalej.

Jeśli wybierzemy Wszystkie produkty , w tej sekcji zostanie wyświetlony ostatnio dodany produkt. Jeśli wybierzemy Nowe produkty , w tej sekcji będą wyświetlane tylko te produkty, które oznaczyliśmy jako „Nowe”. Jeśli chcemy pozwolić naszym klientom kontrolować nawigację dla wielu list, musimy ustawić opcję Display Page Control na „Tak”. Jeśli wybraliśmy „Tak”, to konieczne jest wpisanie liczby produktów do listy.

W opcji Liczba produktów do wyświetlenia możemy zdefiniować, ile produktów można wyświetlić w sekcji Nowe produkty . W razie potrzeby możemy również zmienić ustawienia Cache Lifetime .

Teraz musimy zapisać ten widget i opróżnić pamięć podręczną Magento 2. Można to zrobić z poziomu administratora lub wiersza poleceń. Do opróżnienia pamięci podręcznej możemy użyć następującego polecenia:

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

Wtedy będziemy mogli zobaczyć nowości na stronie głównej.

Jak stworzyć niestandardowy widżet w Magento 2

Teraz dowiemy się, jak tworzyć niestandardowe widżety dla Magento 2. Niestandardowe widżety oferują najlepszy sposób dodawania i edytowania treści wewnątrz bloków lub stron CMS, ponieważ można je dostosować do Twoich wymagań.

Zacznijmy od podstaw. Wszyscy wiemy, jak stworzyć moduł, prawda? Na wypadek, gdybyś nie był zaznajomiony z tworzeniem niestandardowych modułów w Magento 2, mamy świetny samouczek, który szczegółowo omawia ten proces.

Przejdźmy teraz do krok po kroku procesu tworzenia niestandardowych widżetów w Magento 2.

Najpierw musimy utworzyć nowy moduł, który będzie wymagał przestrzeni nazw i folderów modułów. W tym przykładzie użyjemy Toptal jako przestrzeni nazw i CustomWidget jako nazwy modułu. Zacznijmy więc jak zwykle od composer.json , registration.php i etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Ten plik będzie ładowany przez Composer za każdym razem, gdy go uruchomimy, mimo że w rzeczywistości nie używamy Composera z naszym modułem.

Teraz musimy zarejestrować nasz moduł w Magento, więc musimy utworzyć register.php w następującej lokalizacji: app/code/Toptal/CustomWidget/registration.php .

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

Teraz utworzymy ostatni plik rejestracyjny, 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>

Po wykonaniu kroku rejestracji tworzymy plik konfiguracyjny 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>

W powyższym kodzie otrzymujemy Title i Content jako parametry, które mają być wyświetlane wszędzie tam, gdzie wywoływany jest widżet. Znacznik <widget> zawiera klasę bloku Toptal\CustomWidget\Block\Widget\Samplewidget . Ta klasa jest spowolniona w Block/Widget/Samplewidget.php . Klasa instruuje nasze widżety, których szablonu użyć.

Następny fragment kodu pokazuje, jak zdefiniować blok dla widżetu; ustawimy tutaj nasz szablon. Zobaczmy, jak to wygląda.

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 jest zadeklarowany powyżej kodu. W tym pliku przypisujemy niestandardowy plik szablonu wewnątrz zmiennej $_template .

Następnie zobaczymy, co zawiera nasz szablon widżetu.

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; ?>

Tutaj możemy zobaczyć, jak pobrać wartość z parametrów widżetu. To proste:

$this->getData('widgettitle');

oraz

$this->getData('widgetcontent');

Jaki jest nasz efekt końcowy? Pokażę wam, jak to wygląda w Magento Admin:

Teraz musimy zapisać ten widget i opróżnić pamięć podręczną. Jak wspomniano wcześniej, można to zrobić z poziomu administratora lub wiersza poleceń, używając php bin/magento cache:clean i php bin/magento cache:flush

Ten prosty moduł możesz pobrać tutaj. Oczywiście nie jest to pełny szablon widżetu Magento 2, ale nadal jest pomocą w nauce. Jeśli potrzebujesz więcej zasobów lub jeśli jesteś stosunkowo nowy w Magento, oficjalna dokumentacja Magento 2 jest oczywistym miejscem do rozpoczęcia.

Na koniec chciałbym wspomnieć o kilku osobistych blogach deweloperskich, które okazały się całkiem przydatne. Alan Storm ma prawdopodobnie najbardziej dydaktyczne treści, jeśli chodzi o naukę Magento, i myślę, że powinieneś również zajrzeć na blog Alana Kenta.

Widżety: kluczowa część dużego obrazu

Celem tego artykułu było dostarczenie przewodnika po tworzeniu widżetów w Magento 2, zaczynając od podstawowego samouczka krok po kroku obejmującego tworzenie widżetów Magento 2 i tworzenie niestandardowych widżetów. Jestem oczywiście fanem tych ostatnich, ponieważ niestandardowe rozwiązania zapewniają większą elastyczność i funkcjonalność.

Widżety Magento zapewniają kluczową funkcjonalność front-endu, więc nie ma nic do powiedzenia, że ​​sprytne niestandardowe widżety mogą pomóc przenieść Twój kolejny projekt Magento na wyższy poziom. Pozwalają na zaimplementowanie jeszcze większej funkcjonalności, dodawanie różnego rodzaju elementów do strony głównej za pomocą różnych widżetów, a ostatecznie po prostu zapewniają programistom większą swobodę twórczą.

Ale to nie tylko kwestia poprawy komfortu użytkownika i konwersji lub stworzenia niesamowicie wyglądającego projektu. Wszystkie są oczywiście priorytetem dla każdego klienta, ale są mniejsze, mniej oczywiste korzyści. Na przykład widżety Magento mogą zaoszczędzić dużo czasu i bólu głowy również po stronie administratora, a każdy klient również chce zaoszczędzić roboczogodziny.

Jednak wykracza to poza zakres tego artykułu. Moim zamiarem było dostarczenie szybkiego przeglądu technicznego, łatwego do naśladowania samouczka widżetu Magento 2, a nie omawianie ROI i marketingu.