FAQ

Managing customer group prices #

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>

Using formatters in designs #

Clerk.js allows you to write custom javascript functions, that adds new functionality to the Designs.

Formatters can be added in two ways:

• Through my.clerk.io > Settings > 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.

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

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  <script type="text/javascript">
    (function(w,d){
      var e=d.createElement('script');e.type='text/javascript';e.async=true;
      e.src=(d.location.protocol=='https:'?'https':'http')+'://cdn.clerk.io/clerk.js';
      var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
      w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

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

    <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

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;
   }
}

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

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