Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    marketplace-mod

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    Add Page Component

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

    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.

    Final Module

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

    Build Module

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

    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.

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close