W dzisiejszym artykule omówię najważniejsze kwestie związane z szablonami w Magento 2.1. Jest to pierwszy artykuł z serii Kurs Magento 2 dla front-end developerów.

Co to są szablony?

W Magento 2 szablon (theme) to zbiór plików takich jak layouty xml, pliki phtml, style, obrazki, skrypty JavaScript i inne. Wszystkie te pliki mają wpływ na to jak wygląda nasz sklep od frontu (storefront – czyli to co widzi użytkownik) lub backendu (panel administracyjny).

Do czego służą szablony?

Dzięki szablonom możemy nadpisywać standardowy wygląd różnych obszarów aplikacji, mówiąc bardziej technicznie przy pomocy szablonów można

  • zmienić wygląd funkcjonalności z Core Magento
  • zmienić wygląd funkcjonalności z zewnętrznych modułów
  • zmienić działanie komponentów JavaScript
  • nadpisać inne szablony (poprzez dziedziczenie)

Szablony dostarczone z instalacją Magento

Standardowo po instalacji Magento 2 są dostępne dwa szablony:

Magento Blank

Podstawowy szablon – idealny jako baza pod nowy, własny szablon.

Magento Luma

Szablon demonstracyjny, który jest standardowo włączony. W dużym skrócie można powiedzieć, że jest to Magento Blank wzbogacony przyjemne kolorki i kilka bajerków.

Nadpisywanie standardowych szablonów Magento 2.1

 

Nie jest zalecane, a wręcz odradzane jest modyfikowanie szablonów Magento. Jeśli będziesz zmieniał coś bezpośrednio w plikach szablonów Blank lub Luma to Twoje zmiany zostaną nadpisane przy aktualizacji Magento.

Aby uniknąć tego problemu zaleca się stworzenie nowego szablonu, który dziedziczy po Mageno/blank lub Magento/luma.

Tworzenie własnego szablonu

Aby utworzyć nowy szablon należy wykonać kilka czynności. W przykładzie poniżej pokażę jak stworzyć szablon o nazwie Frodigo/default dla frontendu.

  1. W folderze app/design/frontend tworzymy folder Frodigo jest to tzw. vendor name
  2. W nowo utworzonym folderze tworzymy kolejny folder default – to nazwa naszego szablonu
  3. W folderze app/design/Frodigo/default tworzymy plik theme.xml W pliku tym ustalamy nazwę szablonu, szablon po którym ma dziedziczyć oraz określamy preview image
  4. Dodajemy plik media/preview.jpg – możemy na razie skopiować ten plik z szablonu nadrzędnego.
  5. Dodajemy plik composer.json – teoretycznie nie musimy tego robić, ale w niektórych sytuacjach np. jeśli będziemy chcieli usunąć nasz szablon z Magento ten plik będzie nam potrzebny bo inaczej magento będzie sypać bugami po oczach 😉
  6. Dodajemy plik registration.php
  7. Logujemy się do panelu administracyjnego
  8. Przechodzimy do Content/Configuration/
  9. Wybieramy z tabeli scope dla którego chcemy zastosować nasz szablon – pierwszy wiersz w tabeli to ustawienie najbardziej globalne. Klikamy w Edit.
  10. Z rozwijanej listy wybieramy nasz szablon i klikamy Save configuration
    Wstęp do szablonów w Magento 2
  11. Czyścimy cache. Możemy to zrobić w panelu administracyjnym lub poprzez konsolę. Jeśli nie znasz poleceń konsolowych Magento to przeczytaj najpierw mój wcześniejszy post na temat poleceń bin/magento

Po odświeżeniu strony nasz szablon będzie już aktywny. Co prawda będzie on wyglądał dokładnie tak samo jak szablon nadrzędny czyli Magento/blank, ale jest to nasza baza do dalszej nauki.

Wstęp do szablonów w Magento 2.1 – podsumowanie

W tym artykule pokazałem jak jak stworzyć własny szablon w Magento 2. Możesz pobrać pliki tego przykładu z mojego githuba: https://github.com/Frodigo/Magento-2-1-frontend-tutorial-files W następnych postach opiszę m. in.:

  • jak wygląda struktura plików w szablonach
  • jak dodać własne logo
  • jak skonfigurować obrazki
  • jak dodawać własne pliki less

Jeśli coś jest niejasne lub masz jakieś pytania to zapraszam do zadawania pytań w komentarzach.

Share on FacebookTweet about this on TwitterShare on LinkedIn
  • Ainat

    „Dodajemy plik media/preview.jpg – możemy na razie skopiować ten plik z szablonu nadrzędnego.”

    Proszę napisać gdzie tworzymy ten plik, czy nazwa pliku to „media/preview.jpg”?
    Pewnie dla kogoś w temacie to nie problem , ale ja mam problem .

    • Marcin Kwiatkowski

      Nazwa pliku to „preview.jpg” i należy go umieścić w folderze „media” szablonu. Załączam obrazek z szablonu Luma na którym widać, w którym miejscu jest ten plik.

      https://uploads.disquscdn.com/images/73c88dbc86886a9a0e433ca8953159bdda42db4327a35105ce2891b320ba4705.png

      • Ainat

        nie jestem pewny czy jesteśmy w tych samych miejscach? moja wersja 2.1.9
        U mnie w domains/public_html/app/design/frontend mam jedynie pusty folder Magento. w folderze frontend utworzyłem nowy folder w/g Pana instrukcji i stanąłem. Nie mogę znaleźć tych folderów co są na fotce, czy mógł by Pan pokazać całą ścieżkę do theme-frontend-luma ?
        Ta struktura katalogów to z jakiegoś programu czy z panela admina na serwerze?
        Pozdrawiam

        • Marcin Kwiatkowski

          vendor/magento/theme-frontend-luma

          Jeśli Magento było instalowane przez composera to wszystkie pliki Magento będą w katalogu vendor.

  • Ainat

    12

  • Ainat

    dlaczego usuwa moje posty, chyba cztery razy się zdażyło?