Add “View” Product Page Link in Backend at Catalog => Manage Products List

The current version of Magento is not editor-friendly in many regards and one of them is that the products list at Catalog => Manage Products doesn’t have any “View” link at the end of each product row for the catalog editor (human) to easily click on to open up the frontend product page to see what the users are actually seeing.

Rather, it has only the “Edit” link to open up the editor to edit the product. If one has to view a frontend product page from the backend, he or she’d have to copy the SKU and then search it in frontend to arrive at the product page which is very unhandy and annoying. Sometimes the results don’t even turn out any entries at all.

WordPress and lots of other famous CMS have this feature and I’m totally at a loss why Magento doesn’t have this ready for the convenience of the backend editors.

So how to add a “View” product link beside the “Edit” link for each product record?

At the end of article, you will have something similar to this:

Add view product links to the end of each product row in Magento

That is, “View” product links on each product row that you can click to open up the frontend product page. Screenshot taken from my wedding dresses store.

To do this, find this file:

/app/code/core/Mage/Adminhtml/Block/Catalog/Product/Grid.php

And copy it to:

/app/code/local/Mage/Adminhtml/Block/Catalog/Product/Grid.php

Open and edit the copied file /app/code/local/Mage/Adminhtml/Block/Catalog/Product/Grid.php, find a block like this:

$this->addColumn('action',
            array(
                'header'    => Mage::helper('catalog')->__('Action'),
                'width'     => '50px',
                'type'      => 'action',
                'getter'     => 'getId',
                'actions'   => array(
                    array(
                        'caption' => Mage::helper('catalog')->__('Edit'),
                        'url'     => array(
                            'base'=>'*/*/edit',
                            'params'=>array('store'=>$this->getRequest()->getParam('store'))
                        ),
                        'field'   => 'id'
                    )
                ),
                'filter'    => false,
                'sortable'  => false,
                'index'     => 'stores',
        ));

Which is the code for the “action” column of the products list. In the same manner, add an extra column named “view” by adding the code below immediately after “action“:

$this->addColumn('view',
            array(
                'header'    => Mage::helper('catalog')->__('View'),
                'width'     => '40px',
                'type'      => 'action',
                'getter'     => 'getId',
                'actions'   => array(
                    array(
                        'caption' => Mage::helper('catalog')->__('View'),
                        'url'     => array(
                            'base'=>'catalog/product/view',
                            'params'=>array('store'=>$this->getRequest()->getParam('store'))
                        ),
                        'field'   => 'id'
                    )
                ),
                'filter'    => false,
                'sortable'  => false,
                'index'     => 'stores',
        ));

That’s it. Now refresh your Manage Products page and you should see a “View” link at the end of each product row. Clicking them would lead you to the frontend page of that particular product. I’m not sure how to force it to open in new window or new tab but I guess you can always do this yourself by holding Ctrl key in Firefox and Chrome.

Bolded part is the key difference of the “view” block from the “action” block.

Differences between {{store direct_url=…}} and {{store url=…}}

When editing the CMS pages or static blocks, one should specify URLs with either {{store url=…}} or {{store direct_url=…}} directive in the HTML you create for them, so that the base URL is correctly and automatically outputted – http:// or https://, appending suffixes, etc.

{{store url=…}}

After some tests, I found that, basically, {{store url=…}} transforms the supplied parameter into a normalized URL. For example, it appends the suffix you specified in System -> Configuration -> Catalog -> Search Engine Optimizations to the end of the URL.

{{store url=’some//weird/page.php‘}} would output:

http://www.yourstore.com/some/weird/

Should you set ‘/’ as the category suffix.

{{store direct_url=…}}

This one simpler as it output whatever you put in the parameter and doesn’t do anything to them.

{{store url=’some//weird/page.php‘}} would output:

http://www.yourstore.com/some//weird/page.php

That’s it.