Last Updated on January 21, 2022

Each module in the Administration core code is outlined in a directory called a module. The module directory contains a list of modules, each with its own directory labeled after the module.

For, creating an admin grid in shopware 6 firstly you have to create a basic plugin which was created in our blog please refer to that blog “How to create a basic plugin in shopware 6

1. Firstly we have to create an “index.js” file at this location given below:

“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/index.js”

const { Module } = Shopware;
import './page/emizen-module-list'; // Component registered for module which will used for showing data  

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

Module.register('emizen-module', {
    type: 'plugin',
    title: 'emizen-module.general.mainMenuItemList',
    description: 'emizen-module .general.descriptionTextModule',
    snippets: {
        'en-GB': enGB,
        'de-De': deDE
    },

    routes: {
        'list': {
            component: 'emizen-module-list',
            path: 'list',
            meta: {
                parentPath: 'sw.settings.index'
            }
        }
    },

    settingsItem: [
        {
            name: 'emizen-module',
            label: 'emizen-module.general.mainMenuItemList',
            to: 'emizen.module.list',
            group: 'plugins',
            icon: 'default-object-marketing'
        }
    ]
});

2. Now we will add the component which is used for handling and showing the list data  at this location

“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list” two files will be  added at this location

-> index.js 
->  emizen-module-list.html.twig
Hire Shopware developers

3. In “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list/index.js” we will add the following code:

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;

import template from './emizen-module-list.html.twig'; // template which will show data 

Component.register('emizen-module-list', {
    template,

    inject: [
    'repositoryFactory',
    ],

    mixins: [
    Mixin.getByName('notification')
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    data() {
        return {
            total: 0,
            emizenModuleCollection: null,
            repository: null,
            isLoading:false,
            processSuccess:false
        };
    },

    created() {
        this.getEmizentechModule();
    },

    computed: {
        columns() {
            return [{
                property: 'productNumber',  // column property
                dataIndex: 'productNumber',
                label: this.$t('emizen-module.list.titleColumn'), // column label (snippets used for labels)
                allowResize: true,
                sortable: false,
            },
            {
                property: 'description',
                dataIndex: 'description',
                label: this.$t('emizen-module.list.descColumn'),
                allowResize: true,
                sortable: false,
            },
            ];
        }
    },

    methods: {
        getEmizentechModule: function () {
            const criteria = new Criteria();
            this.repository = this.repositoryFactory.create('product'); // product repository data
            this.repository.search(criteria, Shopware.Context.api).then((result) =>{
                this.emizenModuleCollection = result;
                this.total = result.total;
            })
        }
    }
});

4. Now in “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list/emizen-module-list.html.twig”

{% block emizen_module_list %}
    <sw-page>
        {% block emizen_module_smart_bar_header %}
            <template #smart-bar-header>
                {% block emizen_module_list_smart_bar_header_title %}
                    <h2>
                        {% block emizen_module_list_smart_bar_header_title_text %}
                            {{ $tc('sw-settings.index.title') }}
                            <sw-icon name="small-arrow-medium-right" small></sw-icon>
                            {{ $t('emizen-module.general.mainMenuItemList') }}
                        {% endblock %}
                        {% block emizen_module_list_smart_bar_header_amount %}
                            <span v-if="total" class="sw-page__smart-bar-amount">
                                ({{total}})
                            </span>
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}

        <template slot="content">
            <sw-entity-listing
                :items="emizenModuleCollection"
                :repository="repository"
                :showSelection="false"
                :columns="columns">
                <template slot="column-productNumber" slot-scope="{ item }">
                   {{item.productNumber}}
                </template>
                <template slot="column-description" slot-scope="{ item }">
                   {{item.description}}
                </template>
            </sw-entity-listing>
        </template>
    </sw-page>
{% endblock %}

5. Now we will add snippets “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/snippet/de-DE.json”

{
    "emizen-module":{
        "general": {
            "mainMenuItemList": "Emizentech-Modul",
            "descriptionTextModule": "Emizentech-Modul"
        },

        "list": {
            "titleColumn": "Titel",
            "descColumn": "Beschreibung",
            "titleSaveSuccess": "Erfolg",
            "messageSaveSuccess": "Einzelheiten erfolgreich aktualisiert"
        }
    }
}


“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/snippet/en-GB.json” 

{
    "emizen-module":{
        "general": {
            "mainMenuItemList": "Emizentech Module",
            "descriptionTextModule": "Emizentech module`" 
        },

        "list": {
            "titleColumn": "Title",
            "descColumn": "Description",
            "titleSaveSuccess": "Success",
            "messageSaveSuccess": "Details updated successfully"
        }
    }
}

6. Now at last we will add our module in main.js using the following code

“Emizentechplugin/src/Resources/app/administration/src/main.js”

import ‘./module/emizen-module’;

Now run the admin build command to see the changes we have made in the admin backend.

“bin/build-administration.sh”.

For seeing changes in admin go to Settings->Extensions.

Thank you.

If you have any other issue in Shopware 6 that you are struggling with for your eCommerce store then get in touch with Emizentech. We are a reliable & experienced Shopware development company that helps businesses thrive in the e-commerce industry.

Author

Founder and tech lead at Emizentech, Mr. Vivek has over ten years of experience in developing IT infrastructures and solutions. With his profound knowledge in eCommerce technologies like Shopware, Magento, and Shopify, Mr. Vivek has been assisting SMEs to enterprises across the globe by developing and maintaining their eCommerce applications. Technology innovation and trends insight come easy to Vivek with his thorough knowledge in the eCommerce domain. See him talking about ideas, trends, and technology in this blog. To know more about how Team Vivek can assist you in your eCommerce strategy? Connect team Vivek here.