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 of the products added to the cart and now we are going to learn how to display it by hovering over the block.
In the following screenshot, we can see the final result that we want:
1. Customizing the topcart.phtml file
First, let’s customize the structure of the cart block content a little in the following manner:
<div class=”block-content”>
<?php $_items = $this->getRecentItems() ?>
<?php if(count($_items)): ?>
<p class=”block-subtitle”><?php echo $this-> (‘Recently added item(s)’) ?></p>
<ol id=”cart-sidebar” class=”mini-products-list”>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ol>
<script type=”text/javascript”>decorateList(‘cart-sidebar’, ‘none-recursive’)</script>
<?php endif ?>
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<div class=”actions”>
<?php echo $this->getChildHtml(‘extra_actions’) ?>
<button type=”button” title=”<?php echo $this-> (‘Checkout’)
?>” class=”btn btn-block btn-success” onclick= “setLocation(‘<?php echo $this->getCheckoutUrl() ?>’)”><?php echo $this-> (‘Checkout’) ?></button>
</div>
<?php endif ?>
</div>
2. Customizing the CSS of the cart
Now, let’s customize the CSS with the CSS transition, and that will do the cart content animation, First, we have to customize the CSS of the block content in the following manner:
#header .block-topcart .block-content {
background:none repeat scroll 0 0 #FFF;
border-top:3px solid #FA9221;
box-shadow:0 0 3px rgba(0,0,0,0.28); padding:15px;
position:absolute; width:100%;
z-index:0; transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s; opacity:0;
top:105px; visibility:hidden;
}
As you can see in the preceding code, we added the following transitions property to animate all the styles:
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
Note: I used all as the transition property value. Using this as the value, all the properties that change on hovering will have the transition effect.
Now, in the hover status, change the CSS property. In this case, we want to change the top, opacity, z-index, and visibility properties:
#header .block-topcart:hover .block-content {
opacity:1;
top:65px;
z-index:999;
visibility:visible;
}
3. Styling the cart’s content with CSS
Now the CSS is complete, and you should see the animation when you hover the cursor over the block cart. Now, let’s customize the block cart content a little with the following CSS code:
#header .block-topcart .block-subtitle {
}
#header .block-topcart ol {
list-style-type:none;
padding:0;
overflow:hidden;
}
#header .block-topcart ol li {
width:100%;
float:left;
clear:both;
position:relative;
margin-bottom:10px;
}
#header .block-topcart ol li a.product-image {
display:block;
float:left;
width:25%;
}
#header .block-topcart ol li .product-details {
float:left;
width:65%;
}
#header .block-topcart .product-details .product-name {
margin:0;
}
#header .block-topcart .product-details .product-name a {
font-weight:700;
font-size:12px;
}
#header .block-topcart a.btn-edit,#header .block-topcart a.btn-remove
{
position:absolute; right:0;
top:0; display:block;
text-indent:-99999px; height:15px; width:15px;
}
#header .block-topcart a.btn-edit {
background:url(../images/btn_edit.gif) no-repeat center center;
}
#header .block-topcart a.btn-remove {
background:url(../images/btn_gm-close.gif) no-repeat center center;
top:20px;
}
#header .block-topcart ol li .product-details {
}
#header .block-topcart .actions {
clear:both;
}
Please refer to the code bundle included with this book for the full CSS.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.