Post by aturbide » Sat Jun 11, 2011 10:38 pm

I kinda like the add to cart animation in the product page that shows the animated product image going into the cart but noticed that in modules or category lists, the same animation is not there, instead replaced by a message at the top of the page. With the new scroll to top feature added in 1.5.3, this works ok but I find it's nice to have the choice of also having the image animation for all add to carts. To accomplish this, a simple change to the templates and one other change in the common.js file will do it.

First, in all templates that have a thumb image and access the addtocart() function, we modify the product image line to add an ID tag that uses the product_id as it's name.

Code: Select all

 <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" [color=#BF0000]id="img_<?php echo $product['product_id'];?>"[/color]/></a></div>
Then in the common.js file we add this snippet of code at the end of the json['success'] section of the addtocart
function we add:

Code: Select all

  
      
           var image = $('#img_'+product_id).offset();
         if (image) {
        var cart = $('#cart').offset();
         $('<img src="' + $('#img_'+product_id).attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />').appendTo('body');
          params = {
          top : cart.top + 'px',
          left : cart.left + 'px',
          opacity : 0.2,
          width :$('#img_'+product_id).width(),
          height : $('#img_'+product_id).height()
        };
       // uncomment line below if you also want to scroll up 
          //	$('html, body').animate({ scrollTop: 0 }, 'slow'); 

        $('#temp').animate(params,image.top-cart.top + 200 ,false, function () {
          $('#temp').remove();
        

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

Newbie

Posts

Joined
Fri Jun 03, 2011 12:15 am

Post by fsit » Wed Aug 03, 2011 3:30 am

Hmm I am probably doing something wrong. Is it possible for you to post the whole common.js?
I am on 1.5.0.5.

New member

Posts

Joined
Mon Jul 25, 2011 12:44 am

Post by Keeboudi » Thu Dec 15, 2011 2:10 am

I managed to get it working in V1.5.1.3 but there is a typo in the code. Remove the and [/color ] tags as they must have crept in there by mistake so it looks like this:

Code: Select all

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" id="img_<?php echo $product['product_id'];?>" /></a></div>
Also, in order for it to work in the product page, I had to edit product.tpl as there is some javascript that needs tweaking around line 360 like this:

Code: Select all

               var image = $('#image').offset();
             if (image) {
            var cart = $('#cart').offset();
             $('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />').appendTo('body');
              params = {
              top : cart.top + 'px',
              left : cart.left + 'px',
              opacity : 0.2,
              width :$('#image').width(),
              height : $('#image').height()
            };
           // uncomment line below if you also want to scroll up
              //   $('html, body').animate({ scrollTop: 0 }, 'slow');

            $('#temp').animate(params,image.top-cart.top + 200 ,false, function () {
              $('#temp').remove();
           

            });
        }  else
				
				$('html, body').animate({ scrollTop: 0 }, 'slow');
For this page, I also set the image dimensions above to 90px as otherwise the large image tries to fly into the cart and smaller looks better. Like this:

Change:

Code: Select all

top : cart.top + 'px',
left : cart.left + 'px',
to

Code: Select all

top : '90px',
 left :  '90px',
Last edited by Keeboudi on Thu Dec 15, 2011 2:36 am, edited 2 times in total.

Newbie

Posts

Joined
Mon Jul 11, 2011 12:23 am

Post by Keeboudi » Thu Dec 15, 2011 2:30 am

Also found that to make it work on the product comparison page, you need to change line 27 of compare.tpl from:

Code: Select all

<img src="<?php echo $products[$product['product_id']]['thumb']; ?>" alt="<?php echo $products[$product['product_id']]['name']; ?>" />
to

Code: Select all

<img src="<?php echo $products[$product['product_id']]['thumb']; ?>" alt="<?php echo $products[$product['product_id']]['name']; ?>" id="img_<?php echo $product['product_id'];?>" />

Newbie

Posts

Joined
Mon Jul 11, 2011 12:23 am

Post by olimax » Tue Jan 24, 2012 6:57 pm

Am I missing something here
What animation?
I checked the official demo in case I had changes something but cant see anything like this
thanks

User avatar
New member

Posts

Joined
Thu Dec 22, 2011 5:08 pm
Location - Barcelona & London

Post by olimax » Tue Jan 24, 2012 7:02 pm

ah ha
Just read a few more posts and realised that the was removed in 1.5
Is it easy to reinstate?
Does anyone have the function from a previous version I could try and reinstate?
I am on 1.5.1.3

User avatar
New member

Posts

Joined
Thu Dec 22, 2011 5:08 pm
Location - Barcelona & London

Post by MrTech » Mon Feb 20, 2012 11:53 pm

This is like the 3rd feature I want to use that seems to have been 'removed' from a previous version?!? I don't get why removing features happens in the first place? Since they are implemented, shouldn't they be left behind but with added options to turn on/off as desired?

I would also like to add animation to my cart but there are so many modifications listed above I'm not sure which code to use.

Can a kind soul create a vqmod for this? Thanks!

~
Install Extensions OR OpenCart Fast Service! PayPal Accepted
I will professionally install and configure any free or purchased theme, module or extension.

Visit http://www.mrtech.ca if you need an OpenCart webmaster
~


User avatar
Active Member

Posts

Joined
Mon Jan 09, 2012 2:39 pm
Location - Canada, Eh!

Post by efishop » Wed Nov 07, 2012 10:49 pm

Hei, aturbide, it works!
No need to implement in categories and/or compare page since you cant buy all products with only one click.
I have only implemented it in product.tpl: http://efishop.ro/leagan/index.php?rout ... duct_id=30

Thanks aturbide, great work.

Newbie

Posts

Joined
Wed Nov 07, 2012 10:45 pm

Post by Brook » Wed Feb 13, 2013 10:36 am

For Opencart v1.5.2.1, Can someone please post what files and what code changes need to be made to Re-Add the Animation that appears when a customer clicks on the "Add to Cart" Button on the Product Page?

I understand that there are probably JavaScript changes and maybe some HTML/AJAX changes. Just don't understand which lines need to be changed. Thank you for your help.

Active Member

Posts

Joined
Wed Feb 24, 2010 12:15 am
Who is online

Users browsing this forum: Majestic-12 [Bot] and 7 guests