AttributeFilter

A list of this object type is provided in the filter variable. It contains a list of all possible filters. Every attribute filter is a part of a group (filter with the same group_id belong to the same group). Each product can only have attribute filters from one group (usually one shop will only have one group of attribute filters though). Each filter contains a list of tags, which can be active or not. If all tags in such a filter are active or if all tags are not active, the filter will show all products. Basically they work like tags, but are 2-dimensionally connected via an AND operator along the various attribute filters and a OR operator along the items (tags) of each attribute. It might be a good idea to limit the number of filter displayed on the web page, as there can be quite many of them.

A filter can be activated by using an URL parameter of filter=<attribute_id>_<item_id>_0 and deactivated by using filter=<attribute_id>_<item_id>_1. In order to activate/deactivate several filter with one page reload, you can add up several of these parameters, but with something unique added to ‘filter’, e.g. filter1=1000_1_0&filter2=1000_2_0. Also you can deactivate all items of an attribute filter by using filter=<attribute_id>_1 (without specifying the item_id).

Each filter element has the following structure:

Variable name Object Description Note
attribute_id int A numeric identifier to this specific attribute.  
group_id int A numeric identifier to the group to which the attribute belongs.  
Items List<FilterItem> A list of items (tags) of this attribute filter, which also denotes whether the item (tag) is active or not.  
items_active bool This value is true if at least any of the items (tags) is active (and thus filtering of this attribute is active).  
name string The name of the attribute (e.g. ‘Color’).  
use_as_filter bool If this value is true if the attribute work as a selectable filter.  
show_on_catalog bool If this value is true the attribute should appear in the catalog.  
show_on_product bool If this value is true the attribute should appear in on the product page.  

Example:

This example shows an quick and dirty way to display all attributes and to make them selectable.


{% if filter.size > 0 %}
 <table>
  {% for f in filter %}
   <tr>
    <td><h3>{{f.name}}</h3></td>
    {% for i in f.items %}
     <td>
      {% if i.active %}
       <a href="/?filter={{f.attribute_id}}_{{i.id}}_1"><b>
      {% else %}
       <a href="/?filter={{f.attribute_id}}_{{i.id}}_0">
      {% endif %}
      {{i.name}}
      {% if i.active %}
       </b>
      {% endif %}
      </a>
     </td>
    {% endfor %}
   </tr>
  {% endfor %}
 </table>
<a href="/{{ '' | reset_all_filter }}">Reset all filter</a>
{% endif %}

Output:


<table>
 <tr>
  <td><h3>Color</h3></td>
  <td>
   <a href="/?filter=1001_0_0">
    Red
   </a>
  </td>
 </tr>
 <tr>
  <td><h3>Size</h3></td>
  <td>
   <a href="/?filter=1002_0_0">
    Small
   </a>
  </td>
  <td>
   <a href="/?filter=1002_1_0">
    Medium
   </a>
  </td>
  <td>
   <a href="/?filter=1002_2_0">
    Large
   </a>
  </td>
 </tr>
 <tr>
  <td><h3>Marterial</h3></td>
  <td>
   <a href="/?filter=1000_0_0">
    Cotton
   </a>
  </td>
  <td>
   <a href="/?filter=1000_1_0">
    Wool
   </a>
  </td>
 </tr>
</table>
<a href="/?resetallfilter=1">Reset all filter</a>

Note: This object is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this functionality, you need to add this.