Product Sorting

You have the ability to sort your products by passing in the following query string parameters through a URL that renders product collections.

  • orderBy, where valid field names to sort on are id, name, sku, base_price, and created_at.
  • order, where valid values are 'asc' and 'desc' (if this parameter is left unused, the default sort will be ascending).

Below are examples of sample usage:

yourstore.lemonstand.com?orderBy=name&order=desc

Where name is the field being sorted on, and the order is descending.

yourstore.lemonstand.com/category/sporting-goods?orderBy=base_price&order=asc

Where base_price is the field being sorted on, and the order is ascending.

yourstore.lemonstand.com/shop?orderBy=sku

Where 'sku' is the field being sorted on, and the order is ascending.

In addition to this, you will have access to the following LemonStand variables that indicate what field has been sorted on, and what the order is:

  • sortField, which can be one of id, name, sku, base_price, and created_at.
  • sortOrder, which can be either 'asc' or 'desc'.

Example - Drop-down List

Below is a snippet of code that'll render a drop-down list with a set of values representative of sort order actions. It also uses the LemonStand variables above to indicate which field should be highlighted as a selected item:

<!-- A script to pick up the change event on the drop-down list below and redirect to the option selected's value. -->
<script type="text/javascript">
            $(document).on('change', 'select[data-sort-redirect]', function(){
                path = window.location.pathname + '?' + $(this).val(),
                baseUrl = window.location.protocol + '//' + window.location.host;
                window.location = baseUrl + path;
            });
</script>
<!-- A drop-down list with hard-coded values.  -->
<select data-sort-redirect>
          <option id="1" value="orderBy=base_price&order=asc"{% if sortField == 'base_price' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Price - Ascending</option>
          <option id="2" value="orderBy=base_price&order=desc"{% if sortField == 'base_price' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Price - Descending</option>
          <option id="3" value="orderBy=name&order=asc"{% if sortField == 'name' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Name - Ascending</option>
          <option id="4" value="orderBy=name&order=desc"{% if sortField == 'name' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Name - Descending</option>
          <option id="5" value="orderBy=sku&order=asc"{% if sortField == 'sku' and sortOrder == 'asc'  %} selected="selected"{% endif %}>SKU - Ascending</option>
          <option id="6" value="orderBy=sku&order=desc"{% if sortField == 'sku' and sortOrder == 'desc'  %} selected="selected"{% endif %}>SKU - Descending</option>
          <option id="7" value="orderBy=created_at&order=asc"{% if sortField == 'created_at' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Date Created - Ascending</option>
          <option id="8" value="orderBy=base_price&order=desc"{% if sortField == 'created_at' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Date Created - Descending</option>
</select>