Shoppable recipe / add to cart does not update theme cart

A customer adds an ingredient from a recipe card, the item really is in their cart, but your theme's cart icon still shows the old count and the cart drawer does not open.

This is a theme issue rather than a Recipe Kit one. Every Shopify theme handles its cart differently, and there is no universal way to tell one that its cart has changed from outside.

Recipe Kit already softens it by showing View Cart and Checkout buttons inside the recipe card, so the customer has a route forward. For a tighter integration, use the event below.

The cart event

Recipe Kit fires rk_cart_event on the document every time an item is added to, removed from, or changed in the cart from a recipe card. The updated Shopify cart comes with it.

Put this in your theme's main JavaScript file, or in the Custom JS field of the Recipe Kit app block:

document.addEventListener('rk_cart_event', function (e) {
  // e.detail.cart is the full, updated Shopify cart object
  var cart = e.detail.cart;

  // Now tell your theme about it. This part is theme specific.
  // Example, the Galleria theme exposes a global for exactly this:
  // Shopify.afterCartUpdate(cart);
}, false);

You will need to fill in the last part yourself, because what goes there depends entirely on your theme. Some themes expose a global function. Others listen for their own custom event. Others just want the cart drawer re-fetched.

Finding the right call for your theme

A few approaches, roughly in order of how likely they are to work:

Look for a documented function. Search your theme's JS for afterCartUpdate, updateCart, refreshCart or cart:updated. Many themes expose one.

Fire the theme's own event. Dawn and its derivatives listen for their own publish/subscribe events. Something like:

document.addEventListener('rk_cart_event', function () {
  document.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true }));
}, false);

Reload as a last resort. Crude but reliable:

document.addEventListener('rk_cart_event', function () {
  window.location.reload();
}, false);

Only do this if nothing else works. It throws away the customer's place on the page.

You will probably want a developer

Getting this right means knowing how your specific theme manages its cart. If you have a developer, point them at this page and they will have it done in a few minutes.

If you do not, get in touch at [email protected] with your store URL and theme name. We have written this snippet for a lot of themes and may already have yours.

The rating event

There is a second event, rk_rating_event, that fires when a customer rates a recipe. See JavaScript Event for Recipe Rating.

What's next

• Add to Cart Button - Setting up shoppable ingredients
• Linking Products to Recipes - Connecting ingredients to products