Manual Installation Instructions for Sort Selector
You will need to open your collection.liquid
in the template editor, under templates.
Finding the primary collection
The first change you need to make is to find the primary collection. Place the following code near the top of the file.
{% assign primary_sort_collection = collection %}
{% if collection.metafields.sort_primary.collection_handle %}
{% assign primary_sort_collection = collections[collection.metafields.sort_primary.collection_handle] %}
{% endif %}
Adding the selector
After you have found the primary collection you can now add the selector. This should be placed where you want the selector to appear on the page.
{% if primary_sort_collection and primary_sort_collection.metafields.sort_alternates.first %}
<div class="pt-sort-selector">
<label>Sort By: </label>
<select onchange="window.location.href = '/collections/' + this.options[this.selectedIndex].value + '{% if current_tags %}/{{ current_tags | join: '+' }}{% endif %}'">
<option value='{{primary_sort_collection.metafields.sort_canonical.first.first}}'
{% if primary_sort_collection.metafields.sort_canonical.first.first == collection.handle %}selected='selected'{% endif %}>
{{primary_sort_collection.metafields.sort_canonical.first.last}}
</option>
{% for sort in primary_sort_collection.metafields.sort_alternates %}
<option value='{{sort.first}}' {% if sort.first == collection.handle %}selected='selected'{% endif %}>{{sort.last}}</option>
{% endfor %}
</select>
</div>
{% endif %}
It looks a little complicated, but all it is doing is listing each available sort order.
Using Alternative HTML
You may wish to use an alternative markup for allowing users to change the sort order, such as a list of links.
{% if primary_sort_collection and primary_sort_collection.metafields.sort_alternates.first %}
<label>Sort By: </label>
<ul>
<li>
<a href='{{primary_sort_collection.metafields.sort_canonical.first.first}}'
{% if primary_sort_collection.metafields.sort_canonical.first.first == collection.handle %}class='active'{% endif %}>
{{primary_sort_collection.metafields.sort_canonical.first.last}}</a>
</li>
{% for sort in primary_sort_collection.metafields.sort_alternates %}
<li>
<a href="/collections/{{sort.first}}{% if current_tags %}/{{ current_tags | join: '+' }}{% endif %}" {% if sort.first == collection.handle %}class='active'{% endif %}>{{sort.last}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
Styling
You may wish to style the menu using CSS, the following CSS classes are a start:
.pt-sort-selector {
float: right;
}
.pt-sort-selector select {
display: inline;
margin-left: 5px;
}
.pt-sort-selector label {
display: inline;
margin-left: 10px;
position: relative;
top: 2px;
}