Assuming you are using the cart module, otherwise you will need to change #module_cart to #cart

EDIT: /catalog/view/theme/default/template/product/product.tpl
– FIND:

$('html, body').animate({ scrollTop: 0 }, 'slow');

– ADD ABOVE:

animateProduct( $("#image") , $("#module_cart") ); 

– Edit: /catalog/view/javascript/common.js
– ADD inside the $(document).read

/* AddToCart */
$('.addToCart').click(function() {
var tis = $(this);
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: 'product_id=' + tis.attr("data-id"),
dataType: 'json',
content: this,
success: $.proxy(function(json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json[‘redirect’]) {
location = json[‘redirect’];
}if (json[‘error’]) {
if (json[‘error’][‘warning’]) {
$(‘#notification’).html(‘<div style=”display: none;”>’ + json[‘error’][‘warning’] + ‘<img src=”catalog/view/theme/default/image/close.png” alt=”” /></div>’);
}
}if (json[‘success’]) {
$(‘#notification’).html(‘<div style=”display: none;”>’ + json[‘success’] + ‘<img src=”catalog/view/theme/default/image/close.png” alt=”” /></div>’);$(‘.attention’).fadeIn(‘slow’);

$(‘#cart_total’).html(json[‘total’]);
$(‘#module_cart .cart-module’).html(json[‘output’]);

animateProduct(tis.parents().eq(2).find(“.image img”) , $(“#module_cart”));

$(‘html, body’).animate({ scrollTop: 0 }, ‘slow’);
}
}, this)
});

});

– ADD to bottom:

function animateProduct(image,cart){image.before(‘<img src=”‘ + image.attr(‘src’) + ‘” id=”temp” style=”position: absolute; top: ‘ + image.top + ‘px; left: ‘ + image.left + ‘px;” />’);var cart_offset  = cart.offset();params = {
top : cart_offset.top + ‘px’,
left : cart_offset.left + ‘px’,
opacity : 0.0,
width : cart.width(),
height : cart.height()
};$(‘#temp’).animate(params, ‘slow’, false, function () {
$(‘#temp’).remove();
});
}

I moved majority of the code to the common.js in the hope that this will be updated less than the product.tpl

– Seen as we are now using a function and not inline JS to animate the image, we can reuse this throughout the website. So I though why not show you how this could work with HTML5 data attribute and eventually this might be updated in the core.

– EDIT: /catalog/view/theme/default/template/product/category.tpl
– FIND:

<div><a onclick="addToCart('<?php echo $product['product_id']; ?>');"><span><?php echo $button_cart; ?></span></a></div>

– REPLACE WITH:

<div><a data-id="<?php echo $product['product_id']; ?>"><span><?php echo $button_cart; ?></span></a></div>

2 COMMENTS

  1. hi, thanks for the post… which cart module are u referreying to?? where do I get it?

    I tried to replace as u said to #cart but nothing happens..

    Thanks in advance…

LEAVE A REPLY

Please enter your comment!
Please enter your name here