Skip to main content

Integrate PRE with BigCommerce

Introduction​

This guide shows you how to integrate Price Rule's storefront script into your BigCommerce theme to manipulate storefront prices.

note

Theme structure can vary and some template paths may differ. This guide uses Cornerstone, a free theme provided by BigCommerce, as an example.

Prerequisites​

Before you get started, follow the Price Rules Getting Started guide to get connected to our Bold Platform.

Enable the BigCommerce cart resource​

  1. Open the BigCommerce Admin interface.
  2. Navigate to Storefront > Themes.
  3. Click the Advanced button for the theme you would like to integrate Price Rules into, then click Make a Copy to make a copy of the theme.
  4. Click the three dots in the copy of the theme you just created, then select Edit Theme Files. The Stencil File Editor window opens.
  5. Navigate to config.json from the left navigation bar.
  6. Verify that "cart": true is set inside config.json at the root of your theme, as shown in the following code snippet:
"resources": {
    "cart": true,
    "bulk_discount_rates": false,
    "shop_by_brand": {
        "limit": 10
    }
},
note

You cannot edit config.json directly from the BigCommerce browser interface. If "cart": false, in config.json, you must use Stencil CLI to edit config.json. Refer to the BigCommerce About Stencil page for more information on installing and using Stencil CLI to edit config.json.

Embed the Price Rules storefront script​

In the Edit Theme Files window, navigate to templates/layout/base.html. Insert the following script before the closing </head> tag, then save the file.

