cancel
Showing results for 
Search instead for 
Did you mean: 

Add custom button on add/edit product page

SOLVED

Add custom button on add/edit product page

magento222.PNGHow to add a custom button, in add/edit product page (magento2). I need to open popup on clicking of the button.

 

https://i.stack.imgur.com/uHZ33.png

2 ACCEPTED SOLUTIONS

Accepted Solutions

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

First of all you need to create a folder app/code/HexBrain/ProductView where HexBrain is the vendor name and ProductView is the extension name.


you need to let Magento know that your extension exists. So you need to create registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'HexBrain_ProductView',
    __DIR__
);

The very next step is creating subfolder etc with config.xml file inside:

 

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

You just need to create a layout file catalog_product_edit.xml in subfolder view/adminhtml/layout/

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="page.actions.toolbar">
            <block class="HexBrain\ProductView\Block\Adminhtml\ViewProductButton" as="view_product_button"/>
        </referenceBlock>
    </body>
</page>


The next step will be creating a block file ViewProductButton.php in the directory Block/Adminhtml/. Here is the content of this file:

<?php
namespace HexBrain\ProductView\Block\Adminhtml;
class ViewProductButton extends \Magento\Backend\Block\Widget\Container
{
    /**
     * @var \Magento\Catalog\Model\Product
     */
    protected $_product;
    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry = null;
    /**
     * App Emulator
     *
     * @var \Magento\Store\Model\App\Emulation
     */
    protected $_emulation;
    /**
     * @param \Magento\Backend\Block\Widget\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Catalog\Model\Product $product
     * @param \Magento\Store\Model\App\Emulation $emulation
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Catalog\Model\Product $product,
        \Magento\Store\Model\App\Emulation $emulation,
        array $data = []
    )
    {
        $this->_coreRegistry = $registry;
        $this->_product = $product;
        $this->_request = $context->getRequest();
        $this->_emulation = $emulation;
        parent::__construct($context, $data);
    }
    /**
     * Block constructor adds buttons
     *
     */
    protected function _construct()
    {
        $this->addButton(
            'preview_product',
            $this->getButtonData()
        );
        parent::_construct();
    }
    /**
     * Return button attributes array
     */
    public function getButtonData()
    {
        return [
            'label' => __('View'),
            'on_click' => sprintf("window.open('%s')", $this->_getProductUrl()),
            'class' => 'view disable',
            'sort_order' => 20
        ];
    }
    /**
     * Return product frontend url depends on active store
     *
     * @return mixed
     */
    protected function _getProductUrl()
    {
        $store = $this->_request->getParam('store');
        if (!$store) {
            $this->_emulation->startEnvironmentEmulation(null, \Magento\Framework\App\Area::AREA_FRONTEND, true);
            $productUrl = $this->_product->loadByAttribute('entity_id', $this->_coreRegistry->registry('product')->getId())->getProductUrl();
            $this->_emulation->stopEnvironmentEmulation();
            return $productUrl;
        } else {
            return $this->_product
                ->loadByAttribute('entity_id', $this->_coreRegistry->registry('product')->getId()
                )->setStoreId($store)->getUrlInStore();
        }
    }
}

I hope that you have an idea to enable module 


You can get it here https://github.com/HexBrain/Magento2ViewProductButton

 

--
If my answer is useful, please Accept as Solution & give Kudos

View solution in original post

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

Please follow below steps

  1. Comment this code, check here https://www.screencast.com/t/1Vb4CjfeyN because URL is not getting while creating a new product so it's just example so you can ignore it.
  2. Create a new file on this location with catalog_product_form.xml name and add below content app/code/HexBrain/ProductView/view/adminhtml/layout/catalog_product_form.xml
    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="page.actions.toolbar">
                <block class="HexBrain\ProductView\Block\Adminhtml\ViewProductButton" as="view_product_button"/>
            </referenceBlock>
        </body>
    </page>
    Don't forget to run mentioned command on previous comment.

 

--
If my answer is useful, please Accept as Solution & give Kudos

 

 

View solution in original post

10 REPLIES 10

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

I can't see attached screenshot, Please upload on thirdparty service and give us URL.

 

--

If my answer is useful, please Accept as Solution & give Kudos

Re: Add custom button on add/edit product page

please check it now

Re: Add custom button on add/edit product page

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

First of all you need to create a folder app/code/HexBrain/ProductView where HexBrain is the vendor name and ProductView is the extension name.


you need to let Magento know that your extension exists. So you need to create registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'HexBrain_ProductView',
    __DIR__
);

