Magento Header CartThis post will demonstrate how to add a shopping cart summary to the header of your Magento store using the local.xml file

Given the amount of time Magento has been in the wild now, I thought finding good documentation on how to add a cart summary to the header of a site would be simple. Unfortunately not!

When building a Magento theme, I use the local.xml methodology, and fall back on the base files. It’s widely considered the ‘right’ way to theme for Magento and in the interests of being jolly good people, that’s the way we’ll be doing things here. If you aren’t familiar with the use of a local.xml to make your theme amendments, read the excellent Magento Designer’s guide and come back here when you are done.

First, in your local.xml file, add the following within the tag section:

If you want to remove the ‘cart’ and ‘checkout’ links from the header you also need to add this line:

Then finally here we want to add our new section, so stick this in:

  

Save the local.xml file.

Now open your header.phtml template file located here: /app/design/frontend/[your package]/[your package]/template/page/html/header.phtml

And add this where you want to header cart to sit:

< ?php echo $this->getChildHtml('topCart')?>

Save the header.phtml file.

Now make your top-cart.phtml file and save it here: /app/design/frontend/[your package]/[your package]/template/checkout/cart/top_cart.phtml

Mine was a fairly cut-down one, here is the contents of mine:

< ?php $_cartQty = $this->getSummaryCount(); if ($_cartQty>0) { if ($_cartQty==1) { echo $this->__('There is 1 item in your cart.', $this->getUrl('checkout/cart')); } else { echo $this->__('There are %s items in your cart.', $this->getUrl('checkout/cart'), $_cartQty); } } else { echo $this->__('You have no items in your cart.'); } ?> < ?php echo $this->__(' Subtotal:') ?> < ?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; ?>

Save the top_cart.phtml file

Upload the files and your done. It’s then just a matter of styling the elements with CSS to your liking.

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp