Add to Cart button not working

Short description of issue

Add to Cart button not working on Horizon theme for Ai generated product section block.

Link to Shopify Store

Reproduction steps

I created an Ai generated section block for one of my product pages on my Horizon theme that would allow customers to add additional related items to their cart, but when the customer clicks the ‘add to cart’ button, although the item is added to the cart, it does not reflect unless you refresh the page or navigate to a new page.

Additional info

I have another Ai generated section for another product page that when you click ‘add to cart’ it just goes to the product page. Anyone else experience this or know a fix?

What type of topic is this

Troubleshooting

Upload screenshot(s) of issue

Hey Lael :waving_hand: 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!

Hi @Lael_Mitchell

Please don’t copy and paste code/ AI content without context. If you’re not a Shopify developer, I’d recommend posting on the merchant forums here: https://community.shopify.com/

or contact support directly with your question.

There is context. The person I was having an exchange with asked me to post it and knows exactly why I posted it and the context to interpret it in. Thanks