Creating an animated cart in the header

Let's start from the idea that we want to show the cart content only on hovering the top cart div, combining a fade-in effect with a slide-up transition.

In the Chapter 2, Creating a Responsive Magento Theme with Bootstrap 3, we created a new cart block whose file topcart.phtml is located in app/design/frontend/bookstore/default/template/checkout/cart/.

The file shows a recap of what we placed in the cart in our header. As you can see in the following screenshot, the default status displays no items and when a user adds a product to the cart, it will display the items count along with the total price:

The following code shows the basic file structure of topcart.phtml:

<div class="block block-cart">
  <div class="block-title"></div>
  <div class="block-content"></div>
</div>

The block-title attribute is displayed by default and the block-content attribute is hidden.

The block-content attribute already contains the details...