O'Reilly logo

Mastering Magento Theme Design by Andrea Saccà

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Creating an animated cart in the header

The following ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required