Update mini-cart after ajax add to cart

  • newvibe

    (@newvibe)


    4 years, 6 months ago

    Hello!
    Based on some user input, I want to add additional items to the cart after someone has selected and added a given item, which they do by pushing the ADD TO CART button. I have ajax add to cart enabled.

    After the user adds the item, my script reads the cart ID from the cookie and uses the API to add items to the cart. This works great.

    Problem: the mini-cart does not update in response and I’m showing the user the mini-cart after they add the items, so it looks like they haven’t been added. I can re-run all the plugin javascript, but that creates another problem in certain scenarios.

    Is there any way for me to trigger the mini-cart to update?
    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Heather Barr

    (@hnbarr)

    4 years, 5 months ago

    Hi @newvibe,
    It seems like you have it working for the most part, just needing the mini cart to update, so I think that you can use an ajax event for this! I’d consider triggering another function to update the mini cart’s cart-data once the user adds a product to cart.

    However, if this doesn’t work or if you have additional BC4WP questions down the road with your development, I’d love to point you to the BigCommerce Community. Here you can post questions to more active members using BC4WP! You can also contact our Tech Support team directly here, if you need one-on-one assistance with the plugin.

    • This reply was modified 4 years, 5 months ago by Heather Barr.
    Thread Starter newvibe

    (@newvibe)

    4 years, 5 months ago

    Hi Heather,
    Thanks for the response. At this point, an ajax call has already been used to update the cart data. The mini-cart has already loaded using the cart data from before this ajax call, so it doesn’t reflect the changes in the cart.

    If you think about it, the functionality of reloading the mini-cart already exists in the plugin. After all, when I first load a page and I have items in my cart, the mini-cart is loaded with that data. Then, when I push an add to cart button and I have ajax add to cart enabled, the mini-cart reloads using the new cart data so that it reflects the addition of the new item.

    I thought this might have been happening in response to the “bigcommerce/ajax_cart_update” event, but when I trigger this event, it doesn’t cause the mini-cart to reload. This must mean that the reloading of the mini-cart if tied directly to the ajax add to cart function. It would probably be fairly easy to create a new event in the plugin, and tie the mini-cart reload to that event. This would create a way to trigger the reloading of the mini-cart. Any chance someone could look at this?

    Thanks!

    Plugin Support Heather Barr

    (@hnbarr)

    4 years, 4 months ago

    Hi @newvibe, sorry for the delay here. The bigcommerce/ajax_cart_update should be updating the cart. You could try to emulate that to see about triggering it again?

    Here is the event: https://github.com/bigcommerce/bigcommerce-for-wordpress/blob/5775b450eafc53de035a078a1bc08ef37fb0d8b8/assets/js/src/public/cart/mini-cart-nav.js#L140

    and here is the trigger function: https://github.com/bigcommerce/bigcommerce-for-wordpress/blob/master/assets/js/src/utils/events.js#L32

    so something like

    cartEvent = new CustomEvent('bigcommerce/ajax_cart_update');
document.dispatchEvent(cartEvent, { detail: { miniCartID: bigcommerce_config.cart.getCartID() } })

    might work.

    Thread Starter newvibe

    (@newvibe)

    4 years, 4 months ago

    Thanks a lot! We worked around this issue before, but I may have a need for this later and will give it a shot!

    Plugin Support Heather Barr

    (@hnbarr)

    4 years, 4 months ago

    Oh nice, @newvibe, sounds good! If you do try this later, let me know how that worked out for you all! *If you don’t mind sharing 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Update mini-cart after ajax add to cart’ is closed to new replies.