How can I make a cart header automatically dropdown when a product is added using Ajax or Javascript?

Question

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:

config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <MyModule_Cartheader>
      <version>0.1.0</version>
    </MyModule_Cartheader>
  </modules>
  <frontend>
    <routers>
      <cartheader>
        <use>standard</use>
          <args>
            <module>MyModule_Cartheader</module>
            <frontName>cartheader</frontName>
          </args>
      </cartheader>
    </routers>
        <layout>
          <updates>
            <cartheader>
              <file>cartheader.xml</file>
            </cartheader>
          </updates>
        </layout>
  </frontend>
  <global>
    <helpers>
      <cartheader>
        <class>MyModule_Cartheader_Helper</class>
      </cartheader>
    </helpers>
    <blocks>
      <cartheader>
        <class>MyModule_Cartheader_Block</class>
      </cartheader>
    </blocks>
  </global>
</config> 

Block/Cartheader.php

<?php

class LDM_Cartheader_Block_Cartheader extends Mage_Checkout_Block_Cart_Sidebar{

.........

}

checkout.xml

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

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>
            </ul>
        </div>
    <?php else:?>
        <div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>">
            <strong id="cartHeader"><?php echo $_myCart ?></strong>
        </div>
        <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)') ?>
                    </p>
                    <ol id="mini-cart" class="mini-products-list">
                        <?php foreach($_items as $_item): ?>
                            <?php echo $this->getItemHtml($_item) ?>
                        <?php endforeach; ?>
                    </ol>
                    <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>
                    <p class="cart-empty">
                        <?php echo $this->__('You have no items in your shopping cart.') ?>
                    </p>
                <?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; ?>
                    </p>
                    <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>
                    </div>
                <?php endif ?>
            </div>
        </div>
        <script type="text/javascript">
            Enterprise.TopCart.initialize('topCartContent');
            // Below can be used to show minicart after item added
            Enterprise.TopCart.showCart(7);
        </script>
    <?php endif;?>
</div>

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

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:

Enterprise.TopCart.showCart(7);

with this:

jQuery( document ).ready(function() {
    if( jQuery('#messages_product_view').children().length ){ 
        if(jQuery('#messages_product_view').children().children().attr('class') == 'success-msg') {
            Enterprise.TopCart.showCart(7);
        }
    }
});

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.