Sorting Results In Search and Categories

Check how to choose a custom attribute to sort results

Per standard, Clerk.io sorts results in Search and Categories based on what most customers will be likely to buy, which is a great conversion booster.

However, the Search API and the Category Popular API has a built-in function that allows you to choose a specific attribute to sort by, which will still list products based on popularity, but at the same time sort them based on the attribute you select.

Here is an example:

<span class="clerk"
      data-template="@search-page"
      data-query="running shoes"
      data-orderby="price"
      data-order="asc">
</span>

data-orderby lets you choose the attribute to filter by. Any attributes sent to Clerk.io can be used for this.

data-order can be either asc or desc for ascending and descending order.

The sorting can also be used in direct API calls:

http://api.clerk.io/v2/search/search?key=h1j24hfkafn2nfl&query=running+shoes&limit=30&orderby=price&order=asc

Frontend Sorting Example

The below is an example embedcode that uses the above sorting to create an option field that users can use to change the sorting of the results.

It has no styling so its only for the functionality.

<span class="clerk"
      data-template="@search-page"
      data-query="running shoes"
      data-orderby="price"
      data-order="asc">
</span>

<select class="clerk_sort_select" onchange="clerkSorting(this.options[ this.selectedIndex ].value, event);">
    <option value="" disabled selected>Sort</option>
    <option value="null_null">Best Selling</option>
    <option value="asc^name">Name (A - Z)</option>
    <option value="desc^name">Name (Z - A)</option>
    <option value="asc^price">Price (low to high)</option>
    <option value="desc^price">Price (high to low)</option>
    <option value="asc^age">Newest</option>
    <option value="desc^age">Oldest</option>
</select>

<script>
    // Function to toggle sorting of results based on option in .clerk_sort_select.
    // The function takes the value of the option and splits it by _.
    // The value should always be either asc or desc followed by _ and the attribute key.
    // The only exception to this is the default sorting which is defined as null_null.
    function clerkSorting(val, event) {
        or = (val.split('^')[0] == 'null') ? eval(val.split('^')[0]) : val.split('^')[0];
        orb = (val.split('^')[1] == 'null') ? eval(val.split('^')[1]) : val.split('^')[1];
        param_sort = val;
        Clerk('content', '[data-target][data-query][data-template][data-clerk-content-id]', 'param', {
            orderby: orb,
            order: or
        });
    }
    // Change value in select element to currently active choice, since element rerenders upon initial user input.
    // Without it will show the first option nominally regardless of the current ordering in effect.
    if (!param_sort) {
        var param_sort;
    } else {
        if (param_sort.length > 0) {
            document.querySelector('.clerk_sort_select').value = param_sort;
        }
    }
</script>