Magento 2 – Definiowanie nowego motywu

W dzisiejszym poście przedstawię jak szybko można zdefiniować własny szablon w Magento 2.

Struktura

Zacznijmy od podstaw – czyli naszej struktury.

Najważniejszą częścią dla front-end developera w magento jest folder app/design. To w nim znajdują się wszystkie pliki związane z wyglądem naszego sklepu. Pliki związane z warstwą prezentacji aplikacji mogą również znajdować się w folderze danego modułu ( app/code ), nadpisywanie ich jednak zaleca się w folderze app/design, ale o tym w innym poście 😉

app/design/frontend/<Vendor>/
├── <theme>/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── css/
│   │   │   ├── source/
│   │   ├── fonts/
│   │   ├── images/
│   │   │   ├── logo.svg
│   │   ├── js/
│   ├── media/
│   ├── registration.php
│   ├── theme.xml

app/design/frontend/<Vendor>/

├── <theme>/

│ ├── etc/

│ │ ├── view.xml

│ ├── web/

│ │ ├── css/

│ │ │ ├── source/

│ │ ├── fonts/

│ │ ├── images/

│ │ │ ├── logo.svg

│ │ ├── js/

│ ├── media/

│ ├── registration.php

│ ├── theme.xml

Do podmiany:

<vendor> – nazwa „dostawcy”, zazwyczaj nazwa firmy dostarczającej moduł/szablon
<theme> – nazwa szablonu

theme.xml

Czas na określenie podstawowych informacji o naszym szablonie.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme</title>
     <parent>Magento/blank</parent>
     <media>
         <preview_image>media/preview.jpg</preview_image>
     </media>
 </theme>

<title>New theme</title>

<parent>Magento/blank</parent>

<media>

<preview_image>media/preview.jpg</preview_image>

</media>

</theme>

<title> – nazwę naszego szablonu
<parent> – określa po jakim szablonie dziedziczyć ma nasz szablon. Do wyboru mamy Magento/blank oraz Magento/luma. Nie jest zalecane wykorzystanie lumy jako szablonu do dziedziczenia. Sama luma wykorzystuje szablon blanka jako podstawe.
<preview_image> – ścieżka do grafiki podglądu strony.

registration.php

„Tutaj dzieje się magia” – zadaniem tego pliku jest rejestracja naszego szablonu w systemie.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/<Vendor>/<theme>',

__DIR__

);

view.xml

Plik z podstawową konfiguracją szablonu, odpowiada on między innymi za wielkość obrazków użytych w szablonie. Należy go skopiować z folderu bazowego szablonu.

Dla blanka:

vendor\magento\theme-frontend-blank\etc\view.xml

Dla lumy:

vendor\magento\theme-frontend-luma\etc\view.xml

Po więcej zapraszam do oficjalnej dokumentacji 😉