/cart/addItem does not update visible cart-Item-Count

[elaspix]

I have a Javascript-component running in a html-Element within a default wooCommerce-Page that has the default navigation and basket-Item in the header of the page.

When the Javascript-component calls /cart/addItem using the storeAPI, I would like that the basket-item's counter updates so that the user can see that the product has reached the basket successfully. However, the basket keeps showing the "old" count and - using mouseover - is pretending that no product has been added. Only after a page reload the correct count is shown.

Is there a way to make wooCommerce update the shown count of products in the basket without a forced page reload and without changing the codebase of wooCommerce (e.g. adding filters etc.)

Best regards
Tobias

[opr]

Hi @elaspix, thanks for your question, I understand your cart isn't updating following a request to the store API.

I think this is expected behaviour since we wouldn't update any UI based on an API request alone, the code starting the request should use the data returned to update the UI, but with a little more information we may be able to give some pointers to figure this out anyway.

Could you confirm what you mean by:

default navigation and basket-Item

What is the basket-Item you're referring to? Is it the Mini Cart Block? Could you maybe share a screenshot if possible?

[elaspix]

Hey opr, thanks for your answer,

The basket-Item is located in the header top-right and shows a counter of products that are in the basket. This icon should update after a cart/addItem has been called (but it is not, as it is shown in "add_was_pressed_cartItemRed.jpg"). Only after a refresh of the page, the basket-item-count is updated (as it is shown in "after_manual_reload_productCounterRed.jpg").

So how do I make the basket-item-count show the updated number of products after I have added products to the basket using the storeAPI-call cart/addItem from my javascript-frontend?

I do not understand how the "code starting the request" can update the UI, I (my javascript code) has no access to the header-UI as it is the default wooCommerce header (see images).

Thanks very much for your help!
Best regards
Tobias

[senadir]

As @opr said, you should either:

• Use the mini cart block and use data stores.
• Trigger a JS event wc-blocks_added_to_cart or a jQuery event added_to_cart.
• Manipulate DOM manually.

[elaspix]

@senadir
Thanks for your response. I would have hoped to circumvent the "manipulate DOM manually"-Part as it is not very future-proof. It would be better to have API-Access to the cart to notify it for updating.
Thanks a lot
Tobias

[senadir]

The events presented above are meant for that, you would trigger them and they would cause a legacy mini cart refresh.

Newer mini cart provide much more functionality.

[elaspix]

ah ok, thank you. But this means I must use the mini cart block and cannot keep the current default wooCommerce header with cart-icon (which has all I need already, except the updating problem)?

[senadir]

Using events is the only way to get this and keep the old cart yes.

[elaspix]

I have found that an event is registered to the body-element called: updated_wc_div
If this event is called after I have added items to the cart using StoreAPI's /cart/addItem, the cart-count updates as wished.
I call this event via javascript using jQuery("body").trigger("updated_wc_div")