24 May 2021 / Published in TechBlogs

Magento 2 システム構成フィールドタイプ

Magento 2 System Configuration Field Types

Magento 2 でアプリケーションの機能に必要な単一の値を保存するためのシンプルな方法を探しているなら、システム構成が適切なソリューションです。Magento 1 と同様に、Magento 2 のシステムコンフィグレーションフィールドは、データベースの core_config_data テーブルにあります。しかし、XMLのコンフィグファイルにはちょっとした違いがあります。

この記事では、Magento 2にカスタムシステム設定を追加する方法を説明します。以下のステップでその方法を探ってみましょう。

ステップ1：エクステンションのコンフィグにACLを宣言する
ステップ2: 拡張機能設定ファイルの追加
ステップ3：カスタムコンフィグタブ「Example tab config」とコンフィグフィールドのグループを追加する
リストフィールドタイプ
まとめ

ステップ1：エクステンションのコンフィグにACLを宣言する

<?xml version="1.0"?>
<!--
/**
 * Location: magento2_root/app/code/Vendorname/Extensionname/etc/acl.xml
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Vendorname_Extensionname::config" title="Extension config example" sortOrder="50" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

ステップ2: 拡張機能設定ファイルの追加

<?xml version="1.0"?>
<!--
/**
 * Location: magento2_root/app/code/Vendorname/Extensionname/etc/adminhtml/system.xml
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="example_tab" translate="label" sortOrder="1000">
            <label>Example tab config</label>
        </tab>
        <section id="example_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Example config section</label>
            <tab>example_tab</tab>
            <resource>Vendorname_Extensionname::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="dropdown_example" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dropdown with custom source model example</label>
                    <source_model>Vendorname\Extensionname\Model\Config\Source\Custom</source_model>
                </field>
                <field id="text_example" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Text example</label>
                </field>
                <field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Image example (with a comment)</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <upload_dir config="system/filesystem/media" scope_info="1">logo</upload_dir>
                    <base_url type="media" scope_info="1">logo</base_url>
                    <comment><![CDATA[Allowed file types: jpeg, gif, png.]]></comment>
                </field>
                <field id="depends_example" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dependant text field example with validation</label>
                    <depends>
                        <field id="*/*/dropdown_example">1</field>
                    </depends>
                    <validate>validate-no-empty</validate>
                </field>
                <field id="textarea_example" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Textarea example</label>
                </field>
            </group>
        </section>
    </system>
</config>

ステップ3：カスタムコンフィグタブ「Example tab config」とコンフィグフィールドのグループを追加する

system.xmlファイルでは、タブを宣言する必要があります。

<tab id="example_tab" translate="label" sortOrder="1000">
    <label>Example tab config</label>
</tab>

そして、このタブに属するconfigセクションには、フィールドのグループ（）とacl関係（””タグ）が一つだけあります。

<section id="example_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Example config section</label>
    <tab>example_tab</tab>
    <resource>Vendorname_Extensionname::config</resource>
    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>General</label>
        ......................
    </group>
</section>

第1の例のコンフィグ

カスタムソースモデルを持つドロップダウンが最初のフィールドになります。

<field id="dropdown_example" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Dropdown with custom source model example</label>
    <source_model>Vendorname\Extensionname\Model\Config\Source\Custom</source_model>
</field>

そして、そのソースモデルを作成する必要があります:

<?php

//Location: magento2_root/app/code/Vendorname/Extensionname/Model/Config/Source/Custom.php
namespace Vendorname\Extensionname\Model\Config\Source;

class Custom implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {

        return [
            ['value' => 0, 'label' => __('Zero')],
            ['value' => 1, 'label' => __('One')],
            ['value' => 2, 'label' => __('Two')],
        ];
    }
}

第2の構成例

<field id="text_example" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Text example</label>
</field>

第3の例コンフィグ

画像ファイルをアップロードできるフィールドは、ビルトインのnsckendモデルを使用し、uploaf_dirパラメータを受け付ける、より興味深いフィールドです。

<field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Image example (with a comment)</label>
    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
    <upload_dir config="system/filesystem/media" scope_info="1">logo</upload_dir>
    <base_url type="media" scope_info="1">logo</base_url>
    <comment><![CDATA[Allowed file types: jpeg, gif, png.]]></comment>
</field>

第4の例コンフィグ

この設定は、例題のドロップダウンで値1（ラベルは「One」）が””タグで選択された場合にのみ表示されます。

<field id="depends_example" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Dependant text field example with validation</label>
    <depends>
        <field id="*/*/dropdown_example">1</field>
    </depends>
    <validate>validate-no-empty</validate>
</field>

第5の例コンフィグ

シンプルなtextareaの例は、最後の構成例:

<field id="textarea_example" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Textarea example</label>
</field>

ここでは、Magento 2 の例の設定セクションでいくつかのフィールドを設定するプロセスを行っただけです。今度は、上記のすべてをまとめて表示する番です (Admin Panel > Stores > Configuration)

magento2_root/app/code/Magento/Config/Model/Config/Source にアセスすると、ほとんどのソースモデルを簡単に見つけることができます。バックエンドのモデルは magento2_root/app/code/Magento/Config/Model/Config/Backend に格納されています。

また、magento2_root/lib/web/mage/validation.js の rule 変数で、可能なバリデーションクラスを確認する必要があります (例: alphanumeric, zip-range, validate-email, etc.)。

リストフィールドタイプ

ボタン
チェックボックス
コラム
日付
エディタブルマルチセレクト
エディター
フィールドセット
ファイル
ギャラリー
非表示
画像
イメージファイル
ラベル
リンク
マルチライン
マルチセレクト
ノート
曖昧
パスワード
ラジオ
ラジオ
リセット
セレクト
送信
テキスト
テキストエリア
時間

まとめ

まとめ
以上、Magento 2 のシステム設定をカスタムで追加するための詳細な手順をご紹介しました。この記事があなたのMagento 2ストアを成長させるために役立つことを願っています。

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

お問い合わせ

►►►サービスについて

Magento, Sitecore, Shopify Plus, BigCommerce, Amazon Marketplace

Magento 2 システム構成フィールドタイプ

ステップ1：エクステンションのコンフィグにACLを宣言する

ステップ2: 拡張機能設定ファイルの追加

ステップ3：カスタムコンフィグタブ「Example tab config」とコンフィグフィールドのグループを追加する

第1の例のコンフィグ

第2の構成例

第3の例 コンフィグ

第4の例 コンフィグ

リストフィールドタイプ

まとめ

デモを申し込む

►►►サービスについて

関連トピック

Magento 2 編集及び削除の追加

Magento 2 UIフォームの作成

Magento 2のイベントリストとその利用方法

第3の例コンフィグ

第4の例コンフィグ