W Magento2, w prosty sposób można dodać do panelu admina konfigurację własnego modułu. Polega to głównie na przygotowaniu pliku system.xml z opisem kontrolek formularza. Dane z tego pliku zapisywane są w tabeli core_config_data. Mechanizm zapisu i odczytu obsługuje Magento, tak więc nie musimy tego kodować. Formularz z ustawieniami pojawi się w sekcji menu: SKLEPY -> Ustawienia -> Konfiguracja (STORES -> Settings -> Configuration).
W celach edukacyjnych zbudujemy formularz jak na powyższym obrazku, czyli z typowymi polami: lista rozwijana, pole tekstowe, obszar tekstowy i obrazek.
Struktura plików i katalogów w ostatecznej odsłonie będzie miała postać, jak na obrazku poniżej. Jak widać jest to moduł w katalogu Geek, o nazwie MyModule:

1. NOWY MODUŁ
Na początek musimy utworzyć podstawowy moduł. W tym celu dodaj dwa pliki:
/app/code/Geek/MyModule/etc/module.xml
1 2 3 4 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Geek_MyModule" setup_version="1.0.0" /> </config> |
/app/code/Geek/MyModule/registration.php
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Geek_MyModule', __DIR__ ); |
2. KONFIGURACJA PLIKU SYSTEM.XML
A teraz sedno. Tworzymy plik system.xml z konfiguracją menu i formularza. Pod listingiem zamieściłem wytłumaczenie poszczególnych tagów i ich atrybutów.
/app/code/Geek/MyModule/etc/adminhtml/system.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
vvv<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <tab id="geek" translate="label" sortOrder="10"> <label>Geek</label> </tab> <section id="mymodule" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <class></class> <label>My module</label> <tab>geek</tab> <resource>Geek_MyModule::module_config</resource> <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Configuration</label> <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Enable</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> <field id="display_text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Text</label> <comment>Prompt</comment> </field> <field id="custom_textarea" translate="label" type="textarea" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Textarea</label> </field> <field id="dropdown" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Select</label> <source_model>Geek\MyModule\Model\Config\Source\Custom</source_model> </field> <field id="picture" translate="label" type="image" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Image</label> <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model> <upload_dir config="system/filesystem/media" scope_info="1">picture</upload_dir> <base_url type="media" scope_info="1">picture</base_url> <comment><![CDATA[Allowed files: jpg, png, gif]]></comment> </field> </group> </section> </system> </config> |
1. Element <tab></tab> – dotyczy zakładki w menu.
1 2 3 |
<tab id="geek" translate="label" sortorder="10"> <label>Geek</label> </tab> |
Atrybuty:
- id – identyfikator zakładki, który będzie powiązany z <section>, poprzez element <tab></tab>,
- translate – wskazuje element do tłumaczenia: label,
- sortOrder – kolejność zakładki w menu.
2. Element <section></section> – zawartość sekcji strony z formularzem.
1 2 3 |
<section id="mymodule" translate="label" sortorder="130" showindefault="1" showinwebsite="1" showinstore="1"> ... </section> |
Atrybuty:
- id – identyfikator sekcji,
- translate – tłumaczenie elementu label,
- sortOrder – kolejność sekcji,
- showInDefault, showInWebsite, showInStore – dotyczy widoczności w poszczególnych widokach strony: Default, Website, Store:

2.1. Element <class></class> – nazwa klasy stylów CSS.
2.2. Element <label>My module</label> – nagłówek podsekcji menu.
2.3. Element <tab>geek</tab> – identyfikator zakładki zgodny z <tab id=”geek”>…</tab>.
2.4. Element <resource>Geek_MyModule::module_config</resource> – plik konfiguracyjny ACL, w którym definiuje się role dla użytkownika (administratora). Role dostępne są w: Menu-> System -> User Roles -> {User} -> Role Resources.
2.5. Element <group></group> – grupuje kontrolki formularza. Atrybuty są identyczne jak w <section>, więc pomijam ich opis.
1 2 3 |
<group id="general" translate="label" type="text" sortorder="10" showindefault="1" showinwebsite="0" showinstore="0"> ... </group> |
2.5.1. Element <label>Configuration</label> – etykieta, nagłówek nad formularzem z kontrolkami.
2.5.2. Element <field type=”select”>…</field> – lista rozwijana:
1 2 3 4 |
<field id="enable" translate="label" type="select" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0"> <label>Enable</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> |
- <label>Enable</label> – podpis pola,
- <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> – źródło danych dla listy rozwijanej, pobierane z gotowej klasy Yesno.
Dane można pobrać również z własnej klasy modelu, jak w drugim przykładzie:
1 2 3 4 |
<field id="dropdown" translate="label" type="select" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0"> <label>Select</label> <source_model>Geek\MyModule\Model\Config\Source\Custom</source_model> </field> |
Źródło: Geek\MyModule\Model\Config\Source\Custom.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php namespace Geek\MyModule\Model\Config\Source; class Custom implements \Magento\Framework\Option\ArrayInterface { /** * @return array */ public function toOptionArray() { return [ ['value' => 0, 'label' => __('item 1')], ['value' => 1, 'label' => __('item 2')], ['value' => 2, 'label' => __('item 3')], ]; } } |
2.5.3. Element <field type=”text”>…</field> – pole tekstowe:
1 2 3 4 |
<field id="display_text" translate="label" type="text" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0"> <label>Text</label> <comment>Prompt</comment> </field> |
Tag <comment>Prompt</comment> pozwala wprowadzić pod kontrolką formularza krótki tekst z podpowiedzią, itp.
2.5.4. Element <field type=”textarea”>…</field> – obszar tekstowy:
1 2 3 |
<field id="custom_textarea" translate="label" type="textarea" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0"> <label>Textarea</label> </field> |
2.5.5. Element <field type=”image”>…</field> – pole z obrazkiem:
1 2 3 4 5 6 7 |
<field id="picture" translate="label" type="image" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Image</label> <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model> <upload_dir config="system/filesystem/media" scope_info="1">picture</upload_dir> <base_url type="media" scope_info="1">picture</base_url> <comment><![CDATA[Allowed files: jpg, png, gif]]></comment> </field> |
Jak już zapewne domyślasz się, element backend_model – wskazuje adres do klasy modelu obrazka; natomiast w upload_dir – wskazujemy ścieżkę do katalogu, w którym zapisywane będą obrazki.
3. KONFIGURACJA PLIKU CONFIG.XML
Plik config.xml pozwala ustawić m.in. wartości domyślne w polach formularza.
app/code/Geek/MyModule/etc/config.xml
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd"> <default> <mymodule> <general> <enable>1</enable> <custom_textarea>Content ...</custom_textarea> </general> </mymodule> </default> </config> |
W powyższym przykładzie wartości domyślne ustawione są dla dwóch pól z pliku system.xml o identyfikatorach id=”enable” i id=”custom_textarea”. Pola te znajdują się w sekcji id=”mymodule”, stąd też znacznik: <mymodule>…</mymodule> w config.xml.
I to już wszystko w tym temacie. Jak widać, tworzenie konfiguracji systemowej nie jest trudne i sprowadza się zaledwie do prostych zapisów w plikach xml. Pozostałe akcje wykonuje za nas Magento.
Zobacz również: „ODCZYT KONFIGURACJI SYSTEMOWEJ NA STRONIE Z WIDOKIEM”