Environment
WooCommerce (Blocks / Interactivity API-based Add to Cart button — the data-wp-* "Add to cart" button, e.g. via a Product Collection block)
Theme: Blocksy
Also using: Stackable (page builder)
Steps to reproduce
Go to a page where products are displayed via the block-based Add to Cart button (in this case, the front page).
Click "Add to cart" on any product.
Observe the mini-cart icon/flyout in the header.
Expected behavior
The mini-cart count and contents update immediately after the item is successfully added, as they do on single product pages and category/archive pages.
Actual behavior
The item is correctly added to the cart (confirmed via the WooCommerce cart page and by refreshing), but the mini-cart in the header does not reflect the change until a full page reload.
Notes on cause
Product/category pages use WooCommerce's classic AJAX add-to-cart flow, which triggers the jQuery added_to_cart event that wc-cart-fragments.js listens for — this is what Blocksy's mini-cart relies on to refresh.
The front page's Add to Cart button uses WooCommerce Blocks' newer Interactivity API implementation instead. On success, it dispatches a native DOM event called wc-blocks_added_to_cart rather than the classic jQuery event. Blocksy's mini-cart (built against the classic wc-cart-fragments system) never hears this event, so it doesn't know to refresh.
Workaround (currently in place)
A small site-specific plugin listens for wc-blocks_added_to_cart on document.body and manually triggers wc_fragment_refresh, which forces wc-cart-fragments.js to re-fetch and re-render the mini-cart. This resolves the issue but should ideally be handled natively by the theme/mini-cart integration.
Suggested fix
Blocksy's mini-cart JS should also listen for wc-blocks_added_to_cart (and wc-blocks_removed_from_cart) alongside the legacy jQuery added_to_cart event, so it stays in sync regardless of which Add to Cart implementation (classic vs. block/Interactivity API) is used on a given page.
Environment
WooCommerce (Blocks / Interactivity API-based Add to Cart button — the data-wp-* "Add to cart" button, e.g. via a Product Collection block)
Theme: Blocksy
Also using: Stackable (page builder)
Steps to reproduce
Go to a page where products are displayed via the block-based Add to Cart button (in this case, the front page).
Click "Add to cart" on any product.
Observe the mini-cart icon/flyout in the header.
Expected behavior
The mini-cart count and contents update immediately after the item is successfully added, as they do on single product pages and category/archive pages.
Actual behavior
The item is correctly added to the cart (confirmed via the WooCommerce cart page and by refreshing), but the mini-cart in the header does not reflect the change until a full page reload.
Notes on cause
Product/category pages use WooCommerce's classic AJAX add-to-cart flow, which triggers the jQuery added_to_cart event that wc-cart-fragments.js listens for — this is what Blocksy's mini-cart relies on to refresh.
The front page's Add to Cart button uses WooCommerce Blocks' newer Interactivity API implementation instead. On success, it dispatches a native DOM event called wc-blocks_added_to_cart rather than the classic jQuery event. Blocksy's mini-cart (built against the classic wc-cart-fragments system) never hears this event, so it doesn't know to refresh.
Workaround (currently in place)
A small site-specific plugin listens for wc-blocks_added_to_cart on document.body and manually triggers wc_fragment_refresh, which forces wc-cart-fragments.js to re-fetch and re-render the mini-cart. This resolves the issue but should ideally be handled natively by the theme/mini-cart integration.
Suggested fix
Blocksy's mini-cart JS should also listen for wc-blocks_added_to_cart (and wc-blocks_removed_from_cart) alongside the legacy jQuery added_to_cart event, so it stays in sync regardless of which Add to Cart implementation (classic vs. block/Interactivity API) is used on a given page.