Cart AJAX

coderkevin Avatar
coderkevin

•

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.

 

Keep yourself in the loop!

This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form

25 responses to “Cart AJAX”

  1. diego.zanella Avatar
    diego.zanella

    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.

    Reply
  2. Seb Avatar
    Seb

    Nice 🙂

    Reply
  3. Pixelstores (@Pixelstores) Avatar
    Pixelstores (@Pixelstores)

    Look forward to this. Nice work.

    Reply
  4. Weekly Roundup: April 22, 2016 – Sell with WP

    […] WooCommerce 2.6 is getting close to beta testing, and it adds some cool new things like a tabbed account area and ajax cart updates. […]

    Reply
  5. Say hello to WooCommerce 2.6 “Zipping Zebra” – Develop WC

    […] Read more about the AJAX cart here. […]

    Reply
  6. Artem Avatar
    Artem

    Hi, it looks nice, but unfinished – there is still a little step to make.
    Why do not put AJAX updating Price and Totals when you are changing a quantity?

    Reply
    1. coderkevin Avatar
      coderkevin

      Hello, the totals should be updating when you update quantities as well as applying and removing coupons. If you feel there’s an issue, you can post here: https://wordpress.org/support/plugin/woocommerce (make sure to read the posts at the top about gathering information)

      Reply
  7. Tal Elmishali Avatar
    Tal Elmishali

    The Ajax is not working, one website it is working and the other is not.

    Reply
    1. coderkevin Avatar
      coderkevin

      There’s a known issue with certain themes which add inner HTML to buttons/links on the cart page: https://github.com/woothemes/woocommerce/issues/11118

      The fix will go out in the next update shortly!

      Reply
      1. Tal Elmishali Avatar
        Tal Elmishali

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

        Reply
        1. coderkevin Avatar
          coderkevin

          See other comment I left for you.

          Reply
    2. Artem Avatar
      Artem

      There was same issue with BXslider’s jQuery library in my case. Every AJAX call went to work fine only after excluding slider’ scripts from executing sequence.

      Reply
  8. Tal Elmishali Avatar
    Tal Elmishali

    The AJAX is not working for me at the cart, why?

    Reply
    1. coderkevin Avatar
      coderkevin

      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.

      Reply
      1. roland merheb Avatar
        roland merheb

        Also problem with Ajax cart, below the error from the console
        cart.min.js?ver=2.6.1:1 Uncaught TypeError: a.parseHTML is not a function, not sure if its theme related

        Reply
        1. coderkevin Avatar
          coderkevin

          Please log this in https://wordpress.org/support/plugin/woocommerce so we can keep it with the other support issues.

          Reply
  9. Tal Elmishali Avatar
    Tal Elmishali

    The problem was W3-cache , the Minify for JS cause the problem.

    Reply
    1. coderkevin Avatar
      coderkevin

      Glad you found it. For further support, feel free to post at https://wordpress.org/support/plugin/woocommerce

      Reply
  10. Rashedul Islam Sagor Avatar
    Rashedul Islam Sagor

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

    Reply
    1. coderkevin Avatar
      coderkevin

      Please direct support questions to https://wordpress.org/support/plugin/woocommerce where we will be happy to help.

      Reply
  11. mark Avatar
    mark

    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?

    Reply
    1. coderkevin Avatar
      coderkevin

      This is likely a theme interaction or JavaScript issue. Check your JavaScript console in your browser for errors and direct any support questions to https://wordpress.org/support/plugin/woocommerce where we will be happy to help. Thanks!

      Reply
  12. Brett Atkin Avatar
    Brett Atkin

    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.

    Reply
    1. coderkevin Avatar
      coderkevin

      Thanks for the feedback. Can you create a GitHub issue for this?

      Reply
    2. Bubble Avatar
      Bubble

      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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *