Been trying to recreate the dropdown cart header for near 4 hours without any success. I've created a module to do it but I must have missed something as I am getting no joy!

I need a mini cart which automatically drops down whenever a product is added to the shopping cart using Ajax/Javascript

Here is what I have so far:


<?xml version="1.0"?>



class LDM_Cartheader_Block_Cartheader extends Mage_Checkout_Block_Cart_Sidebar{




<?xml version="1.0"?>   
<layout version="0.1.0">   
    <reference name="header">
      <block type="cartheader/cartheader" name="cart_cartheader" template="checkout/cart/cartheader.phtml"/>


<div class="top-cart">
    <?php $_cartQty = $this->getSummaryCount() ?>
    <?php if ($_cartQty > 0): ?>
        <?php $_myCart = $this->__('My Cart (<span>%s</span>)', $_cartQty) ?>
    <?php else: ?>
        <?php $_myCart = $this->__('My Cart (<span>0</span>)') ?>
    <?php endif ?>
    <?php if ($this->getIsLinkMode() || !$this->getIsNeedToDisplaySideBar()):?>
        <div class="block-title no-items">
            <ul class="links cart-link">
                <li ><a href="<?php echo $this->getUrl('checkout/cart'); ?>"><?php echo $_myCart ?></a></li>
    <?php else:?>
        <div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>">
            <strong id="cartHeader"><?php echo $_myCart ?></strong>
        <div id="topCartContent" class="block-content" style="display:none">
            <div class="inner-wrapper"><?php // extra div to smooth slideUp and slideDown ?>
                <?php $_items = $this->getRecentItems() ?>
                <?php if(count($_items)): ?>
                    <p class="block-subtitle">
                        <span onclick="Enterprise.TopCart.hideCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>
                        <?php echo $this->__('Recently added item(s)') ?>
                    <ol id="mini-cart" class="mini-products-list">
                        <?php foreach($_items as $_item): ?>
                            <?php echo $this->getItemHtml($_item) ?>
                        <?php endforeach; ?>
                    <script type="text/javascript">decorateList('mini-cart', 'none-recursive')</script>
                <?php else: ?>
                    <p class="block-subtitle">
                        <span onclick="Enterprise.TopCart.hideCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>
                        <?php echo $this->__('Recently added item(s)') ?>
                    <p class="cart-empty">
                        <?php echo $this->__('You have no items in your shopping cart.') ?>
                <?php endif ?>
                <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
                    <p class="subtotal">
                        <?php if ($this->canApplyMsrp()): ?>
                            <span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
                        <?php else: ?>
                            <span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?><?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?> / <?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?><?php endif; ?>
                        <?php endif; ?>
                    <div class="actions">
                        <?php echo $this->getChildHtml('extra_actions') ?>
                        <button class="button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button>
                        <a href="<?php echo $this->getUrl('checkout/cart'); ?>"><span><?php echo $this->__('Go to Shopping Cart') ?></span></a>
                <?php endif ?>
        <script type="text/javascript">
            // Below can be used to show minicart after item added
    <?php endif;?>

I have also included a cartheader.js file but it not working, Has anybody accomplished this before and can provide some guidance?

  • What does the cart header do in enterprise? Nov 10, 2013 at 23:09
  • @FabianBlechschmidt When a product is added to the shopping cart you can set it to dropdown to display the recectly added item(s). The drawback is the page refresh that is uses to initiate the dropdown and the cart will continue to dropdown on every page refresh. Nov 11, 2013 at 9:57
  • @user2157 Agree. It will dropdown on every page refresh because your Enterprise.TopCart.showCart(7); is open for every page requests. You need to use some condition so that it drops down only when product added to cart. See my answer.
    – Kalpesh
    Nov 11, 2013 at 14:15

1 Answer 1


I don't know why you have to create a custom module for this thing. You can simply check the messages of the page if any product is added and call the mini-cart to scroll down.

The best way is to listen the event when the product is added to cart, but that involves php coding. I can show you how to do it with just few lines of jquery code.

Here you go..

In the cartheader.php file, replace the below line:


with this:

jQuery( document ).ready(function() {
    if( jQuery('#messages_product_view').children().length ){ 
        if(jQuery('#messages_product_view').children().children().attr('class') == 'success-msg') {

Basically what the code does is, it will check the whole page once loaded, for the success msg. You can even take it little further to check if the messages contains the text something like "was added to your shopping cart" to full-proof it.

I have tested the above code and it works. You can try it for yourself.

  • Where would i implement this code in the community version? thanks
    – Tom Burman
    Jan 28, 2014 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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