The Shopware plugin system provides you with the option to create a configuration page for your plugin without any knowledge of templating or the Shopware Administration.

Prerequisites

To build your own configuration page for your plugin, you first need a plugin as base. Therefore, you can refer to the Plugin Base Guide.

Create your plugin configuration

All you need to do is creating a config.xml file inside of a Resources/config directory in your plugin root. The content of the config.xml will be dynamically rendered in the administration. Below you'll find an example structure:

└── plugins
    └── SwagBasicExample
        ├── src
        │   ├── Resources
        │   │   └── config
        │   │       └── config.xml 
        │   └── SwagBasicExample.php
        └── composer.json

Fill your plugin configuration with settings

As we now know how to create your configuration, we can start to fill it with life

• or options to configure, in this case.

Cards in your configuration

The config.xml follows a simple syntax. You can organize the content in <card> elements. Every config.xml must contain a minimum of one <card> element and each <card> must contain one <title> and at least one <input-field>. See the minimum config.xml below:

<plugin root>/src/Resources/config/config.xml
<?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/trunk/src/Core/System/SystemConfig/Schema/config.xsd">
​
    <card>
        <title>Minimal configuration</title>
        <input-field>
            <name>example</name>
        </input-field>
    </card>
</config>

Please make sure to specify the xsi:noNamespaceSchemaLocation as shown above and fetch the external resource into your IDE if possible. This enables auto-completion and suggestions for this XML file and will therefore help you to prevent issues and bugs.

Card Titles

A <card> <title> is translatable, this is managed via the lang attribute. By default the lang attribute is set to en-GB, to change the locale of a <title> just add the attribute as follows:

    ...
    <card>
        <title>English Title</title>
        <title lang="de-DE">German Titel</title>
    </card>
    ...

Input fields

As you can see above, every <input-field> has to contain at least a <name> element. The <name> element is not translatable and has to be unique, since it will be used as the technical identifier for the config element. The field <name> must at least be 4 characters long and consist of only lower and upper case letters. It can contain numbers, but not at first place - see this pattern: [a-zA-Z][a-zA-Z0-9]*

The different types of input field

Your <input-field> can be of different types, this is managed via the type attribute. Unless defined otherwise, your <input-field> will be a text field per default. Below you'll find a list of all available <input-field type="?">.

Input field settings

These settings are used to configure your <input-field>. Every <input-field> has to start with the <name> element. After the <name> element you can configure any of the other settings mentioned above. Beside these settings, they have the followings in common: label, helpText, defaultValue and disabled.

Label, placeholder and help text

The settings <label>, <placeholder> and <helpText> are used to label and explain your <input-field> and are translatable. You define your <label>, <placeholder> and <helpText> the same way as the <card><title>, with the lang attribute. Please remember, that the lang attribute is set to en-GB per default.

defaultValue

Add the defaultValue setting to your <input-field> to define a default value for it. This value will be imported into the database on installing and updating the plugin. We use Symfony\Component\Config\Util\XmlUtils for casting the values into the correct PHP types.

Below you'll find an example how to use this setting.

<input-field type="text">
    <name>textField</name>
    <label>Test field with default value</label>
    <defaultValue>test</defaultValue>
</input-field>

disabled

You can add the <disabled> setting to any of your <input-field> elements to disable it.

Below you'll find an example how to use this setting.

<input-field>
    <name>email</name>
    <disabled>true</disabled>
</input-field>

Please note, <disabled> only takes boolean values.

copyable

You can add the <copyable> setting to your <input-field> which are of type text or extensions of it. This will add a button at the right, which on click copies the content of your <input-field> into the clipboard.

Below you'll find an example how to use this setting.

<input-field>
    <name>email</name>
    <copyable>true</copyable>
</input-field>

Please note, that <copyable> only takes boolean values

options

You can use <options> to add settings to a <input-field> of the types single-select and multi-select. Each <option> represents one setting you can select.

Below you'll find an example.

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

Each <options> element must contain at least one <option> element. Each <option> element must contain at least one <id> and one <name> element. As you can see above, <name> elements are translatable via the lang attribute.

Advanced custom input fields

For more complex and advanced configurations it is possible to declare a <component name="componentName"> element. This element can render many admin components. It is also possible to render your own admin component which you could deliver with your plugin. The name of the component has to match the components name in the administration, for example sw-entity-single-select. The component also needs a <name> element first. All other elements within the component element will be passed to the rendered admin component as properties. For some components you could also use label and placeholder.

Here are some examples:

Entity single select for products

<component name="sw-entity-single-select">
    <name>exampleProduct</name>
    <entity>product</entity>
    <label>Choose a product for the plugin configuration</label>
</component>

Stores the ID of the selected product into the system config.

Entity multi ID select for products

<component name="sw-entity-multi-id-select">
    <name>exampleMultiProductIds</name>
    <entity>product</entity>
    <label>Choose multiple products IDs for the plugin configuration</label>
</component>

Stores an array with IDs of the selected products into the system config.

Media selection

<component name="sw-media-field">
    <name>pluginMedia</name>
    <label>Upload media or choose one from the media manager</label>
</component>

Text editor

<component name="sw-text-editor">
    <name>textEditor</name>
    <label>Write some nice text with WYSIWYG editor</label>
</component>

Snippet field

        <component name="sw-snippet-field">
            <name>snippetField</name>
            <label>Description</label>
            <snippet>myPlugin.test.snippet</snippet>
        </component>

Allows you to edit snippet values within the configuration page. This component does not store values in the system config, but changes the translations for the snippet key. Note: This field is only available from 6.3.4.0 onward.

Example

Now all that's left to do is to present you a working example config.xml and show you the result.

<plugin root>/src/Resources/config/config.xml
<?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/trunk/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-Mailadresse</label>
            <placeholder>[email protected]</placeholder>
            <placeholder lang="de-DE">[email protected]</placeholder>
            <helpText>Please fill in your personal eMail address</helpText>
            <helpText lang="de-DE">Bitte trage deine persönliche E-Mailadresse 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>
            <defaultValue>smtp</defaultValue>
            <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">Geheimschlü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>

Next steps

Now you've added your own plugin configuration. But how do you actually read which configurations the shop owner used? This will be covered in our guide about Using the plugin configuration.