Shoppable recipe / add to cart does not update theme cart

Recipe Kit's new shoppable recipes feature is a great way to increase sales and provide a better experience for your users.

One issue you may find with the add to cart button / shoppable recipe card is that adding an ingredient to your cart may not update your Shopify theme's cart icon or cart drawer.

This is an issue due to the massive amount of Shopify themes online - each and every Shopify theme handles cart processes differently, so unfortunately there is no 'one size fits all' approach to updating the cart when a new item is added or removed.

While Recipe Kit tries to make this easier by displaying a "View Cart" and "Checkout" button to your customers within the recipe card, for some stores that may not be enough.

In this case, Recipe Kit provides a Javascript event that you can use to tie into your Shopify theme's cart function accordingly.

Please note: the code below is not the complete step to getting this to work. You will need a developer to help you to cater the code to your specific Shopify theme.

If you don't have a developer, let us know, and we can work together to get this working.

Recipe Kit's Cart Event Code

This event is emitted site-wide every time a product is added, removed, or changed from the recipe card. You can use this code to know when a customer makes a modification, and you can then update your theme's cart function accordingly.

You will likely want to place this JS code in your theme's main Javascript file, or in a custom file you have created which loads after the theme's Javascript.

  // Recipe Kit Cart Event Listener
  // - event is dispatched everytime a cart item is added/removed from the recipe card
  // - use below function to update your sidebar/ajax cart number as needed.
  document.addEventListener('rk_cart_event', function (e) {
    // cart variable includes entirety of newly updated Shopify Cart, use accordingly
    var cart = e.detail.cart;
    console.log(cart);
    // below is example of the "Galleria" theme, they have a global "Shopify" function we can call to update the cart
    Shopify.afterCartUpdate(cart);
  }, false);

Different themes will have different mechanisms to update the cart, in the above code we show how the Galleria theme provides a global afterCartUpdate function which we can send in the new cart variable into accordingly.

Give it a try and let me know :)