Magento Best Way to Call Modalbox After Item is Added to Cart

Question

I'm looking for a way to call a Modalbox after a customer has added an item to a cart.

How do you call a Modalbox from within php? I was thinking of calling the modalbox after the success message in the CartController.php, however, I don't know how to do this from PHP, only from an HTML link with OnClick.

Answer 1

Obviously you cannot do exactly that as PHP is run on the server and the Modalbox is run in JavaScript in the client's browser - potentially on opposite sides of the world, as much as we like to forget physical barriers do have an effect on software. The best we can do is insert Javascript code in appropriate places so that the browser eventually executes it.

The first concrete sign of an item being added is the checkout_cart_product_add_after event. Create a module and amend it's config.xml file;

<config>
    <!-- ...usual blocks, helpers and models stuff here... -->
    <frontend>
        <!-- this is the safest way to catch items being added -->
        <events>
            <checkout_cart_product_add_after>
                <observers>
                    <yourmodule_product_add>
                        <class>yourmodule/observer</class>
                        <method>onProductAdd</method>
                    </yourmodule_product_add>
                </observers>
            </checkout_cart_product_add_after>
        </events>
        <!-- will need to insert a block later -->
        <layout>
            <updates>
                <yourmodule>
                    <file>yourmodule.xml</file>
                </yourmodule>
            </updates>
        </layout>
    </frontend>
</config>

That declares an observer which it expects to find in Your/Module/Model/Observer.php ;

class Your_Module_Model_Observer
{
    public function onProductAdd()
    {
        // page might redirect immediately so make a flag for now
        Mage::getSingleton('checkout/session')->setShowModalbox(true);
    }
}

You should be able to see what will happen next. A file was earlier declared as app/design/frontend/base/default/layout/yourmodule.xml ;

<layout>
    <!-- hook this block for all pages because anything
         might be shown after adding a product -->
    <default>
        <reference name="before_body_end">
            <block type="yourmodule/modalbox" name="yourmodule_modalbox" />
        </reference>
    </default>
    <default>
</layout>

The final step is to make Your/Module/Block/Modalbox.php which will actually insert the relevant Javascript when necessary;

class Your_Module_Block_Modalbox extends Mage_Core_Block_Text_Tag_Js
{
    protected function _toHtml()
    {
        if (!Mage::getSingleton('checkout/session')->getShowModalbox())
            return $this;

        $url = 'URL to show in Modalbox';
        $this->setContents("Modalbox.show({$url}, {width: 600});");
        Mage::getSingleton('checkout/session')->unsShowModalBox();

        return parent::_toHtml();
    }
}

---

_{This is the only best practice way I can think of but I am enamoured with Mage_Core_Block_Text_Tag_Js having just discovered it. As the saying goes 'when all you have is a hammer all problems start to look like nails'. I may be missing something simpler and more obvious.}