Jump to content

Add to cart animation in 1.6

moneeeka

By moneeeka
in OUT - 1.6.0.11 [7 Jan 2015]

 Share

Recommended Posts

  • 2 weeks later...
nortonlgn Newbie

nortonlgn

Posted
Posted

The add to cart animation was a great feature, as it provided a visual of the product being added to the cart, and it also showed the user where the cart button was, when they added their first product.  We just went from an in house shopping cart system, and we choose Prestashop.  We decided to go with 1.6 because, I figured we start with the latest and greatest. 

 

I can see on small screens, the animation may get lost, so it would be nice to offer the inline frame on devices with a smaller real estate.  I didn't expect the developers to kill and existing feature in 1.6

 

I image somebody will develop an add-on, that will bring back the animation, however I suspect that the add-on will need to change the core files.

 

The better solution, is to get the developers, to add this feature back, as an option, and maybe allow the option to be enabled by device type (smartphone, tablet, desktop).

 

How does one canvass the developers to but a feature back into prestashop?

  • Like 3
Link to comment
Share on other sites
  • 4 weeks later...
Petter B Newbie

Petter B

Posted
Posted

Edit => Ajax-cart.js => Animation effect on 1.6 version 

 

 

Location : theme / default-bootstrap / js / modules / blockcart / Ajax-cart.js (copy this txt file)

wow, is the cart animation added? Thanks! :)

Is it safe to use?

Link to comment
Share on other sites
  • 3 weeks later...
Drage-Birger Newbie

Drage-Birger

Posted
Posted

yes......................it's safe.................even it work on zqzoom to...............  !! 

 

Hey,

 

