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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024