Personalized checkout and custom promotions with Shopify Scripts
Is there a way to sort or filter products by whether they are on sale?
Currently I have 2 different scripts set up;
1. Using Shopify's default sort feature with ascending price, title etc.
<label for="SortBy"> Sort By </label>
<select name="SortBy" id="SortBy">
<option value="all" selected> All </option>
<option value="best-selling"> Popular </option>
<option value="created-ascending"> Latest</option>
<option value="price-ascending" selected> Price - Low to High </option>
<option value="price-descending"> Price - High to Low </option>
</select>
Shopify.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) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
$(function() {
$('#SortBy')
.val('{{ collection.sort_by | default: 'all'}}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams);
}
);
});
2. Sorting by tags:
<div>
<li class="clearfix filter">
{% assign tags = 'pendant, bracelet' | split: ',' %}
<select class="coll-filter">
<option value=""> Type </option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | capitalize }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag | capitalize }}</option>
{% endif %}
{% endfor %}
</select>
</li>
</div>
jQuery('.coll-filter').change(function() {
if (jQuery(this).val()) {
location.href = '/collections/' + jQuery(this).val();
}
else {
location.href = '/collections/all';
}
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});
I am thinking to either manually add 'SALE' tags to each individual discounted product, or filter by collection instead of tags, which gets messy because I can't do cross-filtering; ie. If product contains Tag A + Tag B.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025