FAQ

Running into issues with your BigCommerce integration? This FAQ covers the most common problems and their solutions, from customer group prices to formatters.

Customer group prices #

The setup of customer group prices consists of 2 steps:

1. Run a full sync between Clerk and BigCommerce.

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

Run full sync #

When running a full sync between Clerk and BigCommerce, Clerk 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.

Provide price context #

When showing the product on the website, you need to provide a price context to Clerk.

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 anchor tag of the content itself, or it can be provided as part of the Clerk('config', ...) call.

HTML attributes #

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>

Clerk config #

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"
    }
  }
})

Dynamic injection #

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>

Using formatters #

Clerk.js allows you to write custom JavaScript functions that add new functionality to your Designs.

Formatters can be added in two ways:

• Through my.clerk.io > Developers > Formatters, where each Formatter can be created as separate entries.

• As a configuration for Clerk.js, in the tracking-script that is inserted on all pages, where multiple formatters can be added at once.

Example formatter #

An example can be seen below. Please be aware this is Clerk V2 (latest version):

Clerk('config', {
  key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
  formatters: {
    log_price: function(price) {
      console.log(price);
    }
  }
});

Multiple formatters #

You can write any number of formatters, separated by comma, like this:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Use in designs #

After creating your formatters, you can use them in Designs using this syntax:

This allows you to create any functionality in your Designs that you’d like to use with Clerk in your webshop.