Hey Lael
thanks for flagging this.
I replicated this on my end by generating an AI product block on Horizon and saw the same symtom: the item adds to the cart successfully (a GET /cart.js confirms it), but the cart drawer / cart icon bubble don’t refresh until a page reload.
In the block I generated on my test store, the cause was this snippet inside the handleAddToCart method:
const cartUpdateEvent = new CustomEvent('cart:updated', {
detail: { cart: data },
});
document.dispatchEvent(cartUpdateEvent);
if (window.theme && window.theme.cart) {
window.theme.cart.refresh();
}
It looks like this is occurring because Horizon doesn’t listen for cart:updated, and window.theme.cart.refresh() isn’t defined. Looking at Horizon’s assets/events.js, the cart components subscribe to cart:update (no “d” at the end) with a specific detail shape.
Replacing the above block with the following got the drawer refreshing as expected for me:
document.dispatchEvent(
new CustomEvent('cart:update', {
bubbles: true,
detail: {
data: {
itemCount: 1,
source: 'product-form-component',
},
},
})
);
Credit to @prakhar and @Benny_Chan, who confirmed this approach works on Horizon 3.0.0 in this thread which is where I picked the pattern up. It’s worth noting your generated block may differ slightly from mine, so check that your event dispatch lines up with what’s above.
I’ll also flag this internally, since AI-generated blocks emitting the legacy event name on Horizon is something the generator should probably be catching to avoid this issue from occurring.
For your second block (the one that redirects to the product page), I wasn’t able to replicate in my testing. If you want to share that block’s code as well as the specific prompt you used, I’m happy to take a look.
Let me know if you have any other questions and I hope this helps!