Administrationcore code, each module is defined in a directory called
module. Inside the
moduledirectory lies the list of several modules, each having their own directory named after the module itself.
<plugin root>/src/Resources/app/administration/src/module/swag-example, so you can store your own modules files in there. Right afterwards, create a new file called
index.jsin there. Consider it to be the main file for your custom module.
main.jsfile. That's the file you need to change now, so that it loads your new module. For this, simply add the following line to your
index.jswill be executed.
index.jsis still empty now, so let's get going to actually create a new module. This is technically done by calling the method
registerModulemethod of our ModuleFactory, but you're not going to use this directly.
Shopware.Module.register()method, but why is that?
Shopwareis a global object created for third party developers. It is mainly the bridge between the Shopware Administration and our plugin. The
Moduleobject comes with a
#ff3d58is used as a color, which is a soft red. Also, each module has their own icon. You can see here here which icons are available in Shopware 6 by default. In our case here, let's say we use the icon
default-shopping-paper-bag-product, which will also be used for the module.
title. This will be the default title for your module, you can edit this for each component later on.
descriptionis last basic information you should set here, which will be shown as an empty-state. That means the description will be shown e.g. when you integrated a list component, but your list is empty as of now. In that case, your module's description will be displayed instead.
swag-example-listfor the list of your module,
swag-example-detailfor the detail page and
swag-example-createfor creating a new entry. Those routes are configured as an object in a property named
routes. We will cover that in the next paragraph.
type. For reference, see this example:
nameshould be a technical unique one, the
typewould be 'plugin' here. When it comes to this
type, there are basically two options in Shopware:
plugin. So every third-party module should use
plugin. To give a little context: Looking at
registerModulethe plugin type is the only case which is being checked and has some different behaviour. So it is more a convention and not a real validation which throws an error when
typeis divergent to these options.
Administrationexpects the value in there to be a Vuei18n variable, a translation key that is. It's looking for a translation key
examplenow and since you did not provide any translations at all yet, it can't find any translation for it and will just print the key of a snippet. Sounds like it's time to implement translation snippets as well, right?
snippetsthis time. This object contains another object for each language you want to support. In this example
de-DEand of course
en-GBwill be supported.
swag-example.nested.valueto get the value 'example' and
swag-example.footo get the value 'bar'. You can nest those objects as much as you want. Please note that each path is prefixed by the extension name.
snippetin your module's directory and in there two new files:
snippet/en-GB.jsonfile and create the new object in there. The structure here is the same as in the first example, just formatted as json file. Afterwards, use this path in your menu entry's
title, add those to your snippet file as well and edit the values in your module's
title. The title will be the same as the main menu entry by default.
main.jsfile in your plugin. Its contents get minified into a new file named after your plugin and will be moved to the
<plugin root>/src/Resources/public/administration/js/administration-new-module.js, once you run the command following command in your shopware root directory:
settingssection of the administration. You can add the
settingsItemoption to the module configuration as seen below:
groupproperty targets to the group section, the item will be displayed in 'shop', 'system' and 'plugins' sections. The
togets the link path of the route. The
iconcontains the icon name which will be display.