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 😉
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
1 2 3 4 5 6 7 |
<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> – 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.
1 2 3 4 5 6 |
<?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 😉