Using AJAX Themes with Custom Pricing

Follow

Warning!

This article requires technical knowledge and prior experience with JavaScript and AJAX. If you are not comfortable with this, please Request a Custom Pricing Installation.

Overview

Shopify themes that use AJAX for certain features don't automatically function correctly with Custom Pricing. This is because they update the cart information dynamically without reloading the page. When this happens, the changes that Custom Pricing has made to the cart are erased.

To correct this, it is necessary to re-trigger Custom Pricing to complete its changes after the AJAX cart has reloaded.

Note: If you have already completed the Using AJAX Themes with Product Options installation on your current theme, you don't need to proceed with this guide.

To fix Custom Pricing to work with AJAX themes, please follow these steps:

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

    Select the Online Store option from the left side of your Shopify admin

  2. Select Actions.

    Select the Actions button beside your theme name

  3. Select Edit code.

    Select Edit Code from the drop down menu

  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.

    Under Assets, select theme.js from the list of file names

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

    Find refreshCart or buildCart from within this file

  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 the above snippet of code below the opening of the function that draws the cart

  7. Scroll down to the end of the function.

    Scroll down 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 the above snippet of code directly underneath the end of this function

  9. Select Save.

    Select Save in the top right corner of the code editor

Next Steps:

  • Your storefront product pricing and cart functions should be tested to ensure that they're working correctly after performing this update. Visit Verify Your Custom Pricing Install (Steps 6-10) for more information on how and where to verify your price discounts. Please note that the related tags and customer accounts should be used instead of our Bold test account when verifying your customers' discounts.

Helpful Links:

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.