Liquid Collection Sorting - Revision history

Admin at 09:32, 18 August 2015

2015-08-18T09:32:34Z

Admin at 09:30, 18 August 2015

2015-08-18T09:30:49Z

Admin at 09:29, 18 August 2015

2015-08-18T09:29:19Z

Admin at 09:16, 18 August 2015

2015-08-18T09:16:47Z

Admin at 07:06, 18 August 2015

2015-08-18T07:06:01Z

Admin at 06:51, 18 August 2015

2015-08-18T06:51:58Z

Shawn at 00:23, 12 August 2015

2015-08-12T00:23:52Z

Admin at 05:15, 28 July 2015

2015-07-28T05:15:04Z

Admin at 08:47, 27 July 2015

2015-07-27T08:47:49Z

Admin at 08:45, 27 July 2015

2015-07-27T08:45:46Z

@@ Line 12: / Line 12: @@
 You will need to insert the following code into the file at an appropriate position to display a select drop-down box.
 <pre>
@@ Line 54: / Line 56: @@
 This sample code is written using the jQuery Javascript framework. You will need to make the appropriate adjustments to the code to support other frameworks.
 The following Javascript fragment can be used with MooTools.

@@ Line 16: / Line 16: @@
 {% if collection.id > 0 %}
    <label for="sort-by">Sort by</label>
-    <select id="sort-by">
+  <select id="sort-by">
-      <option value="featured">Featured</option>
+    <option value="featured">Featured</option>
-      <option value="price-ascending">Price: Low to High</option>
+    <option value="price-ascending">Price: Low to High</option>
-      <option value="price-descending">Price: High to Low</option>
+    <option value="price-descending">Price: High to Low</option>
-      <option value="title-ascending">A-Z</option>
+    <option value="title-ascending">A-Z</option>
-      <option value="title-descending">Z-A</option>
+    <option value="title-descending">Z-A</option>
-      <option value="created-ascending">Oldest to Newest</option>
+    <option value="created-ascending">Oldest to Newest</option>
-      <option value="created-descending">Newest to Oldest</option>
+    <option value="created-descending">Newest to Oldest</option>
-      <option value="updated-ascending">Most recent update last</option>
+    <option value="updated-ascending">Most recent update last</option>
-      <option value="updated-descending">Most recent update first</option>
+    <option value="updated-descending">Most recent update first</option>
-      <option value="random">Random</option>
+    <option value="random">Random</option>
-      <option value="default">Default</option>
+    <option value="default">Default</option>
-    </select>
+  </select>
    <script type="text/javascript">
@@ Line 58: / Line 58: @@
 <pre>
    <script type="text/javascript">
      Spiffy.queryParams = {};
@@ Line 78: / Line 94: @@
      });
    </script>
 </pre>

@@ Line 40: / Line 40: @@
+       }
+     }
      jQuery('#sort-by')
@@ Line 53: / Line 55: @@
 This sample code is written using the jQuery Javascript framework. You will need to make the appropriate adjustments to the code to support other frameworks.
-The following Javascript fragment can be used with Mootools.
+The following Javascript fragment can be used with MooTools.
 <pre>
@@ Line 66: / Line 68: @@
+       }
+     }
      var select_element = $('sort-by');

@@ Line 52: / Line 52: @@
 This sample code is written using the jQuery Javascript framework. You will need to make the appropriate adjustments to the code to support other frameworks.
 <pre>
-<script type="text/javascript">
+  <script type="text/javascript">
      Spiffy.queryParams = {};
      if (location.search.length) {
@@ Line 67: / Line 69: @@
      var select_element = $('sort-by');
      select_element.value = '{{ collection.sort_by | default: collection.default_sort_by | escape }}';
-     select_element.add_event('change', function() {
+     select_element.addEvent('change', function() {
        Spiffy.queryParams.sort_by = this.value;
-       location.search = jQuery.param(Spiffy.queryParams).replace(/\+/g, '%20');
+       location.search = Object.toQueryString(Spiffy.queryParams).replace(/\+/g, '%20');
      });
    </script>

@@ Line 52: / Line 52: @@
 This sample code is written using the jQuery Javascript framework. You will need to make the appropriate adjustments to the code to support other frameworks.
 You can find a list of the valid sorting options in the [[Liquid Template Variables - collection|Liquid Collection variable]] documentation.
 The collection sorting option can only be used to sort Standard and Super collections. It does not apply to any system generated collections such as Related Collections, Product Type collections, Vendor collections or the collection of all products.

@@ Line 48: / Line 48: @@
        });
    </script>
-{% end %}
+{% endif %}
 </pre>

@@ Line 14: / Line 14: @@
 <pre>
-{% if collection.id > 0 }}
+{% if collection.id > 0 %}
    <label for="sort-by">Sort by</label>
      <select class="sort-by">