The Clerk.io Developer Hub

Welcome to the Clerk.io developer hub. You'll find comprehensive guides and documentation to help you start working with Clerk.io as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

SmartWeb

How to set Clerk.io up on a SmartWeb store.

1. Inserting the Webshop-Tracking Code

  1. In the Smartweb admin, go to Kontrolpanel->Design Manager-> Rediger filer.
  2. Open index.tpl in the editor menu.
  3. Login to the Clerk admin at my.clerk.io and go to Store Settings, by clicking the settings icon in the top right corner of your Store.
  4. Locate the Website Tracking Code, and copy it.
  5. Copy this code and insert it in the bottom of index.tpl, just above the </body> tag.

2. Setting up Sales-Tracking

  1. In the Smartweb admins Editor menu, go to Modules->Checkout.
  2. Open checkout-approved.tpl
  3. Insert the following Sales-Tracking code in the bottom of the file.
{$clerkId=$page.orderId}
<span
	class="clerk"
	data-api="misc/log_smartweb_sale"
	data-sale="{$clerkId}">
</span>

3. Setting up Data Synchronisation with the Smartweb API

  1. Go to the Smartweb Admin.
  2. Follow the Smartweb Feed guide, to setup up a product feed.
  3. Go to my.clerk.io and click Data Sync.
  4. Under Sync Method, choose Clerk.io JSON Feed
  5. Input the feed URL and choose the language.
  6. Click Update Settings and then Start Full Import. The feed will now be imported.

4. Installing the Live-Search

  1. In my.clerk.io, go to Templates .
  2. Create a template called Live-Search and choose Website.
  3. Go to Content, and create a Content block and name it Live-Search. Choose the type Live-Search on the Content page.
  4. In the Smartweb admin, go to Modules->Partials.
  5. Open the top.tpl file.
  6. Press CTRL+F (cmd+F on Mac), and search for "placeholder". This should find the search input-field code you need.
  7. Insert "id="live-search" before name in the input-field code, so it looks like this:
<input 
	type="text" 
	class="form-input input-group-main" 
	placeholder="{$Text.SEARCH_TEXT}"
	id="live-search" 
	name="search" required
>
  1. In my.clerk.io, go to Content and click Edit next to the Live-Search Content..
  2. Click Get Embed Code, and copy the code from the box.
  3. Go back to the index.tpl file, and insert the embedcode, just above the Webshop-Tracking script from step 1.
  4. In the embedcode, replace "INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE" with "#live-search" to bind it to the input field that you updated in step 7.

5. Installing the Search Page

  1. In my.clerk.io, go to Templates .
  2. Create a template called Search and choose Website.
  3. Go to Content, and create a Content block and name it Search. Choose the type Search on the Content page.
  4. In the Smartweb admin, go to Kontrolpanel->Design Manager-> Rediger filer.
  5. Open product-list-js-entity.tpl, which can be found under Product.

Notice!

The product-list-js-entity.tpl file generates both the Search Page and Category page, so the following embedcode needs to be inside an IF/ELSE-statement that only inserts it if the search page is loaded.

The embedcode should be inserted below the IF-part while the entire original files content (symbolised by "..." in the code below) should be contained in the _ELSE-part. End the statement in the bottom.

If its unclear what you need to do, please contact our Support Team, and we will help out.

  1. Insert the following code in the file, as part of an IF-statement:
{if $field == 'search'}
<span
      id="clerk-search"
      class="clerk" 

      data-template="@search"
      data-limit="40"
      data-target="#clerk-1search-results"
      data-after-render="_clerk_after_load_event"
      data-query="{$itemId}"
</span>

<ul id="clerk-search-results"></ul>

<div id="clerk-search-no-results" style="display: none;"></div>

<button id="clerk-search-load-more-button">Load More Results</button>

<script type="text/javascript">
  jQuery('#clerk-search-load-more-button').on('click', function() {
    var e = jQuery('#clerk-search');

    e.data('offset', e.data('offset') + e.data('limit'));

    Clerk.renderBlocks('#clerk-search');
  });

  function _clerk_after_load_event(data) {
    if(data.response.result.length > 1) {
      jQuery('#clerk-search-load-more-button').hide();

      if(jQuery('#clerk-search-results').is(':empty')) {
        jQuery('#clerk-search-no-results').show();
      }
    }
  }
</script>
{else}
<div class="modules angular-productlist">

...

{/if}
  1. In my.clerk.io, go to Templates and click Edit on the search template you created.
  2. Style the search-results to your liking, using the built-in editor.

6. Creating and Embedding Recommendations

  1. Create unique Content blocks for each slider/recommendations box.
  2. Choose the relevant Type for each recommendation in its own Content block.
  3. If you havent done it yet, create a Template that you can use in all the recommendations, so they have the same styling.
  4. Copy the embedcode from the Content block and insert it in the relevant .tpl file where you want the banner to be shown.
  5. Style the banners to your liking by going to the Templates setting.
  6. In most cases, the design of the shop can be copied directly by simply copy-pasting the products HTML and replacing specific product data with Template Variables.

SmartWeb

How to set Clerk.io up on a SmartWeb store.