Update a server-side render Block when woocommerce cart block changed

Question

I am currently developing a small block for WordPress/WooCommerce and now I have a problem that I can't solve easily.

To summarize:
I am looking for a way to update my block in the frontend when changes have been made in the cart block (e.g. the user increases the number of a product in the shopping cart).

My block is currently set up as a server-side render block and the corresponding markup is generated by PHP via render_callback and then output.

Is there a way to update the block in the frontend after an event from the cart block? And if not, what methods would there be to reach the target?

Thanks in advance.

Cheers 🍺

Answer 1

Something like this should work:

const {select, subscribe} = window.wp.data; const cartStoreKey = window.wc.wcBlocksData.CART_STORE_KEY; const unsub = subscribe( onCartChange, cartStoreKey ); function onCartChange() { const cart = select( cartStoreKey ).getCartData(); console.log( '¡ cart change !', cart ); } 

The block’s frontend script should have the woocommerce script’s handle as a dependency so the window.wc.wcBlocksData will be defined by the time the block’s script executes. According to the WC store docs the handle is wc-blocks-data-store.

In case you haven’t seen it you might want to check out the Interactivity API if the updates you want to make to the markup are non-trivial.