Showing Customer Group Prices with Clerk.io

The setup of customer group prices consists of 2 steps:

1. Run a full sync between Clerk.io and BigCommerce.

2. Provide a price context when showing the content on the page.

1. Run a Full Sync

When running a full sync between Clerk.io and BigCommerce, Clerk.io will store the different customer group prices and price rules which are active for the shop.

These rules will be stored separately for each product and will be used when showing the product on the website. These rules will also only update when a full sync is run.

2. Provide a Price Context

When showing the product on the website, you need to provide a price context to Clerk.io. This can be done by providing the customer group ID of the current customer or by providing their email address or customer id.

The price context can either be provided in the html attributes for the anchortag of the content itself, or it can be provided as part of the Clerk(‘config’, …) call.

Here are some examples of how this code would look if provided in the anchor tag itself.

<span
  class="clerk"
  data-template="@content-1"
  data-price_context='{"customer":{"email": "support@clerk.io"}}'
></span>

<span
  class="clerk"
  data-template="@content-2"
  data-price_context='{"customer":{"id": 12345}}'
></span>

<span
  class="clerk"
  data-template="@content-3"
  data-price_context='{"qualifiers":{"customer_group_id": 0}}'
></span>

Here is an example of how this would look if provided as part of the Clerk(‘config’, …) call.

Clerk('config', {
  price_context: {
    customer: {
      email: "support@clerk.io"
    }
  }
})

The approach above can be combined with where other default values are set on page load.

Clerk('config', {
  key: 'YOUR_PUBLIC_KEY',
  language: 'english',
  price_context: {
    customer: {
      email: "support@clerk.io"
    }
  }
})

In order to dynamically inject this content you would utilize the variables made available in your stencil theme, rather than hardcoding the input to a given email address or user id.

You can find how to print the various customer variables in the theme below: Customer Object BigCommerce

Here is an example of how you could use the customer object in your theme to dynamically set the price context.

<span
  class="clerk"
  data-template="@content-1"
  data-price_context='{"customer":{"email": "{{ customer.email }}"} }'
></span>