Categories
Core

Cart AJAX

Cart AJAX updates for WooCommerce 2.6 allow better user experience

WooCommerce 2.6 will include a new feature for the Shopping Cart: AJAX calls. This includes functionality for:

  • Updating cart quantities
  • Applying and removing coupons
  • Updating shipping options

Check out this video to see 2.5 and 2.6 side-by-side:

What does this mean for users?

The page looks exactly the same as before, so users familiar with the cart will be just fine. The main difference is in performance and no more page reloads for updates. Now, when you do any of the update operations above, instead of reloading the entire page, the cart will first show a spinner over the updating areas, then update within those areas on the page.

What does it mean for developers and designers?

Actually, other than a better user experience, very little. This update was designed with backward compatibility as a primary concern. Existing themes should work just fine still and existing server-side actions/filters as well. In fact, no server code was changed with this update. The JavaScript naturally depends on certain HTML IDs and CSS classes for selectors, so be careful if you start to use those class names elsewhere in your themes.

Where are the technical details?

The vast majority of code for this was updated in the cart.js file. Feel free to take a look there. For the Coupon update code, the API was used, but for the larger updates, the original form submit handling on the server is employed to make sure that the behavior matches the existing cart functionality as much as possible.

 

By coderkevin

Coder, tinkerer, jack-of-all-trades. Fixes his own cars, coaches a robotics team, and helps his kids with math homework.

25 replies on “Cart AJAX”

It seem a good idea to me, and I particularly appreciate the effort to maintain backward compatibility.

On the same topic, I just filed an issue about a breaking change related to shipping, which was introduced in a recent update to WC 2.6. It should be easy enough to remove it without impacting on the required functionalities.

Like

Hey,
One website uses the new AJAX and the other is not, but both of them with the same theme.
Weird no?

Like

It’s likely a theme issue. There were a couple of potential conflicts fixed for this issue in 2.6.1, which is just released. Otherwise, check your JavaScript console for theme-related errors. If there is one, it will keep further JavaScript from running.

Like

Ajax cart is not working properly . On console shows –
http://domain.com/wp-admin/admin-ajax.php 500 (Internal Server Error)

but after refresh the page, cart total has been updated with new one that was i tried to cart and showing error.

Note: The issue is comes from only the single product page . On this page i actually customizes the cart mechanism. After click the custom “add to cart” button i just find the product_id, quantity. and after that send a action to my function on functions.php for process the cart.

On this function i use something like this:
WC()->cart->add_to_cart($id, $qty, NULL, NULL, NULL);

Like

Just updated to 2.6.1. When I have a full cart and manually empty it on the cart page, the spinner animation shows and then I get a blank cart page. Just the title and wrapper divs. It doesn’t direct me to the cart-empty.php page like it used to. Any insight?

Like

This new functionality breaks the Amazon Payments extension. For example, if someone enters a coupon code, AJAX refreshes the page and the Amazon pay button disappears. If I then do a full refresh, the button reappears. If I dequeue the wc-cart script, adding a coupon refreshes the entire page and everything works as expected.

Like

Hey, I’m using WooCommerce 2.5.5 and have the exact same problem. As workaround I use the banner instead of the button: Amazon Extension Settings: “Cart login button display”.
Anyways, have you created an issue or have you found a solution yet? Thanks a lot

Like

Comments are closed.