Question

I’ve been following various tutorials to try and use Magento event observers to display a custom Javascript alert after a customer adds a product to their cart, but can’t seem to get anything. Am I even close to going down the right track?

My Module:

<?xml version="1.0"?>
<config>
    <modules>
        <Shoplio_XS>
            <active>true</active>
            <codePool>local</codePool>
        </Shoplio_XS>
    </modules>
</config>

My config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <Shoplio_XS>
            <version>0.1.0</version>
        </Shoplio_XS>
    </modules>
    <frontend>
        <events>
            <sales_quote_product_add_after>
                <observers>
                    <Shoplio_XS_Model_Observer>
                        <type>singleton</type>
                        <class>Shoplio_XS_Model_Observer</class>
                        <method>Mytestmethod</method>
                    </Shoplio_XS_Model_Observer>
                </observers>
            </sales_quote_product_add_after>
        </events>
    </frontend>
</config>

My observer.php:

<?php class Shoplio_XS_Model_Observer
{
    public function Mytestmethod($observer) {
        $event = $observer->getEvent();

        // Javascript Alert Here

    } 
}

I’m primarily following this tutorial: http://goo.gl/DRwd5

The only difference is, I don’t want to display anything on the shopping cart page because I keep customers on the product page after a product is added to cart. I simply want to display a custom Javascript alert on the product page after the product is added to cart.

Answer 1

I decided to piggy back off the Magento core messages. I started by moving the Core Messages Block to my local folder and adding the following code around line 255:

/app/code/local/Mage/Core/Block/Messages.php

if(strstr($html, 'was added to your shopping cart')) {
    $html.= '<script type="text/javascript">setTimeout("myFunction()",1000);</script>';
}

The above snippet ensures that my custom Javascript function is executed with a delay ONLY when the core add to cart success message appears.

I added it right after:

$html.= ($this->_escapeMessageFlag) ? $this->htmlEscape($message->getText()) : $message->getText();

Then, in my view.phtml file, I added the following Javascript function to open a modal box with my custom message:

function xsModal() {
    Modalbox.show($('modal-id'), {title: 'My Custom Message', width: 600});
}

Works like a charm!