Display slide cart on mousehover of shopping cart image in right sidebar using prototype in Magento

First add following code in page/html/header.phtml

<div class=”ma-easycart” style=”right: 0px; top: 200px; display: none;” id=”cart_item1″>
<?php echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/sidebar.phtml’)->toHtml(); ?>
</div>

<div class=”ma-easysidebar” style=”right: 0px; background-position: 100% 0px; top: 200px; display: block;” id=”cart_icon_area”></div>
<script type=”text/javascript”>
//<![CDATA[
$(“cart_icon_area”).observe(‘mouseover’, function() {
$(‘cart_item1’).setStyle({ display: ‘block’ });
$(this).setStyle({ display: ‘none’ });
});

$(“cart_icon_area”).observe(‘mouseout’, function() {
$(‘cart_item1’).setStyle({ display: ‘none’ });
$(this).setStyle({ display: ‘block’ });
});

$(“cart_item1”).observe(‘mouseover’, function() {
$(this).setStyle({ display: ‘block’ });
$(‘cart_icon_area’).setStyle({ display: ‘none’ });
});
$(“cart_item1”).observe(‘mouseout’, function() {
$(this).setStyle({ display: ‘none’ });
$(‘cart_icon_area’).setStyle({ display: ‘block’ });
});

//]]>
</script>

Now add following css code into ma-easycart.css  which is created in skin\frontend\default\default\css path.

.ma-easycart {
    display: none;
    min-height: 120px;
    position: fixed;
    width: 200px;
}
.ma-easysidebar {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/mamycart.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 120px;
    position: fixed;
    width: 28px;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-easycart.css</stylesheet></action>

Now copy following images into skin\frontend\default\default\images path. 

mamycart

Thats it…!!!

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: