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(
            '
' +
              json['error']['warning'] +
              '
'
          );
        }
      }
      if (json['success']) {
        $('#notification').html(
          '
' +
            json['success'] +
            '
'
        );
        $('.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(
    ''
  );
  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:

- REPLACE WITH:

For Opencart 3