Plugin configuration enables the admin user to control the plugin’s features and its configurations from Shopware backend. It’s easy to create plugin configurations in Shopware and utilize the stored configuration in the store. Before that, you must know how to create a custom plugin in Shopware.
Create config.xml file inside your plugin directory <project-directory>//custom/plugins/WebbytroopsShopFinder/src/Resources/config/config.xml. We have created a configuration with an input filed
<?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>
<title lang="de-DE">German Minimal configuration</title>
<input-field type="text">
<name>title</name>
<label>Title</label>
<placeholder>Title</placeholder>
<required>1</required>
<helpText>Title is the main primary section to enter</helpText>
</input-field>
</card>
</config>Go to your store configuration page to update the value for the title field. You can find it under Extensions > My Extension > Shop Finder. You will have output similar to shared screenshot below:
If you have output with the above code, you have successfully created configuration for your plugin. It is simple process to create admin interface without any knowledge of backend architecture. Use the <card> tags and put all your fields under the <card> tags. There should be at least one <card> and one <input-field> to implement the configuration. Shopware does not come only with an input field text, there are several other input fields available. We will see those fields in brief along with the tags used in the config.xml file.
Configuration elements:
<Card>: Cards are simply a wrapper for your field that groups similar configurations in a single place. You can add a number of cards and add a number of fields there.
<title>: The title tag is to show the label for the card. There is another with a lang attribute which is used to show the label in a different language.
<input-field>: Input field tag used to create your custom field for the configurations. The important point is it should start with <name> element. After the <name> element you should put other elements such as <label>, <placeholder>,<required>, <helptext>, <defaultValue>, etc.
Shopware has a rich set of input fields here is a list of those input fields:
- text
- textarea
- text-editor
- url
- password
- int
- float
- bool
- checkbox
- datetime
- date
- time
- colorpicker
- single-select
- multi-select
Advanced custom input field
Shopware does not only limit to general fields for store configuration, you can declare complex configuration with <component anme=”componentName”> element. You can render the existing admin components as well as your own component. Here are some supported advanced components by Showpare:
- sw-entity-single-select
- sw-entity-multi-id-select
- sw-media-field
- sw-text-editor
- sw-snippet-field
Example of store configuration file
File name: <project-directory>//custom/plugins/WebbytroopsShopFinder/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>
<title lang="de-DE">German Minimal configuration</title>
<input-field type="bool">
<name>isenable</name>
<label>Is Enable</label>
<required>1</required>
<defaultValue>true</defaultValue>
</input-field>
<input-field type="text">
<name>title</name>
<label>Title</label>
<defaultValue>Hey Default value</defaultValue>
<placeholder>Title</placeholder>
<required>1</required>
<helpText>Title is the main primary section to enter</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>apikey</name>
<label>Secret Apikey</label>
<label lang="de-DE">Geheimer Apikey</label>
<helpText>Your secret token for xyz...</helpText>
<helpText lang="de-DE">Dein geheimer Token für xyz...</helpText>
</input-field>
<component name="sw-entity-single-select">
<name>exampleProduct</name>
<entity>product</entity>
<label>Choose a product for the plugin configuration</label>
</component>
<component name="sw-entity-multi-id-select">
<name>exampleMultiProductIds</name>
<entity>product</entity>
<label>Choose multiple products IDs for the plugin configuration</label>
</component>
<component name="sw-media-field">
<name>pluginMedia</name>
<label>Either upload media or choose existing one from the media manager</label>
</component>
<component name="sw-text-editor">
<name>textEditor</name>
<label>Write some nice text with WYSIWYG editor</label>
</component>
<component name="sw-snippet-field">
<name>snippetField</name>
<label>Description</label>
<snippet>myPlugin.test.snippet</snippet>
</component>
</card>
</config>
Leave A Comment