Using Ajax Themes with Product Options

Follow

Warning!

This article only applies to Product Options 2.0. It requires technical knowledge and prior experience with JavaScript and Ajax. If you are not comfortable with this, please Request an Ajax Install.

Shopify themes that use Ajax for certain features don't automatically function correctly with Product Options 2.0 because they update the cart dynamically without reloading the page. When this happens the changes that 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.

Note: If you have completed the Ajax Themes in Custom Pricing install on your current theme, you don't need to complete these steps.

Follow these instructions to do this:

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. 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.

    select theme.js

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

    find the function that drawd the cart

  6. 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:

    add this code below

  7. Scroll down to the end of the function.

    scroll to the end of the function

  8. 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:

    add this code

  9. Select Save.

    select save

That's it!

Next Steps:

Blog Posts:

0 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.