The steps for creating a plugin are as follows:<\/p>\n\n\n\n
Directory structure<\/h2>\n\n\n\n
The overall general directory structure of a plugin looks like this,<\/p>\n\n\n\n Run the following command, it will generate a base for your plugin.<\/p>\n\n\n\n After this command, you will see the following files:<\/p>\n\n\n\n You can see the created plugin under the Extension\/My Extensions<\/em> menu in administration. To change the name from the Skeleton plugin to your desired name make changes in the composer.json<\/strong> file.<\/p>\n\n\n\n To create migrations for generating tables use the following command,<\/p>\n\n\n\n Update the update method on the created class with the following code,<\/p>\n\n\n\n The plugin automatically executes the migrations when installed, and to start using your table in the plugin, you need to create the entity definitions for the table. To see how to do that refer to How to Add Entities in Shopware<\/a>.<\/p>\n\n\n\n Create a file named config.xml<\/strong> under src\/Resources\/config\/<\/em> directory and add the following code,<\/p>\n\n\n\n This will render our configuration settings in administration like this,<\/p>\n\n\n\n To see all available input fields and how to use them refer to How to add configurations to plugin<\/a>.<\/p>\n\n\n\n Make a file main.js<\/strong> under the src\/Resources\/app\/administration\/src<\/em> directory. This is the root file for all your modules and services. You will include every module or service you create here as shown below<\/p>\n\n\n\n Now, create an index.js<\/strong> file for your module under src\/Resources\/app\/administration\/src\/module\/Wk-blog<\/em> directory as shown and add the following code.<\/p>\n\n\n\n The settingsItem property is responsible for showing your plugin in the setting\/extensions<\/em> menu in Shopware. The routes property is responsible for registering your components to its particular route.<\/p>\n\n\n\n Make your components and import those in the main.js file <\/em>then use the <\/em>routes<\/strong> key for registering them to their respective routes. For a detailed explanation of components refer to How to add components<\/a> and for modules refer to How to add a module in Shopware<\/a>.<\/p>\n\n\n\n For rendering the data from table to storefront we need a controller, here’s how a controller looks like in Shopware<\/p>\n\n\n\n The _routeScope<\/strong> annotation is crucial while defining the controller. If you want to use it for storefront purposes then define it by “_routeScope”={“storefront”}<\/em><\/strong> and for using it with administration use “_routeScope”={“api”}<\/em><\/strong>.<\/p>\n\n\n\n The services.xml<\/strong> file registers all the services<\/strong>, controllers<\/strong>, entity definitions<\/strong>, page loaders<\/strong>, schedulers<\/strong>, etc.,<\/p>\n\n\n\n After adding the controller create the twig file and render the data sent from the controller to that file. For the detailed explanation refer to the how to add templates in Shopware.<\/a><\/p>\n\n\n\n To wrap it up, creating a Shopware plugin is a fantastic way to boost your online store’s capabilities. Leverage the community and official resources, stay creative, and enjoy your coding journey!<\/p>\n\n\n\n If you need custom Shopware Development Services<\/a> then feel free to reach us<\/a> and also explore our exclusive range of Shopware Plugins<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"![\"hirearchy_up\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/hirearchy_up-1200x893.png\")
Step 1: Create a base setup for the plugin in shopware<\/h2>\n\n\n\n
.\/bin\/console plugin:create WkBlogPlugin<\/pre>\n\n\n\n
\n
![\"create](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/screenshot_1694147092486-1200x608.png\")
Step 2: Create migration and entities for the plugin in shopware<\/h2>\n\n\n\n
.\/bin\/console database:create-migration -p WkBlogPlugin<\/pre>\n\n\n\n
#src\/Migration\/Migration*.php\n\npublic function update(Connection $connection): void\n{\n $connection->executeUpdate('\n CREATE TABLE IF NOT EXISTS `Wk_blog` (\n `id` BINARY(16) NOT NULL,\n `media_id` BINARY(16) NOT NULL,\n `title` VARCHAR(50),\n `created_at` DATETIME(3) NOT NULL,\n `updated_at` DATETIME(3) NULL,\n PRIMARY KEY (id),\n CONSTRAINT `fk.media.id` FOREIGN KEY (`media_id`)\n REFERENCES `media` (`id`)\n ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;\n ');\n}<\/pre>\n\n\n\nStep 3: Create configurations for the plugin in shopware<\/h2>\n\n\n\n
#src\/Resources\/config\/config.xml\n\n<?xml version="1.0" encoding="UTF-8"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n xsi:noNamespaceSchemaLocation="https:\/\/raw.githubusercontent.com\/shopware\/platform\/trunk\/src\/Core\/System\/SystemConfig\/Schema\/config.xsd">\n <card>\n <title>Blog Plugin Settings<\/title>\n <title lang="de-DE">Blog-Plugin-Einstellungen<\/title>\n\n <input-field type="bool">\n <name>isShare<\/name>\n <label>Add Share Button on Blogs?<\/label>\n <label lang="de-DE">Schaltfl\u00e4che \u201eTeilen\u201c in Blogs hinzuf\u00fcgen?<\/label>\n <defaultValue>false<\/defaultValue>\n <\/input-field>\n <\/card>\n<\/config><\/pre>\n\n\n\n
![\"create](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-from-2023-09-05-16-28-40-1200x623.png\")
Step 4: Create a module in the administration<\/h2>\n\n\n\n
#src\/Resources\/app\/administration\/src\/main.js\n\nimport '.\/module\/wk-blog';<\/pre>\n\n\n\n
src\/Resources\/app\/administration\/src\/module\/Wk-blog\/index.js\n\nimport '.\/page\/Wk-blog-list';\n\nimport enGB from '.\/snippet\/en-GB';\nimport deDE from '.\/snippet\/de-DE';\n\nShopware.Module.register('Wk-blogs', {\n type: 'plugin',\n name: 'blogs',\n title: 'Wk-blog.settings.title',\n description: 'Manage Blogs',\n color: '#ff3d58',\n icon: 'default-shopping-paper-bag-product',\n \n snippets:{\n 'de-DE': deDE,\n 'en-GB': enGB\n },\n\n routes:{\n list:{\n component: 'blog-list',\n path: 'list',\n meta: {\n parentPath: 'sw.settings.index.plugins'\n }\n }\n },\n\n settingsItem: [{\n group: 'plugins',\n to: 'Wk.blogs.list',\n icon: 'default-object-rocket',\n name: 'exampleBlogs'\n }]\n \n});<\/pre>\n\n\n\n![\"plugin](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/Admin_Setting-1200x618.png\")
Step 5: Create a controller for Storefront<\/h2>\n\n\n\n
#src\/Controller\/Storefront\/BlogController.php\n\n<?php\n\nnamespace WkBlogPlugin\\Controller\\Storefront;\n\nuse Symfony\\Component\\Routing\\Annotation\\Route;\nuse Shopware\\Storefront\\Controller\\StorefrontController;\nuse Shopware\\Core\\System\\SalesChannel\\SalesChannelContext;\nuse Symfony\\Component\\HttpFoundation\\Request;\nuse Symfony\\Component\\HttpFoundation\\Response;\n\n\/**\n * @Route(defaults={"_routeScope"={"storefront"}})\n *\/\nclass BlogController extends StorefrontController{\n\n private EntityRepository $blogRepository;\n public function __construct(\n EntityRepository $blogRepository\n ){\n $this->blogRepository = $blogRepository;\n }\n\n \/**\n * \n * @Route("\/blogs",name="frontend.blogs.list",methods={"GET", "POST"})\n *\/\n public function blogs(Request $request): Response {\n \/\/some logic to get data for blogs\n $data = [];\n\n \/\/render storefront and send data to twig file\n return $this->renderStorefront('@wkBlogPlugin\/storefront\/page\/blogs.html.twig', [\n 'data' => $data\n ]);\n }\n}<\/pre>\n\n\n\n<service id="WkBlogPlugin\\Controller\\Storefront\\BlogController" public="true">\n <tag name="controller.service_arguments"\/>\n <argument type="service" id="wk_blog.repository"\/>\n <call method="setContainer">\n <argument type="service" id="service_container" \/>\n <\/call>\n<\/service><\/pre>\n\n\n\n
Conclusion<\/h2>\n\n\n\n