<script id="bold-platform-data" type="application/json">
  {
      "shop": {
          "domain": "store-{{{settings.store_hash}}}.mybigcommerce.com",
          "hash" : "{{{settings.store_hash}}}",
          "permanent_domain": "store-{{{settings.store_hash}}}.mybigcommerce.com"
      },
      {{#if customer}}
          "customer": {{{JSONstringify customer}}},
      {{else}}
          "customer": null,
      {{/if}}
      {{#if cart}}
          "cart": { "items": {{{JSONstringify cart.items}}}, "total_price": {{cart.sub_total.value}} },
      {{else}}
          "cart": null,
      {{/if}}
      {{#if product}}
          "product": {{{JSONstringify product}}},
      {{else}}
          "product": null,
      {{/if}}
      "collection": [
          {{#if category.products}}{{{JSONstringify category.products}}},{{/if}}
          {{#if product_results.products}}{{{JSONstringify product_results.products}}},{{/if}}
          {{#if product.related_products}}{{{JSONstringify product.related_products}}},{{/if}}
          {{#if product.similar_by_views}}{{{JSONstringify product.similar_by_views}}},{{/if}}
          {{#if products.featured}}{{{JSONstringify products.featured}}},{{/if}}
          {{#if products.new}}{{{JSONstringify products.new}}},{{/if}}
          {{#if products.top_sellers}}{{{JSONstringify products.top_sellers}}},{{/if}}
          []
      ],
      "template": "{{{template}}}"
  }
</script>

<style>
  .money[data-product-id],
  .money[data-product-handle],
  .money[data-variant-id],
  .money[data-line-index],
  .money[data-cart-total] {
    animation: moneyAnimation 0s 2s forwards;
    visibility: hidden;
  }
  @keyframes moneyAnimation {
    to {
      visibility: visible;
    }
  }
</style>
<script src="https://static.boldcommerce.com/bold-platform/sf/pr-bigcommerce.js"></script>

Update elements that contain prices​

Modify any price elements with money tags that you want Price Rules to influence. Refer to the Money Tags section of the Price Rules Attributes guide for more information about how Price Rules handles money tags.

For example, the following BigCommerce files are some common places to modify price elements with money tags:

  • templates/components/products/price.html
  • templates/components/cart/content.html
  • templates/components/cart/preview.html
  • templates/components/common/cart-preview.html

Examples of Changes​

The following examples use the Cornerstone theme.

In price.html​

Before:

<span data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>

After:

<span data-product-price-without-tax data-product-id="{{product.id}}" class="money price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>

In cart-preview.html​

Before:

<span {{#if price_discounted}} class="price--discounted"{{/if}}>{{price.formatted}}</span>
{{#if price_discounted}}
    {{price_discounted.formatted}}
{{/if}}

After:

<span {{#if price_discounted}} class="price--discounted"{{/if}}>
    <span class="money"  data-line-index="{{{@index}}}">{{price.formatted}}</span>
</span>
{{#if price_discounted}}
    <span class="money"  data-line-index="{{{@index}}}">{{price_discounted.formatted}}</span>
 {{/if}}

In content.html​

Before:

<strong class="cart-item-value {{#if total_discounted}}price--discounted{{/if}}">{{total.formatted}}</strong>
{{#if total_discounted}}
<strong class="cart-item-value">{{total_discounted.formatted}}</strong>
{{/if}}

After:

<strong class="cart-item-value {{#if total_discounted}}price--discounted{{/if}}">
  <span class="money" data-line-index="{{{@index}}}" data-line-total>{{total.formatted}}</span>
</strong>
{{#if total_discounted}}
<strong class="cart-item-value">
  <span class="money" data-line-index="{{{@index}}}" data-line-total>{{total_discounted.formatted}}</span>
</strong>
{{/if}}

In totals.html​

Before:

<div class="cart-total-value">
    {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
        <span>{{cart.sub_total.formatted}}</span>
    {{else}}
        {{> components/common/login-for-pricing}}
    {{/or}}
</div>

After:

<div class="cart-total-value">
    {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
    <span class="money" data-cart-total>{{cart.sub_total.formatted}}</span>
    {{else}}
        {{> components/common/login-for-pricing}}
    {{/or}}
</div>
note

These are examples only and not a complete set of changes required. Please refer to the Money Tags section of the Price Rules Attributes guide for more information. Update your theme anywhere prices are displayed.

Insert Event Emitters​

Modify cart update functions to include the following code snippet:

window.BOLD.common.eventEmitter.emit("BOLD_CART_UPDATED", { id: cartItemId, qty: quantity });

This code snippet notifies Price Rules to force a redraw if the cart quantity has been changed without a page reload.

For the Cornerstone theme, these are the files and functions that you must modify:

  • assets/js/theme/common/product-details.js
  • assets/js/theme/cart.js

Refer to the following sections for examples of modified cart functions.

updateCartContent​

Use the updateCartContent cart function to preview the cart after adding items to the cart.

updateCartContent(modal, cartItemId, onComplete) {
    this.getCartContent(cartItemId, (err, response) => {
        if (err) {
            return;
        }

        modal.updateContent(response);

        // Update cart counter
        const $body = $('body');
        const $cartQuantity = $('[data-cart-quantity]', modal.$content);
        const $cartCounter = $('.navUser-action .cart-count');
        const quantity = $cartQuantity.data('cartQuantity') || 0;

        $cartCounter.addClass('cart-count--positive');
        $body.trigger('cart-quantity-update', quantity);
        utils.api.cart.getCart({}, (err, response) => {
            let lineItems = [];
            let cartItems = response.lineItems;
            cartItems.customItems.forEach(line => lineItems.push(line));
            cartItems.digitalItems.forEach(line => lineItems.push(line));
            cartItems.giftCertificates.forEach(line => lineItems.push(line));
            cartItems.physicalItems.forEach(line => lineItems.push(line));
            window.BOLD.common.eventEmitter.emit("BOLD_NEW_CART", {lineItems: lineItems});
        });

        if (onComplete) {
            onComplete(response);
        }
    });
}

cartUpdate​

Use the cartUpdate function for the cart page.

cartUpdate($target) {
    const itemId = $target.data('cartItemid');
    const $el = $(`#qty-${itemId}`);
    const oldQty = parseInt($el.val(), 10);
    const maxQty = parseInt($el.data('quantityMax'), 10);
    const minQty = parseInt($el.data('quantityMin'), 10);
    const minError = $el.data('quantityMinError');
    const maxError = $el.data('quantityMaxError');
    const newQty = $target.data('action') === 'inc' ? oldQty + 1 : oldQty - 1;

    window.BOLD.common.eventEmitter.emit("BOLD_CART_UPDATED", {id: itemId, qty: newQty});

    // Does not quality for min/max quantity
    if (newQty < minQty) {
        return swal.fire({
            text: minError,
            icon: 'error',
        });
    } else if (maxQty > 0 && newQty > maxQty) {
        return swal.fire({
            text: maxError,
            icon: 'error',
        });
    }

    this.$overlay.show();

    utils.api.cart.itemUpdate(itemId, newQty, (err, response) => {
        this.$overlay.hide();

        if (response.data.status === 'succeed') {
            // if the quantity is changed "1" from "0", we have to remove the row.
            const remove = (newQty === 0);

            this.refreshContent(remove);
        } else {
            $el.val(oldQty);
            swal.fire({
                text: response.data.errors.join('\n'),
                icon: 'error',
            });
        }
    });
}

Verify the Install​

You’re done! Verify that things are working with our debugging tools.