Przewodnik dla początkujących po blokach i widżetach Magento

Bloki i widżety to kluczowe funkcje układu w Magento. Te dwie cechy są ze sobą ściśle powiązane i często są używane razem.

Jednym ze sposobów myślenia o blokach jest to, że są mini-stronami. Blok może również zawierać tekst, obrazy, wideo i inne. Ale ponieważ bloki są mniejsze, zobaczysz je na krawędziach witryny. Bloki są często wstawiane w nagłówki, paski boczne i stopki.

Bloki są jednak umieszczane za pomocą widżetów. Najpierw tworzysz blok, a następnie używasz widżetu, aby zdecydować, gdzie ten blok będzie wyświetlany.

Przeprowadzimy Cię przez kilka przykładów i pokażemy, jak działają bloki i widżety w Magento.

Ten przewodnik pochodzi z Magento 2 Explained, najlepiej sprzedającej się książki dla Magento 2. W tej książce używamy przykładu sklepu o nazwie „Orangeville”, więc zobaczysz, o czym mowa tutaj.

Wyjaśnienie tworzenia bloków Magento

Przejdźmy przez proces tworzenia naszego pierwszego Bloku. Będzie zawierać link HTML.

• Przejdź do „Treści”, a następnie „Bloki”.
• Kliknij „Dodaj nowy blok” w prawym górnym rogu.

• Wpisz „Key Links” jako „Tytuł bloku”. To właśnie odwiedzający zobaczą na ekranie.
• Wpisz „key_links” jako identyfikator. Ten ciąg jest tym, czego Magento używa do identyfikacji bloku, ale odwiedzający nigdy go nie zobaczą.

• Kliknij ikonę punktora na pasku narzędzi edytora:

• Wpisz „O Orangeville” jako punktor:
• Wybierz tekst „O Orangeville” i kliknij ikonę łącza.

• Zobaczysz teraz wyskakujące okienko. Wprowadź adres URL swojej strony „O Orangeville”. Jeśli nie masz pewności, co to jest, możesz otworzyć witrynę Magento w nowej karcie przeglądarki i znaleźć adres URL, którym prawdopodobnie będzie example.com/about-orangeville/.
• Kliknij „Wstaw”.
• Masz teraz link „O Orangeville” w swoim Bloku:

• Kliknij „Zapisz blok”.

Objaśnienie tworzenia widżetów Magento

Teraz stoimy przed wyzwaniem umieszczenia Twojego bloku w projekcie Twojej witryny. Tutaj przydają się widżety Magento. W Magento blok to tylko treść. To Widget kontroluje umieszczenie Bloku.

Jednak to nie wszystko, co potrafi Widget. Widget może umieścić nasze proste, nowe bloki, ale może również umieścić wiele innych funkcji.

• Przejdź do „Treści”, a następnie „Widżety”.
• Kliknij „Dodaj widżet”.
• Jako „Typ” wybierz „Blok statyczny CMS”.
• Jako „Motyw projektu” wybierz „Magento Luma”.
• Kliknij „Kontynuuj”.

• Wpisz „Kluczowe linki do Orangeville” jako „Tytuł widżetu”.
• W sekcji „Przypisz do widoków sklepu” wybierz „Wszystkie wyświetlenia w sklepie”.

Następnie będziemy kontrolować, w których adresach URL pojawia się ten blok.

• Kliknij „Dodaj aktualizację układu”.

• Wybierz „Wszystkie strony”.

• Wybierz "Łącza stopki CMS" dla opcji "Kontener".

Obie te opcje, „Wszystkie strony” i „Linki w stopce CMS”, mogą jeszcze nie mieć dla Ciebie większego sensu. Jednak zakończymy tworzenie widżetu, a w dalszej części rozdziału, w sekcji zatytułowanej „Objaśnienie rozmieszczenia widżetów Magento”, wyjaśnimy, dlaczego dokonaliśmy tych wyborów.

W sekcji „Aktualizacje układu” dokonamy drugiego wyboru, gdzie umieścić nasz widżet.

• Wybierz „Wszystkie typy produktów”.
• Ponownie wybierz „Linki w stopce CMS”.
• Po dodaniu obu tych opcji ekran będzie wyglądał jak na poniższym obrazku.

W tym momencie utworzyłeś widżet i powiedziałeś Magento, gdzie powinien pojawić się w Twojej witrynie: ten widżet pojawi się na wszystkich naszych Stronach i wszystkich naszych Produktach.

Teraz nadszedł czas, aby wybrać zawartość Widgetu, który będzie utworzonym wcześniej Blokiem.

• Kliknij „Opcje widżetów” na pasku bocznym.
• Kliknij „Wybierz blok”.

• Teraz możesz wybrać utworzony wcześniej blok „Kluczowe linki”:

• Kliknij „Zapisz”.
• Odwiedź przód swojej witryny, a zobaczysz, że Twój link jest teraz opublikowany w stopce. Utworzyłeś blok z zawartością i opublikowałeś go w widżecie.

Wspólne tworzenie bloków i widżetów

Podczas tworzenia bloków i widżetów są zdecydowanie trudne kroki. Wypróbujmy więc cały ten proces razem. Stworzymy drugi blok i umieścimy go na naszej stronie za pomocą widżetu. Ten blok powie ludziom, że mamy gwarancję 100% satysfakcji.

