What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I filter or sort sale items on my website?

How can I filter or sort sale items on my website?

arlentan
Shopify Partner
20 0 4

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.

Replies 0 (0)