0

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.

Cart expanded on hover

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.

  • Replace the first "click()" with "mouseenter()" and the second "click" with "mouseleave". Note that this only works if the mini cart is actually triggered via JS events and not via CSS :hover. I would try to solve it with CSS classes anyway but without knowing your markup, I can't give you detailed instructions – Fabian Schmengler Sep 3 '15 at 14:40
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
}
1

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>
0

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. 
        });
}
  • This would open the header cart when the add to cart button is clicked but wouldn't open the header cart when the page reloads. – handcoded Jul 23 '15 at 11:29
  • @user1503887 i updated the answer. – Ajay Bisht Jul 23 '15 at 11:42
  • This defers the event registering but it still has the same effect. – Fabian Schmengler Sep 3 '15 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.