How to add Add frontend product url column to admin product grid in magento2

Question

I'm trying to add a column on the product grid with the product frontend url.. I had added the grid by the below codes,

etc/adminhtml/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\Reporting">
    <plugin name="products_grid_collection"/>
</type>
<type name="ProductGrid"> 
<arguments>
    <argument name="frontUrlModel" xsi:type="object" shared="false">Magento\Framework\Url</argument>
</arguments>
</type>

etc/adminhtml/module.xml

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

Ui\Component\Columns\ProductGrid.php

<?php
namespace SouqTime\ProductViewToProductGrid\Ui\Component\Columns;


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

class ProductGrid extends Column
{
protected $_storeManager;


public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    array $components = [], array $data = []
)
{
    $this->_storeManager  = $storeManager;
    parent::__construct($context, $uiComponentFactory, $components, $data);
}


public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource['data']['items'])) {
         $obManager = \Magento\Framework\App\ObjectManager::getInstance();
         $target    = $this->_storeManager->getStore()->getBaseUrl();
         $stManager = $obManager->get('Magento\Catalog\Model\Product'); 
         $fieldName = $this->getData("name"); 
         foreach ($dataSource["data"]["items"] as $key => $item)  {

          $product=$stManager->load($item["entity_id"]);
          $url_key = $product->getUrlInStore();

          $dataSource["data"]["items"][$key][$fieldName] = $url_key;

        }


    }

    return $dataSource;
}


}

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">
<columns name="product_columns">
    <column name="preview" class="SouqTime\ProductViewToProductGrid\Ui\Component\Columns\ProductGrid">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">View</item>
            </item>
        </argument>
    </column>
</columns>     
</listing>

Now,Above code return the first product's url to all products like below

https://i.sstatic.net/y9nkG.jpg

Please Anyone help me to fix this.. Thanks in advance.

Answer 1

I had solved by this way..

<?php
namespace SouqTime\ProductViewToProductGrid\Ui\Component\Columns;


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

class ProductGrid extends Column
{
protected $_storeManager;


public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    array $components = [], array $data = []
)
{

    parent::__construct($context, $uiComponentFactory, $components, $data);

    $this->_storeManager  = $storeManager;
    $this->productFactory = $productFactory;
    $this->product = $this->productFactory->create();

}

public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource["data"]["items"])) {
        $fieldName = $this->getData("name"); 
        $obManager = \Magento\Framework\App\ObjectManager::getInstance();
        $stManager = $obManager->get("Magento\Catalog\Model\Product");

        foreach ($dataSource["data"]["items"] as $key => $item)  {

          $storeId = 1;
          $product = $obManager->create('Magento\Catalog\Api\ProductRepositoryInterface')->getById($item['entity_id'], false, $storeId);
           $url =  $product->setStoreId($storeId)->getUrlModel()->getUrlInStore($product, ['_escape' => true]);
           $html = "<a target='_blank' href=" .$url. ">";
           $html .=  "view";
           $html .= "</a>"; 
           $dataSource["data"]["items"][$key][$fieldName] =  $html;
        }   
    }

    return $dataSource;
}


}

Answer 2

The solution is on the right track but having implemented this somewhat recently, there are some missing use cases such as the handling of the various product types (e.g. configurables, bundles, grouped, etc.) that have parent-child relationships and visibility that need to be considered.

I've published a more plug-n-play option in the marketplace here in case anyone is looking for an easier solution.