Sunday, 15 April 2012

Implementing Fly Cart In Magento

1. Download the j2t-ajax-cart
http://www.magentocommerce.com/magento-connect/j2t-ajax-cart-lite.html
2. Download the jquery library don't forget to add
     var $j = jQuery.noConflict();  to avoid the conflict between js.
    in my case I dowloaded the js in js/jquery/jquery-1.3.2.min.js
3. Add your js to page.xml
              <block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>jquery/jquery-            1.3.2.min.js</script></action>

4. skin/frontend/default/default/js/j2t/ajax_cart.js
  replace onComplete: function (xhr) with the following line of code
onComplete: function (xhr)
            {
                /**********************************************/

var pr_id = url.substring(url.indexOf('/product/')+9,url.lastIndexOf("/"));

var pr_x = $j("#prid_"+pr_id).offset().left;
var pr_y = $j("#prid_"+pr_id).offset().top;




var cart_X = $j(".block-cart").offset().left;
var cart_Y = $j(".block-cart").offset().top;

var gotoX = cart_X - pr_x;
var gotoY = cart_Y - pr_y;

var newImageWidth = $j("#prid_"+pr_id).width() / 3;
var newImageHeight = $j("#prid_"+pr_id).height() / 3;

$j("#prid_"+pr_id).find('.aishimg')
.clone()
.prependTo("#prid_"+pr_id)
.css({'position' : 'absolute'})
.animate({opacity: 0.6}, 100)
.animate({opacity: 0.6, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, '', function() {
$j(this).remove();
});

/**********************************************/
5.  After this line of code replaceDelUrls(); comment out these code
             /*   if (ajax_cart_show_popup){
                    showConfirm();
                } else {
                    hideJ2tOverlay();
                }*/
6.function sendcart(url, type){
    //showLoading();
  comment out the showLoding as well.
7. Go the template/catalog/product/list.phtml

Go to the
<?php // Grid Mode ?>
add these two line as I shown in below code.

1.  id = '<?php echo "prid_".$_product->getId(); ?>'
2. img class = "aishimg"

 <li id = '<?php echo "prid_".$_product->getId(); ?>' class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img class = "aishimg" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>