Tworzenie konfiguracji systemowej dla modułów

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:

struktura plików i katalogów system xml magento2

1. NOWY MODUŁ

Na początek musimy utworzyć podstawowy moduł. W tym celu dodaj dwa pliki:

/app/code/Geek/MyModule/etc/module.xml

<?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>

<?xml version="1.0"?>

</config>

/app/code/Geek/MyModule/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Geek_MyModule',
    __DIR__
);

<?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

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>

vvv<?xml version="1.0"?>

</tab>

<label>My module</label>

<resource>Geek_MyModule::module_config</resource>

<label>Configuration</label>

<label>Enable</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

<comment>Prompt</comment>

</field>

<label>Textarea</label>

</field>

<label>Select</label>

<source_model>Geek\MyModule\Model\Config\Source\Custom</source_model>

</field>

<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>

</field>

</group>

</section>

</system>

</config>

1. Element <tab></tab> – dotyczy zakładki w menu.

<tab id="geek" translate="label" sortorder="10">
    <label>Geek</label>
</tab>

</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.

<section id="mymodule" translate="label" sortorder="130" showindefault="1" showinwebsite="1" showinstore="1">
...
</section>

...

</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.

<group id="general" translate="label" type="text" sortorder="10" showindefault="1" showinwebsite="0" showinstore="0">
...
</group>

...

</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:

<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>

<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:

<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>

<label>Select</label>

<source_model>Geek\MyModule\Model\Config\Source\Custom</source_model>

</field>

Źródło: Geek\MyModule\Model\Config\Source\Custom.php:

<?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')],
        ];
    }
}

<?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:

<field id="display_text" translate="label" type="text" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0">
    <label>Text</label>
    <comment>Prompt</comment>
</field>

<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:

<field id="custom_textarea" translate="label" type="textarea" sortorder="1" showindefault="1" showinwebsite="0" showinstore="0">
    <label>Textarea</label>
</field>

<label>Textarea</label>

</field>

2.5.5. Element <field type=”image”>…</field> – pole z obrazkiem:

<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>

<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>

</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

<?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>

<?xml version="1.0"?>

<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”

#konfiguracja #magento #system.xml

Tworzenie konfiguracji systemowej dla modułów

1. NOWY MODUŁ

2. KONFIGURACJA PLIKU SYSTEM.XML

3. KONFIGURACJA PLIKU CONFIG.XML

KOMENTARZE