How to add new module to administration in Shopware 6

Overview

This blog gives you a brief introduction on add new module to administration in Shopware 6. Plugin need to have managing custom entity by create, update, delete and listing with own logic. Because generated plugin configuration does not have listing and possible configuration for your custom entity. . In this case you have to create a custom module .  With the following steps we can create custom module.

Setup Plugin Folder

In this article we discuss about create new module to administration in Shopware 6. Here we does not explain how to create new plugin for Shopware 6. Head over to shopware 6  Developer guide to learn creating a plugin at first.

Injecting into the administration

The main entry point to extend the administration via plugin is the main.js file. It has to be placed into a <plugin root>/src/Resources/app/administration/src directory in order to be found by Shopware 6. How to upload media URL in Shopware 6 Link

Creating a new module

Every module in the Shopware 6 core can be found in the module directory relative to the administration source directory.  Copy this structure into our plugin, so everybody being used to Shopware 6 core code will automatically get the hang of it as well. The path in your plugin would be: <plugin root>/src/Resources/app/administration/src/module.
Inside of this module directory in the core code, you find a list of all available modules. In the same way create a new directory for each module of your plugin. In this case it is just one, so create a new directory custom-module in there. Module has its own index.js file loaded by main.js file. You also have to load the directory in your main.js in order for any changes to take effect.

import './module/custom-module';

You don’t have to mention the index.js in the import path, this is done automatically. Your custom module’s index.js will already be considered, so go ahead and open the index.js. The main logic happens in there.

index.js

First of all, you have to register your module using the ModuleFactory. This Module provides a method register, which expects a name and a configuration for your module.

Shopware.Module.register('custom-module', {
    // Configuration here
});

Here you have to provide some basic meta information about your module, such as a name, a description and a title. Also, the property type should have the value plugin.
Additional to those basic meta information, each module comes with a custom color and a custom icon.

import './page/custom-module-overview';

import deDE from './snippet/de-DE.json';
import enGB from './snippet/en-GB.json';

Shopware.Module.register('custom-module', {
    type: 'plugin',
    name: 'Custom',
    title: 'Custom module',
    description: 'Description for your custom module',
    color: '#62ff80',
    icon: 'default-object-lab-flask',
});

Snippets

First thing to do is registering new snippets. You may already have noticed the import statements for deDE or enGB in the example above.

snippets: {
    'de-DE': deDE,
    'en-GB': enGB
},

Routes

In order to get the navigation working, every navigation entry needs an individual route to link to.
A module’s routes are defined using the routes property, which expects an object containing multiple route configuration objects.

// routes: {
//     nameOfTheRoute: {
//         component: 'example',
//         path: 'actualPathInTheBrowser'
//     }
// }
routes: {
    list: {
        component: 'sw-custom-module',
        path: 'list'
    },
},

As previously mentioned, the key of the configuration object, overview in this case, is also the name of the route. This will be needed for the navigation. component represents the name of the component to be shown when this route is executed. Last but not least is the path property, which is the actual path for the route, therefore being used in the actual URL. This configuration results in this route’s full name being custom.module.overview and the URL being /overview relative to the Administration’s default URL.

In this case, the sw-product-list component is being used for this route. Usually you want to show your custom component here, which is explained here.

Navigation

In order to create a navigation entry, you have to provide a navigation configuration using the navigation property in your module’s configuration. It expects an array of navigation configuration objects.

import './page/custom-module-overview';

Shopware.Module.register('custom-module', {

    // Module configuration
    ...

    navigation: [{
        // Navigation configuration
    }]
});

It expects an array, so that you can provide more than just one navigation entry for your module. Sometimes you want to have some kind of “parent” navigation entry, containing multiple children entries. In that scenario, you also want the child entries to have a custom icon. Thus, each navigation configuration can have its own icon and custom color. Other than those two properties, you also need to provide a label to be displayed next to the icon. Additionally, add the name of a route by using the path property. This route will be used when clicking on this navigation entry. In this case, you use the previously created route custom.module.overview.

navigation: [{
    label: 'Custom Module',
    color: '#62ff80',
    path: 'custom.module.overview',
    icon: 'default-object-lab-flask'
}]

Add Page Component

You need to add page for rendering view on click navigation . Under module/CustomModule/page/custom-module-list/index.js directory.

const { Component, Mixin } = Shopware;
Component.register('custom-module-list', {
// cofiguration
})

Add Template

After creating index.js file you also need to create html twig file in above directory. here we create custom-module-list.html.twig file and also import in above index.js file.

const { Component, Mixin } = Shopware;
import template from './custom-module-list.html.twig'
Component.register('custom-module-list', {
   template
})

Final Module

This is how your final module index.js file looks like

import deDE from './snippet/de-DE.json';
import enGB from './snippet/en-GB.json';

Shopware.Module.register('custom-module', {
    type: 'plugin',
    name: 'Custom',
    title: 'Custom module',
    description: 'Description for your custom module',
    color: '#62ff80',
    icon: 'default-object-lab-flask',

    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    },

    routes: {
        overview: {
            component: 'sw-product-list',
            path: 'overview'
        },
    },

    navigation: [{
        label: 'Custom Module',
        color: '#62ff80',
        path: 'custom.module.overview',
        icon: 'default-object-lab-flask'
    }],

    settingsItem: [{
        to: 'custom.module.overview',
        group: 'system',
        icon: 'default-object-lab-flask',
    }]
});

Build Module

After created module you need to build for production use, so you need to run build command.

./psh.phar administration:build

After buildup module, Your minified javascript file will now be loaded in production environments.

Thanks for reading, i hope it will help you for any query please comment in comment box.