The Ticket Rewards Javascript API will give you direct javascript access to many helpful objects, allowing you to build themes that are more responsive and interactive.

To include the Ticket Rewards Javascript API in your theme add the following line in your layout file:

{{ 'v1' | api_url | script_tag }}

This will generate a script tag pointing to the v1 version of the API.

Decorators

Decorators are helper functions created to ease development by generating new commonly used functionality. This ranges from product variants to new types of navigation.

decorator.renderFilters(collection_id, params, callback)

This function will generate a full working menu based on the product attributes in the given collection.

var k = new kloudstores();

if (typeof collection_id != 'undefined') {
    k.decorator.renderFilters(
        collection_id,
        {
            target: $("#filter")
        }
    );
}

This will fill the element having the ID filter with a working navigation menu. In order for this to work you would need to have the collection_id value, and the easiest way to get it is to add the following in the collection.liquid template:

<script type="text/javascript">
    var collection_id = "{{ collection.id }}";
</script>

The markup for the generated menu has the following format:

<ul class="collection-filters">
    <li>
        <h4>Brand</h4>
        <ul class="filter-values">
            <li><a href="..."> Canon <span>2</span></a></li>
            <li><a href="..."> Omega <span>1</span></a></li>
        </ul>
    </li>
    <li>
        <h4>Condition</h4>
        <ul class="filter-values">
            <li class="active"><a href="..."> New  <span>1</span></a></li>
            <li><a href="..."> Used <span>1</span></a></li>
        </ul>
    </li>
    <li>
        <h4>Megapixels</h4>
        <ul class="filter-values">
            <li><a href="..."> 10 <span>2</span></a></li>
            <li><a href="..."> 12 <span>1</span></a></li>
        </ul>
    </li>
</ul>