How to add bulk action on product listing page Magento 2?

The beauty of Magento 2 is the flow of processing. With a few easy steps, we will see how we can add new action on the product grid page in the admin panel. Bulk actions are used to perform the operation on multiple products at the same time instead of an individual product. By default, Magento 2 provides bulk operations such as delete, change status, and update attributes. Let’s see how we can add our custom action in the top left dropdown.

We need to create a new module. We will say it WebbyTroops_BulkCustomOptions. Create a new file on Magento 2 project directory at app/code/WebbyTroops/BulkCustomOptions/registration.php.

<?php
/**
 * Copyright © 2022 WebbyTroops, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'WebbyTroops_BulkCustomOptions',
    __DIR__
);

After the registration file, we need to create a module file in app/code/WebbyTroops/BulkCustomOptions/etc/module.xml.

<?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="WebbyTroops_BulkCustomOptions" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>
  

The above steps are for registering our module with the Magento system. Now let’s create our custom action on the product listing page. For that, we need to create a file at app/code/WebbyTroops/BulkCustomOptions/view/adminhtml/ui_component/product_listing.xml.

<?xml version="1.0" encoding="UTF-8"?>

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <listingToolbar name="listing_top">
        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                </item>
            </argument>
            <action name="addoption">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">addoption</item>
                        <item name="label" xsi:type="string" translate="true">Bulk Add Custom Options</item> <!--Label for the action -->
                        <item name="url" xsi:type="url" path="bulk/index/saveoptions"/> <!--provide the controller path-->
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Bulk Add Custom Options</item>
                            <item name="message" xsi:type="string" translate="true">Are you sure want to add custom options for selected items?
                            </item>
                        </item>
                    </item>
                </argument>
            </action>
        </massaction>
        <paging name="listing_paging"/>
    </listingToolbar>
</listing>

Now in the next part, we need to follow the steps of creating a custom controller in magneto 2. In the controller, you get the product ids. Using the product ids you can perform any operation for all those products.

For more information about load a product from id in Magneto 2 you can check the following link for how to get a product by ID and SKU in Magento 2?

Leave A Comment

Go To Top