The very next step is creating subfolder etc with config.xml file inside:

 

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

You just need to create a layout file catalog_product_edit.xml in subfolder view/adminhtml/layout/

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="page.actions.toolbar">
            <block class="HexBrain\ProductView\Block\Adminhtml\ViewProductButton" as="view_product_button"/>
        </referenceBlock>
    </body>
</page>


The next step will be creating a block file ViewProductButton.php in the directory Block/Adminhtml/. Here is the content of this file:

<?php
namespace HexBrain\ProductView\Block\Adminhtml;
class ViewProductButton extends \Magento\Backend\Block\Widget\Container
{
    /**
     * @var \Magento\Catalog\Model\Product
     */
    protected $_product;
    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry = null;
    /**
     * App Emulator
     *
     * @var \Magento\Store\Model\App\Emulation
     */
    protected $_emulation;
    /**
     * @param \Magento\Backend\Block\Widget\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Catalog\Model\Product $product
     * @param \Magento\Store\Model\App\Emulation $emulation
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Catalog\Model\Product $product,
        \Magento\Store\Model\App\Emulation $emulation,
        array $data = []
    )
    {
        $this->_coreRegistry = $registry;
        $this->_product = $product;
        $this->_request = $context->getRequest();
        $this->_emulation = $emulation;
        parent::__construct($context, $data);
    }
    /**
     * Block constructor adds buttons
     *
     */
    protected function _construct()
    {
        $this->addButton(
            'preview_product',
            $this->getButtonData()
        );
        parent::_construct();
    }
    /**
     * Return button attributes array
     */
    public function getButtonData()
    {
        return [
            'label' => __('View'),
            'on_click' => sprintf("window.open('%s')", $this->_getProductUrl()),
            'class' => 'view disable',
            'sort_order' => 20
        ];
    }
    /**
     * Return product frontend url depends on active store
     *
     * @return mixed
     */
    protected function _getProductUrl()
    {
        $store = $this->_request->getParam('store');
        if (!$store) {
            $this->_emulation->startEnvironmentEmulation(null, \Magento\Framework\App\Area::AREA_FRONTEND, true);
            $productUrl = $this->_product->loadByAttribute('entity_id', $this->_coreRegistry->registry('product')->getId())->getProductUrl();
            $this->_emulation->stopEnvironmentEmulation();
            return $productUrl;
        } else {
            return $this->_product
                ->loadByAttribute('entity_id', $this->_coreRegistry->registry('product')->getId()
                )->setStoreId($store)->getUrlInStore();
        }
    }
}

I hope that you have an idea to enable module 


You can get it here https://github.com/HexBrain/Magento2ViewProductButton

 

--
If my answer is useful, please Accept as Solution & give Kudos

Re: Add custom button on add/edit product page

@gelanivishal Thanks for detailed answer , one thing i want to ask will it add button on both edit and add Product page . can't we directly change magento core file or this is a standard way

Re: Add custom button on add/edit product page

 

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

Make sure you have followed below steps

  1. Download it https://github.com/HexBrain/Magento2ViewProductButton
  2. Extract it like as screenshot, make sure you have created a folder as per screenshot https://www.screencast.com/t/UHTfE1Pa
  3. Run below command in magento root directory via terminal
    php bin/magento module:enable HexBrain_ProductView
    php bin/magento setup:upgrade 
    php bin/magento setup:static-content:deploy -f
    php bin/magento cache:clean
    php bin/magento cache:flush
  4. Now open admin side you can see like https://www.screencast.com/t/d0uNammpFQ4

 


--
If my answer is useful, please Accept as Solution & give Kudos

Re: Add custom button on add/edit product page

@gelanivishal Please check add new product page it is not showing there , i did as you mentioned it is working for edit product but not for new product i add. Hope you got my point.

Thank You

Re: Add custom button on add/edit product page

Hello @Sahil_coder ,

 

Please follow below steps

  1. Comment this code, check here https://www.screencast.com/t/1Vb4CjfeyN because URL is not getting while creating a new product so it's just example so you can ignore it.
  2. Create a new file on this location with catalog_product_form.xml name and add below content app/code/HexBrain/ProductView/view/adminhtml/layout/catalog_product_form.xml
    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="page.actions.toolbar">
                <block class="HexBrain\ProductView\Block\Adminhtml\ViewProductButton" as="view_product_button"/>
            </referenceBlock>
        </body>
    </page>
    Don't forget to run mentioned command on previous comment.

 

--
If my answer is useful, please Accept as Solution & give Kudos