Animation fly image to the cart functionality in opencart 1.4, opencart 2

This opencart guide is to show how to add a fly animation of the image while adding to the cart functionality like in opencart 1.4.

For Opencart 1.4+ and Opencart 2

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();
  });
}

We moved the 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>

For Opencart 3