{"id":155,"date":"2022-05-10T15:11:37","date_gmt":"2022-05-10T09:41:37","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=155"},"modified":"2024-11-18T13:36:28","modified_gmt":"2024-11-18T08:06:28","slug":"magento-2-how-to-add-frontend-product-url-in-product-grid-of-admin-panel","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/magento-2-how-to-add-frontend-product-url-in-product-grid-of-admin-panel\/","title":{"rendered":"Magento 2 How To Add Frontend Product Url In Product Grid of Admin Panel"},"content":{"rendered":"\n

Hello Guys! \ud83d\udc4b <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

So this blog store owner easily navigates to the front-end of the product view from the admin grid.<\/p>\n\n\n\n

Add the following code in your custom extension to achieve this in your store.<\/p>\n\n\n\n

STEP 1: Add product_listing.xml<\/strong> in follwoing path\n<\/code><\/pre>\n\n\n\n
app\\code\\Vendor\\Extension\\view\\adminhtml\\ui_component<\/code><\/pre>\n\n\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n         xsi:noNamespaceSchemaLocation="\n  urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n    <columns name="product_columns">\n        <column name="preview" class="Vendor\\Extension\\Ui\\Component\\Columns\\ProductUrl">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="bodyTmpl" xsi:type="string">ui\/grid\/cells\/html<\/item>\n                    <item name="filter" xsi:type="string">text<\/item>\n                    <item name="label" xsi:type="string" translate="true">View<\/item>\n                <\/item>\n            <\/argument>\n        <\/column>\n    <\/columns>\n<\/listing>\n\n<\/pre><\/div>\n\n\n
STEP 2: Now add ProductUrl.php<\/strong> in follwoing path<\/code><\/pre>\n\n\n\n
app\\code\\Vendor\\Extension\\Ui\\Component\\Columns\n\n<\/code><\/pre>\n\n\n
\n<?php\nnamespace Vendor\\Extension\\Ui\\Component\\Columns;\n\n\nuse \\Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse \\Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse \\Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nclass ProductUrl extends Column\n{\n    protected $productRepository;\n\n    public function __construct(\n        ContextInterface                           $context,\n        UiComponentFactory                         $uiComponentFactory,\n        \\Magento\\Catalog\\Api\\ProductRepositoryInterface $productRepository,\n        array                                      $components = [],\n        array                                      $data = []\n    )\n    {\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n        $this->productRepository = $productRepository;\n\n    }\n\n    public function prepareDataSource(array $dataSource)\n    {\n        if (isset($dataSource["data"]["items"])) {\n            $fieldName = $this->getData("name");\n            foreach ($dataSource["data"]["items"] as $key => $item) {\n                $storeId = 1;\n                $product = $this->productRepository->getById($item['entity_id'], false, $storeId);\n                $url = $product->setStoreId($storeId)->getUrlModel()->getUrlInStore($product, ['_escape' => true]);\n                $html = "<a target='_blank' href=" . $url . ">";\n                $html .= "Frontend Link";\n                $html .= "<\/a>";\n                $dataSource["data"]["items"][$key][$fieldName] = $html;\n            }\n        }\n\n        return $dataSource;\n    }\n}\n\n\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
Hope! It will help you<\/p>\n\n\n\n
Thank you \ud83d\ude0a<\/p>\n\n\n\n
<\/div>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>