{"id":14464,"date":"2021-10-25T05:45:49","date_gmt":"2021-10-25T11:15:49","guid":{"rendered":"https:\/\/www.emizentech.com\/blog\/?p=14464"},"modified":"2023-01-30T10:44:49","modified_gmt":"2023-01-30T10:44:49","slug":"create-admin-grid-in-shopware-using-plugin-module","status":"publish","type":"post","link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/create-admin-grid-in-shopware-using-plugin-module.html","title":{"rendered":"How To Create Admin Grid In Shopware 6 Using Plugin Module"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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 \u201cHow to create a basic plugin in shopware 6<\/a><\/strong>\u201d<\/p>\n\n\n\n

1. Firstly we have to create an \u201cindex.js<\/strong>\u201d file at this location given below:<\/p>\n\n\n\n

\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/index.js\u201d<\/p>\n\n\n\n

const { Module } = Shopware;\nimport '.\/page\/emizen-module-list'; \/\/ Component registered for module which will used for showing data  \n\nimport enGB from '.\/snippet\/en-GB';\nimport deDE from '.\/snippet\/de-DE';\n\nModule.register('emizen-module', {\n    type: 'plugin',\n    title: 'emizen-module.general.mainMenuItemList',\n    description: 'emizen-module .general.descriptionTextModule',\n    snippets: {\n        'en-GB': enGB,\n        'de-De': deDE\n    },\n\n    routes: {\n        'list': {\n            component: 'emizen-module-list',\n            path: 'list',\n            meta: {\n                parentPath: 'sw.settings.index'\n            }\n        }\n    },\n\n    settingsItem: [\n        {\n            name: 'emizen-module',\n            label: 'emizen-module.general.mainMenuItemList',\n            to: 'emizen.module.list',\n            group: 'plugins',\n            icon: 'default-object-marketing'\n        }\n    ]\n});<\/code><\/pre>\n\n\n\n
2. Now we will add the component which is used for handling and showing the list data  at this location<\/p>\n\n\n\n
\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\u201d two files will be  added at this location<\/p>\n\n\n\n
-> index.js \n->  emizen-module-list.html.twig<\/code><\/pre>\n\n\n\n
\n
\"Hire<\/a><\/figure>\n<\/div>\n\n\n\n
3. In \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\/index.js\u201d we will add the following code:<\/p>\n\n\n\n
const { Component, Mixin } = Shopware;\nconst { Criteria } = Shopware.Data;\n\nimport template from '.\/emizen-module-list.html.twig'; \/\/ template which will show data \n\nComponent.register('emizen-module-list', {\n    template,\n\n    inject: [\n    'repositoryFactory',\n    ],\n\n    mixins: [\n    Mixin.getByName('notification')\n    ],\n\n    metaInfo() {\n        return {\n            title: this.$createTitle()\n        };\n    },\n\n    data() {\n        return {\n            total: 0,\n            emizenModuleCollection: null,\n            repository: null,\n            isLoading:false,\n            processSuccess:false\n        };\n    },\n\n    created() {\n        this.getEmizentechModule();\n    },\n\n    computed: {\n        columns() {\n            return [{\n                property: 'productNumber',  \/\/ column property\n                dataIndex: 'productNumber',\n                label: this.$t('emizen-module.list.titleColumn'), \/\/ column label (snippets used for labels)\n                allowResize: true,\n                sortable: false,\n            },\n            {\n                property: 'description',\n                dataIndex: 'description',\n                label: this.$t('emizen-module.list.descColumn'),\n                allowResize: true,\n                sortable: false,\n            },\n            ];\n        }\n    },\n\n    methods: {\n        getEmizentechModule: function () {\n            const criteria = new Criteria();\n            this.repository = this.repositoryFactory.create('product'); \/\/ product repository data\n            this.repository.search(criteria, Shopware.Context.api).then((result) =>{\n                this.emizenModuleCollection = result;\n                this.total = result.total;\n            })\n        }\n    }\n});<\/code><\/pre>\n\n\n\n
4. Now in \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\/emizen-module-list.html.twig\u201d<\/p>\n\n\n\n
{% block emizen_module_list %}\n    <sw-page>\n        {% block emizen_module_smart_bar_header %}\n            <template #smart-bar-header>\n                {% block emizen_module_list_smart_bar_header_title %}\n                    <h2>\n                        {% block emizen_module_list_smart_bar_header_title_text %}\n                            {{ $tc('sw-settings.index.title') }}\n                            <sw-icon name=\"small-arrow-medium-right\" small><\/sw-icon>\n                            {{ $t('emizen-module.general.mainMenuItemList') }}\n                        {% endblock %}\n                        {% block emizen_module_list_smart_bar_header_amount %}\n                            <span v-if=\"total\" class=\"sw-page__smart-bar-amount\">\n                                ({{total}})\n                            <\/span>\n                        {% endblock %}\n                    <\/h2>\n                {% endblock %}\n            <\/template>\n        {% endblock %}\n\n        <template slot=\"content\">\n            <sw-entity-listing\n                :items=\"emizenModuleCollection\"\n                :repository=\"repository\"\n                :showSelection=\"false\"\n                :columns=\"columns\">\n                <template slot=\"column-productNumber\" slot-scope=\"{ item }\">\n                   {{item.productNumber}}\n                <\/template>\n                <template slot=\"column-description\" slot-scope=\"{ item }\">\n                   {{item.description}}\n                <\/template>\n            <\/sw-entity-listing>\n        <\/template>\n    <\/sw-page>\n{% endblock %}<\/code><\/pre>\n\n\n\n
5. Now we will add snippets \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/snippet\/de-DE.json\u201d<\/p>\n\n\n\n
{\n    \"emizen-module\":{\n        \"general\": {\n            \"mainMenuItemList\": \"Emizentech-Modul\",\n            \"descriptionTextModule\": \"Emizentech-Modul\"\n        },\n\n        \"list\": {\n            \"titleColumn\": \"Titel\",\n            \"descColumn\": \"Beschreibung\",\n            \"titleSaveSuccess\": \"Erfolg\",\n            \"messageSaveSuccess\": \"Einzelheiten erfolgreich aktualisiert\"\n        }\n    }\n}\n\n\n\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/snippet\/en-GB.json\u201d \n\n{\n    \"emizen-module\":{\n        \"general\": {\n            \"mainMenuItemList\": \"Emizentech Module\",\n            \"descriptionTextModule\": \"Emizentech module`\" \n        },\n\n        \"list\": {\n            \"titleColumn\": \"Title\",\n            \"descColumn\": \"Description\",\n            \"titleSaveSuccess\": \"Success\",\n            \"messageSaveSuccess\": \"Details updated successfully\"\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
6. Now at last we will add our module in main.js using the following code

\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/main.js\u201d

import ‘.\/module\/emizen-module’;

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

\u201cbin\/build-administration.sh\u201d.

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

Thank you.<\/p>\n\n\n\n
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<\/a> that helps businesses thrive in the e-commerce industry. <\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":36,"featured_media":14472,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[85],"tags":[],"class_list":{"0":"post-14464","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-shopware"},"modified_by":"Marketing EmizenTech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/10\/Create-Admin-Grid-In-Shopware-6-Using-Plugin-Module-1.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/10\/Create-Admin-Grid-In-Shopware-6-Using-Plugin-Module-1.jpg","author_info":{"display_name":"Vivek Khatri","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/vivek"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/14464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=14464"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/14464\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/14472"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=14464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=14464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=14464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}