How to Add Custom Button in Backend Category Page Section in Magento 2?- Magento source24

 

Hello magento friends todays in this blog post im share with you to How to Add Custom Button in Backend Category Page Section in Magento 2.


How to Add Custom Button in Backend Category Page Section in Magento 2?- Magento source24


➤ To add a custom button to the backend category page section in Magento 2, you'll need to create a small custom module. Follow these steps to achieve this:


  Create the custom module directory structure:

Assuming your custom module is named "Vendor_Module," create the following directory structure in your Magento 2 installation:


app/code/Vendor/Module


➤  Create module registration file:

Inside the "Module" folder, create a file named registration.php with the following content:

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);


➤  Create the module configuration file:

In the same "Module" folder, create a file named module.xml with the following content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0"/>
</config>


➤  Create the layout file for your custom button:

Create the file view/adminhtml/layout/catalog_category_edit.xml in the "Module" folder with the following content:


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Backend\Block\Widget\Button" name="custom_button" template="Vendor_Module::custom_button.phtml"/>
        </referenceContainer>
    </body>
</page>

➤   Create the template file for the custom button:

Create the file view/adminhtml/templates/custom_button.phtml in the "Module" folder with the following content:


<?php /** @var \Magento\Backend\Block\Widget\Button $block */ ?>
<?php if ($block->getIsAllowed()): ?>
    <button class="action-default" type="button" onclick="customButtonClick()">Custom Button</button>
    <script>
        require(['jquery'], function($) {
            function customButtonClick() {
                // Your custom button click logic here
                alert('Custom Button Clicked!');
            }
        });
    </script>
<?php endif; ?>


➤   Enable the custom module:

Run the following CLI commands from the Magento 2 root directory:

php bin/magento module:enable Vendor_Module
php bin/magento setup:upgrade
php bin/magento cache:clean


After completing these steps, you should see the "Custom Button" added to the category edit page in the backend. The button will execute the JavaScript function customButtonClick() when clicked, and you can replace the alert('Custom Button Clicked!'); line with your custom logic.

Note that these instructions assume you have a basic understanding of Magento 2 module development and have the necessary permissions to make changes to the system. Always make sure to back up your Magento installation before making any modifications.








Deepak Kumar Bind

Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.

Post a Comment

If you liked this post please do not forget to leave a comment. Thanks

Previous Post Next Post