Magento 2 Blog • May 10, 2022

Magento 2 How To Add Frontend Product Url In Product Grid of Admin Panel

Hello Guys! 👋

Sometimes store admin needs to check the product from the frontend then the admin should search SKU or product name from the frontend this process takes so much time. So in this blog, we add the frontend product URL in the product grid of the admin panel.

So this blog store owner easily navigates to the front-end of the product view from the admin grid.

Add the following code in your custom extension to achieve this in your store.

STEP 1: Add product_listing.xml in follwoing path

app\code\Vendor\Extension\view\adminhtml\ui_component

<?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">
    <columns name="product_columns">
        <column name="preview" class="Vendor\Extension\Ui\Component\Columns\ProductUrl">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">View</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

STEP 2: Now add ProductUrl.php in follwoing path

app\code\Vendor\Extension\Ui\Component\Columns

<?php
namespace Vendor\Extension\Ui\Component\Columns;


use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;

class ProductUrl extends Column
{
    protected $productRepository;

    public function __construct(
        ContextInterface                           $context,
        UiComponentFactory                         $uiComponentFactory,
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
        array                                      $components = [],
        array                                      $data = []
    )
    {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->productRepository = $productRepository;

    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource["data"]["items"])) {
            $fieldName = $this->getData("name");
            foreach ($dataSource["data"]["items"] as $key => $item) {
                $storeId = 1;
                $product = $this->productRepository->getById($item['entity_id'], false, $storeId);
                $url = $product->setStoreId($storeId)->getUrlModel()->getUrlInStore($product, ['_escape' => true]);
                $html = "<a target='_blank' href=" . $url . ">";
                $html .= "Frontend Link";
                $html .= "</a>";
                $dataSource["data"]["items"][$key][$fieldName] = $html;
            }
        }

        return $dataSource;
    }
}

Hope! It will help you

Thank you 😊