• Przejdź do „Treści”, a następnie „Bloki”.
• Kliknij „Dodaj nowy blok”.
• Tytuł: Satysfakcja gwarantowana
• Identyfikator: gwarancja

• Wpisz tekst dla swojego bloku. Napisałem: „Tu w Orangeville twoja satysfakcja jest naszym najwyższym priorytetem. Jeśli nie będziesz zadowolony, zwrócimy ci pieniądze”.

Następnie prześlemy obraz do naszego bloku.

• Umieść kursor w głównym obszarze zawartości, poniżej właśnie napisanego tekstu.
• Kliknij ikonę drzewa na pasku narzędzi edytora.
• Gdy zobaczysz wyskakujące okienko, kliknij małą ikonę pola.
• Znajdź obraz, który możesz przesłać. Wybrałem odznakę 100%.

• Kliknij „Wstaw plik”.
• Opis obrazu: Gwarancja satysfakcji
• Kliknij „Wstaw”.

• Masz teraz blok, który zawiera zarówno tekst, jak i nowy obraz.
• Kliknij „Zapisz blok”, aby zakończyć tworzenie tego bloku.

Następnie utwórzmy widżet, który wyświetli ten blok na naszej stronie.

• Przejdź do „Treści”, a następnie „Widżety”.
• Kliknij „Dodaj widżet”.
• Typ: Blok statyczny CMS
• Motyw projektu: Magento Luma

• Tytuł widżetu: Satysfakcja gwarantowana
• Przypisz do widoków sklepu: wszystkie widoki sklepu

• Aktualizacja układu: kategorie kotwic
• Pojemnik: główny pasek boczny
• Kliknij „Opcje widżetu” i wybierz utworzony właśnie blok „Satysfakcja gwarantowana”.

• Kliknij „Zapisz”.
• Odwiedź przód swojej witryny. Kliknij jeden z linków kategorii w górnym menu. Na poniższym obrazku kliknąłem „Owoc”. Zobaczysz teraz swoją gwarancję Blokuj na lewym pasku bocznym:

Objaśnienie umieszczania widżetów Magento

Jedno z typowych pytań, które otrzymuję od uczniów Magento, dotyczy umieszczania widżetów.

Skąd wiesz, aby wybrać „Łącza stopki CMS” lub „Główny pasek boczny” dla kontenera? W końcu istnieją 22 różne opcje, jak widać na poniższym obrazku.

Jaka jest różnica między „Po nagłówku strony” a „Po nagłówku strony”? Jaka jest różnica między „Stopką strony” a „Kontenerem stopki strony”? Te nazwy są tak podobne, że z pewnością mogą być mylące.

Niestety, nie ma pewności, jak to zrobić z góry, chociaż nazwa daje dobre wyobrażenie o umiejscowieniu:

• Po nagłówku strony: prawdopodobnie znajduje się w menu głównym.
• Główna treść Dół: prawdopodobnie znajduje się nisko w środkowej części ekranu, pod naszymi produktami lub treścią strony.
• Góra strony: pojawi się wysoko na stronach, ale nie na ekranach produktów.

Warto zauważyć, że te opcje zmieniają się, nawet w tej samej witrynie. Jeśli próbujesz umieścić Blok i wybrać „Wszystkie typy produktów” w „Opcjach układu” widżetu, otrzymasz inny zestaw opcji, pokazany na poniższym obrazku. Te opcje zapewniają miejsca docelowe, które mają sens tylko w przypadku ekranów Twoich produktów. Na przykład teraz widzisz opcje, które obejmują „Kontener linków społecznościowych produktu” i „Przejrzyj pola formularza przed”. Te miejsca docelowe widżetów nie mają sensu nigdzie poza ekranami produktów.

Z drugiej strony lista ta może być czasami znacznie krótsza. W następnej części tego rozdziału zobaczymy, że niektóre widżety mają tylko trzy opcje kontenerów.

Nie ma więc gwarancji, że dokładnie określisz, gdzie pojawi się Twój widżet, jeśli wybierzesz konkretny kontener. Podczas testowania tych różnych opcji konieczne będą pewne testy i eksperymenty.

Podsumowanie bloków i widżetów Magento

Bloki i widżety umożliwiają dodawanie nowych elementów do projektu witryny. Jednak istnieją pewne elementy w Twojej witrynie, których nie można łatwo zmodyfikować lub zastąpić z poziomu interfejsu administratora Magento. Wyglądają, jakby miały być blokami i widżetami, ale Magento nie stworzyło ich w ten sposób. Stworzyłem więc stronę z instrukcjami aktualizacji niektórych z tych domyślnych elementów.

Jeśli chcesz dowiedzieć się więcej o Magento, sprawdź Magento 2 Explained, najlepiej sprzedającą się książkę dla Magento 2.

Mamy również kilka świetnych samouczków Magento online, w tym:

• Przewodnik dla początkujących do zrozumienia podatków Magento
• Obrazy podstawowe, małe, miniatury i próbki w Magento
• Dowiedz się, czym są indeksy Magento 2 i jak nimi zarządzać