Open header cart when product added to cart

Question

I'd like to know how I can automatically open the header mini cart when a product is added to the shopping cart.

At present if you add a product to the cart the default Magento message appears which is fine but I would also like the header cart to expand to show more details.

The header cart has a hover action and the code looks like this

<div class="block-cart header-cart pull-right" id="ajaxcart">

I just need to know how to trigger it when an item is added to the cart and if possible how to close it again within perhaps 15 seconds of it opening.

Thanks

Update

I've added this code to my templates header file

<?php if (Mage::getSingleton('checkout/session')->getCartWasUpdated()) {

echo '<script>';
echo 'jQuery(document).ready(function(){';
echo 'cart_autoopen();';
echo '});';

echo 'function cart_autoopen(){';
echo '$(\'.add-to-cart\').click(function(){';
echo '$(\'.header-cart\').trigger(\'click\'); // this will open the cart if it was already closed';
echo 'setTimeout(function(){$(\'.header-cart\').trigger(\'click\');},15000);   // this will close the cart after 15 seconds. ';
echo '});';
echo '}';
echo"</script>";

};

?>

At the moment it isn't working but I think this is because the javascript is using a click trigger instead of mouse over. If someone cleverer than I am edit my code so that it triggers an onmouseover instead I think this could work.

Answer 1

The cart controller sets a flag in the checkout session after you have added a product to the cart, with setCartWasUpdated(true).

You can check this flag in your template and either change the CSS classes accordingly or trigger a click on the mini cart using JavaScript, if the flag is set:

if (Mage::getSingleton('checkout/session')->getCartWasUpdated()) {
    // open mini cart
}

Answer 2

This is amazingly simple, but i learn this after wasting few of my hours (they were not waste actually)

Create an observer to observe when product is added to cart.

Config.xml

<events>
<checkout_cart_product_add_after>
    <observers>
        <namespace_triggerevent>
            <type>singleton</type>       
            <class>NameSpace_TriggerEvent_Model_Observer</class>
            <method>opencartafteradd</method>
        </namespace_triggerevent>
    </observers>
</checkout_cart_product_add_after>
</events>

Now, Observer.php

<?php

class NameSpace_TriggerEvent_Model_Observer
{
public function opencartafteradd($observer) {
    $event = $observer->getEvent();
    $product = $event->getProduct(); 
    Mage::getSingleton('core/session')->setOpenMinicart('ON');
 }
}

Note that we are just setting a session variable ON. After this rest part would be handled using a small amount of java script on preferably header.phtml or footer.phtml (available to every single page on site :P). I just toggle down the minicart contents part and toggle up again after few seconds

<script type="text/javascript">
var $k = jQuery.noConflict();
$k(document).ready(function() {
    var screen_width = $k(window).width();
    var openminicart = '<?php echo Mage::getSingleton('core/session')->getOpenMinicart();?>';
    if (screen_width > 780) {
        if (openminicart == 'ON') {
                jQuery("#header-cart").slideToggle('slow');
                jQuery("#header-cart").addClass('skip-active');


                setTimeout(function() {
                    jQuery("#header-cart").slideUp('fast');
                    $k('#header-cart').removeClass('skip-active');
                }, 4000);


        <?php Mage::getSingleton('core/session')->unsOpenMinicart();?>

        }
    }
});
</script>

Answer 3

Try adding a jquery which triggers the click event on when you have clicked on add-to-cart button. For example, if your add to cart button has class "add-to-cart" then your JS would be

    $('.add-to-cart').click(function(){
      $('.header-cart').trigger('click'); // this will open the cart if it was already closed

      setTimeout(function(){$('.header-cart').trigger('click');},15000); // this will close the cart after 15 seconds. 
    });

UPDATE: To automatically open the cart on page load, your script will be

jQuery(document).ready(function(){
cart_autoopen();
});

function cart_autoopen(){
$('.add-to-cart').click(function(){
          $('.header-cart').trigger('click'); // this will open the cart if it was already closed

          setTimeout(function(){$('.header-cart').trigger('click');},15000); // this will close the cart after 15 seconds. 
        });
}