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
/* if (ajax_cart_show_popup){
//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.
<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()): ?>
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()): ?>
This comment has been removed by the author.
ReplyDeleteyou need to rewrite and extend the Mage_Checkout_CartController. and use Ajax to call you function.
ReplyDeleteHi.I want to show only the last added item image.am trying to replace appendTo function.it is blank if i remove this function.can u tell me how to show the last added item only.
ReplyDeleteHello,
ReplyDeleteif you are using magento 2, you can try to use this extension to smooth fly effect of product image, after you add product to cart:
https://marketplace.magento.com/adam-flytocart.html