Administration
core code, each module is defined in a directory called module
. Inside the module
directory 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.js
in there. Consider it to be the main file for your custom module.index.js
file for each module.main.js
file. 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 main.js
file:index.js
will be executed.index.js
is still empty now, so let's get going to actually create a new module. This is technically done by calling the method registerModule
method of our ModuleFactory, but you're not going to use this directly.Shopware.Module.register()
method, but why is that?Shopware
is a global object created for third party developers. It is mainly the bridge between the Shopware Administration and our plugin. The Module
object comes with a register
helper method to easily register your module. The method needs two parameters to be set, the first one being the module's name, the second being a javascript object, which contains your module's configuration.#ff3d58
is 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.description
is 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-list
for the list of your module, swag-example-detail
for the detail page and swag-example-create
for creating a new entry. Those routes are configured as an object in a property named routes
. We will cover that in the next paragraph.name
and a type
. For reference, see this example:name
should be a technical unique one, the type
would be 'plugin' here. When it comes to this type
, there are basically two options in Shopware: core
and plugin
. So every third-party module should use plugin
. To give a little context: Looking at module.factory
inside registerModule
the 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 type
is divergent to these options.Administration
expects the value in there to be a Vuei18n variable, a translation key that is. It's looking for a translation key example
now 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?snippets
this time. This object contains another object for each language you want to support. In this example de-DE
and of course en-GB
will be supported.swag-example.nested.value
to get the value 'example' and swag-example.foo
to 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.snippet
in your module's directory and in there two new files: de-DE.json
and en-GB.json
swag-example.general.mainMenuItemGeneral
snippet/en-GB.json
file 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 label
property.description
or the title
, add those to your snippet file as well and edit the values in your module's description
and title
. The title will be the same as the main menu entry by default.main.js
file in your plugin. Its contents get minified into a new file named after your plugin and will be moved to the public
directory of Shopware 6 root directory. Given this plugin would be named "AdministrationNewModule", the bundled and minified javascript code for this example would be located under <plugin root>/src/Resources/public/administration/js/administration-new-module.js
, once you run the command following command in your shopware root directory:<shopware root>/public/bundles/administration/administrationnewmodule/administration/js/administration-new-module.js
.settings
section of the administration. You can add the settingsItem
option to the module configuration as seen below:group
property targets to the group section, the item will be displayed in 'shop', 'system' and 'plugins' sections. The to
gets the link path of the route. The icon
contains the icon name which will be display.