Make a selection

Using AJAX Themes with Custom Pricing

Laurel
Laurel
  • Updated

Shopify themes that use AJAX for certain features does not automatically function correctly with Custom Pricing. This is because themes that use AJAX 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: 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.

 

 

Setup

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

  1. From Shopify's admin, select Online Store.
  2. Select ....
  3. Select 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.

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

    Locate function

  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:

    Paste the code

  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:

    Paste the code at the end of the function

  9. Select Save.