Plugin Konfiguration erstellen – Shopware 6

Shopware 6 ist zwar noch ganz frisch, aber wir können es einfach nicht abwarten selbst Hand anzulegen. Du sicherlich auch und deswegen hier ein kleiner Guide, wie du eine Konfiguration für dein Plugin erstellen kannst.

Also fangen wir an mit dem ersten Schritt. Das erstellen der Plugin Konfiguration. Alles was du dafür tun musst ist eine config.xml im Verzeichnis Resources/config deines Plugins zu erstellen. Diese sieht, in der absoluten Grundform, so aus:

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">
    
    <card>
        <title>Minimal configuration</title>
        <input-field>
            <name>example</name>
        </input-field>
    </card>
</config>
Resources/config/config.xml

Title Element

Das title Element beinhaltet die Überschrift des Konfiguration-Panels. Es lässt das lang Attribut für verschiedene Übersetzungen zu.

    <card>
        <title>Minimal configuration</title>
        <title lang="de-DE">Minimal configuration</title>
        ...
        <input-field>
            <name>example</name>
        </input-field>
    </card>

Input Field Element

Das <input-field> Element stellt ein Konfigurations-Feld dar. Es lässt das Attribut type für die Definition verschiedener Eingabe-Typen zu.

    <input-field type="text">
        <name>example</name>
    </input-field>

Input Field Typen

  • int
    Integer
    Zulässige Optionen: <disabled>, <label>, <helpText>
  • text
    text
    Zulässige Optionen: <copyable>, <disabled>, <label>, <placeholder>, <helpText>
  • single-select
    single-select
    Zulässige Optionen: <options>, <disabled>, <label>, <placeholder>, <helpText>
  • multi-select
    multi-select
    Zulässige Optionen: <options>, <disabled>, <label>, <placeholder>, <helpText>
  • password
    password
    Zulässige Optionen: <disabled>, <label>, <placeholder>, <helpText>
  • bool
    switch
    Zulässige Optionen: <disabled>, <label>, <helpText>
  • float
    float
    Zulässige Optionen: <disabled>, <label>, <helpText>
  • datetime
    datetime picker
    Zulässige Optionen: <disabled>, <label>, <helpText>

Input Field Optionen

    <input-field type="text">
        <name>example</name>
        <disabled>true</disabled>
        <copyable>true</copyable>
        <helpText>English help text</helpText>
        ...
    </input-field>
  • disabled
    bool
  • copyable
    bool
  • label
    text
    Zulässige Attribute: lang
  • placeholder
    text
    Zulässige Attribute: lang
  • helpText
    text
    Zulässige Attribute: lang
  • options
    select
    Der <options> Tag verlangt <option>, welches einen Konfigurations-Wert repräsentiert. Im <option> Tag werden die Optionen <id> und <name> verlangt.

    id
    text
    <id>value</id>

<options> Beispiel

Für eine bessere Veranschaulichung hier ein Beispiel des <options> Tags

<input-field type="single-select">
    <name>option</name>
    <options>
        <option>
            <id>value1</id>
            <name>A value</name>
            <name lang="de-DE">Ein Wert</name>
        </option>
        <option>
            <id>value2</id>
            <name>Another Value</name>
            <name lang="de-DE">Ein anderer Wert</name>
        </option>
    </options>
</input-field>

Beispiel einer komplexeren Plugin-Konfiguration

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">

    <card>
        <title>Basic Configuration</title>
        <title lang="de-DE">Grundeinstellungen</title>

        <input-field>
            <name>email</name>
            <copyable>true</copyable>
            <label>eMail address</label>
            <label lang="de-DE">E-Mail Adresse</label>
            <placeholder>you@example.com</placeholder>
            <placeholder lang="de-DE">du@beispiel.de</placeholder>
            <helpText>Please fill in your personal eMail address</helpText>
            <helpText lang="de-DE">Bitte trage deine persönliche E-Mail Adresse ein</helpText>
        </input-field>

        <input-field type="single-select">
            <name>mailMethod</name>
            <options>
                <option>
                    <id>smtp</id>
                    <name>English smtp</name>
                    <name lang="de-DE">German smtp</name>
                </option>
                <option>
                    <id>pop3</id>
                    <name>English pop3</name>
                    <name lang="de-DE">German pop3</name>
                </option>
            </options>
            <label>Mail method</label>
            <label lang="de-DE">Versand Protokoll</label>
        </input-field>
    </card>

    <card>
        <title>Advanced Configuration</title>
        <title lang="de-DE">Erweiterte Einstellungen</title>
        <input-field type="password">
            <name>secret</name>
            <label>Secret token</label>
            <label lang="de-DE">Geheim Schlüssel</label>
            <helpText>Your secret token for xyz...</helpText>
            <helpText lang="de-DE">Dein geheimer Schlüssel für xyz...</helpText>
        </input-field>
    </card>
</config>

Die nächsten Schritte

Nun kannst du dir deine ganz individuelle Plugin-Konfiguration zusammenstellen. Wie du diese auslesen und an das Storefront übergeben kannst, erfährst du in späteren Guides.