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
    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
        <title>Frodigo/default</title>
        <parent>Magento/blank</parent>
        <media>
            <preview_image>media/preview.jpg</preview_image>
        </media>
    </theme>
    
  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 😉
    {
        "name": "frodigo/theme-frontend-default",
        "description": "N/A",
        "require": {
            "php": "~5.6.5|7.0.2|7.0.4|~7.0.6",
            "magento/theme-frontend-blank": "100.1.*",
            "magento/framework": "100.1.*"
        },
        "type": "magento2-theme",
        "version": "100.1.0",
        "license": [
            "OSL-3.0",
            "AFL-3.0"
        ],
        "autoload": {
            "files": [
                "registration.php"
            ]
        }
    }
    
  6. Dodajemy plik registration.php
    <?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::THEME,
        'frontend/Frodigo/default',
        __DIR__
    );
    
  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.