Overview

Shopify themes that use AJAX for don't function correctly with Product Options 2.0.

With AJAX, the cart updates dynamically without reloading the page, and when this happens, the changes that Product Options 2.0 has made to the cart are erased. To correct this, it is necessary to trigger Options 2.0 to redo its changes after the AJAX cart reload has completed.

Setup

1. From the Shopify admin, select Online Store, then Actions > Edit code.
2. Under Assets, select theme.js.

   Note: If this file doesn’t exist, your main JavaScript file may be named: app.js, ajaxify.js, the same name as your theme, or something similar.

   

3. Look for the function that draws the cart, like refreshCart or buildCart.

   

4. Add this code immediately after the opening of the function:

   if(window.BOLD && BOLD.common && BOLD.common.cartDoctor && typeof BOLD.common.cartDoctor.fix === 'function'){
       cart = BOLD.common.cartDoctor.fix(cart);
   }

   It should look like this:

   

5. Scroll down to the end of the function.

   

6. Add this code right at end of the function before the close:

   if(window.BOLD && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function'){
     BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded', cart);
   }

   It should look like this:

   

7. Select Save.