How to Add a Frontend Product URL Column to the Admin Product Grid in Magento 2

Table of Contents

  1. Introduction
  2. Implementing the Frontend URL Column
  3. Handling Different Product Types
  4. Conclusion
  5. FAQs
Shopify - App image

Introduction

Have you ever found yourself wading through the Magento 2 admin product grid, wishing there was a simpler way to link directly to your product pages? If so, you're not alone. Efficiently managing your product listings is a critical aspect of running an e-commerce business. One common request from store managers and developers alike is the ability to add a frontend product URL column to the admin product grid to streamline operations.

In this blog post, we'll explore the step-by-step process to implement this feature in Magento 2. We'll cover setting up the necessary files, handling different product types, and ensuring that the URLs display correctly for all products. By the end of this post, you'll be equipped with the knowledge to enhance your Magento 2 admin interface, making product management more intuitive and efficient.

Implementing the Frontend URL Column

To add a frontend product URL column to the admin product grid in Magento 2, you'll need to create or modify several files. Let’s break down each step to achieve this goal.

Step 1: Update Configuration Files

The first step is to configure the necessary files within the etc/adminhtml directory. Specifically, we need to address the di.xml and module.xml files.

etc/adminhtml/di.xml

In di.xml, you'll need to declare your custom column class by adding the following lines:

<type name="Magento\Catalog\Ui\Component\Listing\Columns\ProductActions">
    <arguments>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Vendor\Module\Ui\Component\Columns\ProductGrid</item>
            </item>
        </argument>
    </arguments>
</type>

This configuration enables Magento to use your custom column component in the product grid.

etc/adminhtml/module.xml

Ensure your module.xml file includes your custom module setup:

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

This snippet declares your custom module and its version, ensuring Magento recognizes it during setup and upgrades.

Step 2: Add the Custom Column Class

Next, create a custom column class to handle the logic for generating frontend URLs. This class should extend the default Magento\Ui\Component\Listing\Columns\Column class.

Ui/Component/Columns/ProductGrid.php

Create the ProductGrid.php file in the Ui/Component/Columns directory of your module:

namespace Vendor\Module\Ui\Component\Columns;

use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
use Magento\Store\Model\StoreManagerInterface;

class ProductGrid extends Column
{
    protected $urlBuilder;
    protected $storeManager;

    public function __construct(
        UrlInterface $urlBuilder,
        StoreManagerInterface $storeManager,
        ... // other necessary dependencies
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->storeManager = $storeManager;

        parent::__construct(...);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                $item[$this->getData('name')] = $this->storeManager->getStore()->getBaseUrl() . 'catalog/product/view/id/' . $item['entity_id'];
            }
        }

        return $dataSource;
    }
}

This class uses Magento's URL builder and store manager to generate the appropriate frontend URLs for each product.

Step 3: Define the Column in the UI Component

Finally, update the product_listing.xml file within your module to include the new column.

view/adminhtml/ui_component/product_listing.xml

Add the new column to your grid layout:

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <columns name="product_columns">
        <column name="frontend_url" class="Vendor\Module\Ui\Component\Columns\ProductGrid">
            <settings>
                <label translate="true">Frontend URL</label>
                <sortable>false</sortable>
            </settings>
        </column>
    </columns>
</listing>

This configuration specifies that the ProductGrid class should be used to render the new column, and labels it as "Frontend URL".

Handling Different Product Types

Different product types in Magento, such as configurable, bundle, and grouped products, often come with parent-child relationships that need careful handling. Ensure that the URLs are correctly formatted and displayed based on the product's visibility:

  1. Configurable Products: Ensure child product URLs lead to the parent product page.
  2. Bundle Products: Similar to configurable products, the URL should direct to the main bundle product page.
  3. Grouped Products: Display the grouped product's URL, ensuring all associated products are represented under the grouped entity.

To address these use cases, you may need to extend the logic within ProductGrid.php to check the product type and adjust the URL generation accordingly.

Conclusion

Adding a frontend product URL column to the Magento 2 admin product grid significantly enhances your ability to manage and navigate your product listings efficiently. By following the steps outlined here, you can implement this feature, considering various product types and ensuring accurate URL representation for each product.

Tackling this enhancement involves modifying configuration files, adding custom grid logic, and updating the user interface component, all critical parts in extending Magento's powerful framework.

FAQs

How can I ensure the URLs display correctly for all product types?

To handle different product types like configurable, bundle, and grouped products, extend the logic in your ProductGrid.php class. Ensure the URL directs correctly to the parent product page when dealing with child products.

What if the URLs are not displaying correctly?

Double-check your ProductGrid.php logic and ensure your dependency injections are properly set. Verify that your product_listing.xml correctly includes the new column configuration.

Can I make this column sortable?

By default, the URL column is set to non-sortable for simplicity. If you need to make it sortable, ensure the URLs are consistently formatted and update your column settings accordingly in the product_listing.xml file.

By implementing these steps, you can enhance the Magento 2 admin product grid, making your managerial tasks more efficient and streamlined.