The setup of customer group prices consists of 4 steps:

  1. Include the various prices in the feed
  2. Fetch the current customer groups ID
  3. Create a function to fetch the relevant price
  4. Show the price in the Design

1. Include Prices in the Feed

Start by adding an attribute to all products which contains all of the various pricing options, making sure to correlate each price to a particular customer group. 

For example:

Prices

customer_group_prices = [179,140,100,70]

2. Fetch the Customer Group ID

Implement a small script somewhere on the page which fetches the customer-group ID of the current customer to a JS variable.

The Customer Group ID should be equivalent to the list indice that its matching price is contained within. For example, if the price is located in customer_group_prices[2], then the ID should also be 2. For example:

Customer Group ID

<script type="text/javascript">
    customer_group = 2;
</script>

3. Create a Function to Fetch the Price

After including the price in the feed and fetching customer_group variable, you can create a TemplateFormatter which takes the customer_group_prices list as an argument and returns the relevant price.

As described above, you can now fetch the price from the specific indice in the price-list based on the customer_group ID.

The function should be put directly into the _visitor-tracking script_, and in this example it is called final_price:

TemplateFormatters

<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: '<?php echo $publicapikey; ?>',
            templateFormatters: {
                final_price: function (customer_group_prices) {
                    var return_price = customer_group_prices[customer_group];
                    return return_price;
                }
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>

4. Show the Price in the Template

When the final_price formatter has been created, you can name it directly in your Design, along with the customer_group_prices list that you created in step 1:

Template function call

<li style="text-align: center; width: 180px;">
  <a href="{{ url }}">
    <img src="{{ image }}"/>
    {{ name }}
  </a>
  <div class="price">
    {{ final_price customer_group_prices }}
  </div>
</li>

Did this answer your question?