Animate adding product image to cart
Posted: Fri Jun 17, 2011 9:18 pm
I have had a few emails already about the latest Opencart release without the add to cart animating the product. So here is how to manually add it back.
Assuming you are using the cart module, otherwise you will need to change #module_cart to #cart
DEMO: http://demo.opencart-templates.co.uk/de ... od_classic
- EDIT: /catalog/view/theme/default/template/product/product.tpl
- FIND:
- ADD ABOVE:
- Edit: /catalog/view/javascript/common.js
- ADD inside the $(document).read
- ADD to bottom:
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:
- REPLACE WITH:
Assuming you are using the cart module, otherwise you will need to change #module_cart to #cart
DEMO: http://demo.opencart-templates.co.uk/de ... od_classic
- EDIT: /catalog/view/theme/default/template/product/product.tpl
- FIND:
Code: Select all
$('html, body').animate({ scrollTop: 0 }, 'slow'); Code: Select all
animateProduct( $("#image") , $("#module_cart") ); - ADD inside the $(document).read
Code: Select all
/* 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 class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
}
}
if (json['success']) {
$('#notification').html('<div class="attention" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></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)
});
});
Code: Select all
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();
});
}
- 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:
Code: Select all
<div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a></div>Code: Select all
<div class="cart"><a data-id="<?php echo $product['product_id']; ?>" class="button addToCart"><span><?php echo $button_cart; ?></span></a></div>