Home > Blog > How to Display Product Info in Popup

How to Display Product Info in Popup

Mar 13, 2014

If I ask you how to make some information from a product page display in a pop-up you will most probably say that it is an easy task to do. Just pass the product id via ajax-request and then load the product object in the controller and thus you can generate any information.

Yes, this is really easy to implement. But what if I want something more? For example, if I want to display the content exactly in the same way it is presented on the product page. Because there can be several modules enabled on the store which influence the product page content, so I would like the pop-up to take all of them into account.

– How do we know which modules affect the product page?

– How to connect them to layout for our controller?

These questions are not that simple to answer, are they?

However, there is still a simple solution to be found. You do not need to make your own controllers – let’s use the product page itself. That is, we will send the ajax-request directly to the product page. But we do not need the entire page. To distinguish Ajax from a standard page loading we will add the parameter ? myextensiоn_аjаx=1 to the URL. To return only a particular block let’s use an Observer. To avoid page loading simply add the command die at the end.

This even is implemented after each action in the controller:

controller_action_postdispatch_[extension]_[controller]_[action]

We use this method to output product options in a popup in the module Magento Ajаx Cаrt

This is the example of the module code we get:

MyExtension/etc/config.xml

            <controller_action_postdispatch_catalog_product_view>
                <observers>
                    <belvg_postdispatch_catalog_product_view>
                        <type>singleton</type>
                        <class>myextension/observer</class>
                        <method>productView</method>
                    </belvg_postdispatch_catalog_product_view>
                </observers>
            </controller_action_postdispatch_catalog_product_view>

<controller_action_postdispatch_catalog_product_view>

<belvg_postdispatch_catalog_product_view>

<type>singleton</type>

<class>myextension/observer</class>

<method>productView</method>

</belvg_postdispatch_catalog_product_view>

</observers>

</controller_action_postdispatch_catalog_product_view>

MyExtension/Model/Observer.php

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

public function productView(Varien_Event_Observer $observer)
{
        $isAjax = Mage::app()->getRequest()->getParam('myextension_ajax');
        if ($isAjax) {
                $this->_action = $observer->getEvent()->getControllerAction();
                $blockName = 'product.info.media';
                $return['mediaHtml']  = $this->_getBlockHtml($blockName);

                . . . . . . .

                echo Mage::helper('core')->jsonEncode($return);
                die;
        }
}

//$blockName – block name in layout, that we need to output

protected function _getBlockHtml($blockName)
{
        $block = $this->_action->getLayout()->getBlock($blockName);

        return ($block instanceof Mage_Core_Block_Template) ? $block->toHtml() : '';
}