I did exactly as you have written, but it did not work for me? :( 

 

- Also i checked to make sure that the AJAX-cart module was activated and de-activated.. Both times it did not work?

 

 

Drage

Link to comment
Share on other sites
rtvt Newbie

rtvt

Posted
Posted

Edit => Ajax-cart.js => Animation effect on 1.6 version 

 

 

Location : theme / default-bootstrap / js / modules / blockcart / Ajax-cart.js (copy this txt file)

 

Great solution! But it`works only on product page. In category or home - it doesn`t show the animation.

 

Tested on default-bootstrap theme. Prestashop 1.6.0.8

 

I think there some problem with getting image to animate.

 

                var pr_id='.pr_'+idProduct;

                if(addedFromProductPage){

                    if (!$element.length) $element = $('#bigpic,.zoomPad img:first');

                }

                else{$element = $(pr_id);}

 

Something wrong with element detect when not addedFromProductPage

Link to comment
Share on other sites
Funny-Cat WebShop Newbie

Funny-Cat WebShop

Posted
Posted (edited)

Edit => Ajax-cart.js => Animation effect on 1.6 version 

 

 

Location : theme / default-bootstrap / js / modules / blockcart / Ajax-cart.js (copy this txt file)

Dear Kapil Gautam I am using your modified ajax-cart.js at the moment and I noticed a small bug.

 

When a customer tries to add to the cart a product in an amount that is more then what it is available it still does the animation and it shouldn't as its misleading.

 

Example: you have only 10 units of the product "Potato" and the customer tries to add 11, (sets the Quantity to 11 and then Clicks on "add to cart"). The product is not added to the cart, which is correct since its not available on that Quantity, but it still does the animation (and in my view it should't do it since its misleading).

 

Other then that, really nice work. Thank you for that very helpful removal of the nagging "popup".

Edited by funny-cat_webshop (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
  • Popular Post
wildrow Newbie

wildrow

Posted
  • Popular Post
Posted (edited)

So, I got Kapil Gautam's solution to work with our theme derived from default-bootstrap 1.6

The problem was indeed, as RoyVelvet pointed out, that the images in category lists do not have a class of the form .pr_...

 

so I replaced

else{$element = $(pr_id);}

by

else $element = $(callerElement).parent().parent().parent().parent().find('.product-image-container img');

---

Or, to start with Kapil Gautam's attached file ajax-car.txt in post #10:

Just replace lines 320-325

var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img');
var pr_id='.pr_'+idProduct;
if(addedFromProductPage){
   if (!$element.length) $element = $('#bigpic,.zoomPad img:first');
}
else{$element =$(pr_id);}

with

var $element;                                        
if(addedFromProductPage) $element = $('#bigpic,.zoomPad img:first');
else $element = $(callerElement).parent().parent().parent().parent().find('.product-image-container img');

I left out the .pr_ reference that I didn't find in the template - hopefully this isn't messing up other things, though.

The point here is to find an image relative to the clicked add-button (callerElement) because there are lots of images for other products on product list pages.

 

Also, I disabled line 335/336, because I didn't like the scrolling to the top every time I added a product to the card. (Our lists are more compact than the default-bootstrap category lists anyway)

if(!addedFromProductPage){
//   $('html, body').animate({scrollTop : 0},500);

ajax-cart.js.txt

Edited by wildrow (see edit history)
  • Like 15
Link to comment
Share on other sites
  • 2 weeks later...
NBBO Newbie

NBBO

Posted
Posted

I tried this fix on a fresh install of 1.6.0.8, but it did not work. Actually it destroyed more than it fixed, since my add to cart buttons now only works on product pages and without animation or popup. A click on the add to cart button on the front or category-page means nothing happening, at least with ajax-cart turned on. My console is giving me these errors, but i am not sure what's wrong:

 

  1. Uncaught ReferenceError: baseUri is not defined ajax-cart.js:307
    1. ajaxCart.addajax-cart.js:307
    2. (anonymous function)ajax-cart.js:133
    3. n.event.dispatchjquery-1.11.0.min.js:3
    4. r.handle
Link to comment
Share on other sites
wildrow Newbie

wildrow

Posted
Posted (edited)

Not sure about your error messages, but one needs to set $element to whatever the picture element is that needs to be animated on the page.

 

That is different for different types of pages. I don't have products on the front page, so probably, you have specific blocks for promotions etc. that come with their own image elements. One would have to take into account of all their template .tpl files (or use like F12 in a browser) and see how the image elements are named or situated.

 

I will eventually have to fix all that in our own template, but I won't get there before some time, and I don't use the blocks that you have on your front page....

 

In the meantime, you could also try to convince Prestashop to bring the animation to the cart back, the pop-up is nagging, indeed.

Edited by wildrow (see edit history)
Link to comment
Share on other sites
  • 4 weeks later...
  • 3 weeks later...
wildrow Newbie

wildrow

Posted
Posted

@kamaaina, your ajax-cart.js is loaded from  [EDITED]

check in your browser if it contains your changes. If not, it is either some sort of cache problem or the changes never went to the server (check in FTP, e.g. FTP user has no write access to files owned by apache webserver...)

Link to comment
Share on other sites
  • 1 month later...
Stefand Newbie

Stefand

Posted
Posted (edited)

It works great. But I have 1 question / suggestion:

 

After the product "fly" to the cart, is it possible to let the blockcart stay expanded (like the big e-commerce stores like Zalando).

 

So when I hover on the blockcart in the header, it expands.

But is it possible to let it expand, after the product flies to the cart?

Edited by Stefand (see edit history)
Link to comment
Share on other sites
rudy5 Newbie

rudy5

Posted
Posted (edited)

many thanks.

 

it happens a curious thing..it works on localhost when i first tried it but if i upload the file via ftp to the server version it doesn't work.. just the regular add to cart without animation (i already disabled the pop up window)

 

edit: i needed to activate ajax cart. thanks again;)

Edited by rudy5 (see edit history)
  • Like 1
Link to comment
Share on other sites
Lionheartmatrix Newbie

Lionheartmatrix

Posted
Posted (edited)

Hi guys.

 

I managed to get it to work with default theme.

Now I work with Optima Multipurpose Responsive theme and it doesn't work anymore. It uses ajax cart, but it is modified.

Can somebody post exactly, what are the changes in Kapil's ajax-cart.js compared to the original one? Maybe I can modify optimas ajax-cart.js then.

 

Any advice most welcomed.

 

Thanks and best regards

Edited by Lionheartmatrix (see edit history)
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...