Difference between revisions of "Liquid Collection Sorting"
From Spiffy Stores Knowledge Base
(Created page with "You can pass a sort parameter using the '''sort_by''' query string appended to the URL on a collection page. <pre> http://my-store.spiffystores.com/collections/t-shirts?sort_...") |
m |
||
| Line 13: | Line 13: | ||
You will need to insert the following code into the file at an appropriate position to display a select drop-down box. | You will need to insert the following code into the file at an appropriate position to display a select drop-down box. | ||
| − | < | + | <pre> |
{% if collection.id > 0 }} | {% if collection.id > 0 }} | ||
<label for="sort-by">Sort by</label> | <label for="sort-by">Sort by</label> | ||
| Line 49: | Line 49: | ||
</script> | </script> | ||
{% end %} | {% end %} | ||
| − | </ | + | </pre> |
Revision as of 13:07, 27 July 2015
You can pass a sort parameter using the sort_by query string appended to the URL on a collection page.
http://my-store.spiffystores.com/collections/t-shirts?sort_by=price-descending
The sort_by parameter will override the default sorting order for the collection and can be selected by the customer using an HTML select drop-down.
Your theme may have this functionality already built into it. but if it doesn't, then you can follow these instructions on how to add a sorting option to your collection pages.
Firstly, you will need to go to your Toolbox Theme editing page and edit the collection.liquid file.
You will need to insert the following code into the file at an appropriate position to display a select drop-down box.
{% if collection.id > 0 }}
<label for="sort-by">Sort by</label>
<select class="sort-by">
<option value="featured">Featured</option>
<option value="price-ascending">Price: Low to High</option>
<option value="price-descending">Price: High to Low</option>
<option value="title-ascending">A-Z</option>
<option value="title-descending">Z-A</option>
<option value="created-ascending">Oldest to Newest</option>
<option value="created-descending">Newest to Oldest</option>
<option value="updated-ascending">Most recent update last</option>
<option value="updated-descending">Most recent update first</option>
<option value="random">Random</option>
<option value="default">Default</option>
</select>
</div>
<script type="text/javascript">
Spiffy.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Spiffy.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('.sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.on('change', function() {
Spiffy.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Spiffy.queryParams).replace(/\+/g, '%20');
});
</script>
{% end %}