How to sort the Supply theme group tag filter numerical

Solved
Highlighted
Excursionist
41 0 6

I'm using the Supply theme and it's group tag filters, but when using it with numbers it kind of get's messed-up.

For example, I have a tag group "Height" here is how it will look like:

HEIGHT

  • 100
  • 11
  • 110
  • 115
  • 12
  • 124
  • 13

The system checks for the first digit and displays the lowest, then it searches the second digit and so on - which will end up by having 11 after 100 because the second digit is 0 even though the total value is 100

I want this to work automatically - not to have to enter all the values somewhere in the back-end and I don't want to display the tags like 011 (Which would help)

Thanks in advance!

Martin

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted
Excursionist
41 0 6

Any help??

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted

Success.

Shopify Expert
2686 67 716

Martin, the options are sorted alphabetically, and you can not easily re-sort them in liquid. You may add some javascript to do it, like here: http://jsfiddle.net/2uMjv/7/

Another approach is to still use zeroes on the left, but strip them when outputting, like 0011, 0100, 0021 will be sorted to 0011, 0021, 0100 and when you output them, you can use code similar to this (which will remove zeroes on the left) and produce: 11, 21, 100

{{ tag | replace: "0", ' ' | lstrip |replace: ' ', '0' }}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Excursionist
41 0 6

Thank you, Tim!

I was thinking of doing something like your second approach but it won't work when I have something like:

Model

  • C100
  • C12

I'll have to figure out how to make it work with the JavaScript code you mentioned above.

Thank You,

Martin 

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted
Excursionist
41 0 6

@Tim, I'm trying to work around with this code to make it work with my collection filters, but am having a hard time...

Here's the element tree and my code so far:

<ul class='advanced-filters'>
  <li>
    <a>100</a>
  </li>
  <li>
    <a>11</a>
  </li>
</ul>


<script>
  function sortEm(a,b){
    return parseInt($('span', a).text()) < parseInt($('span', b).text()) ? 1 : -1;
  }


  $('.advanced-filters').each(function() {
    $(this).children('li a').sort(sortEm).prependTo(this);
  });
</script>

Any idea how I can make this work?

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted
Shopify Expert
2686 67 716

Sure. https://jsfiddle.net/d2md3oew/6/

You want to sort li, by the contents of element a inside those li:

<ul class='advanced-filters'>
  <li><a> 100 </a></li>
  <li><a> 11  </a></li>
  <li><a> 21  </a></li>
</ul>
<button id=sort>Sort</button>
<script>
 numerically = function(a,b){
   var a_val = parseInt( $('a', a).text(), 10 );
   var b_val = parseInt( $('a', b).text(), 10 );
    return  a_val - b_val;
  }
 sort_filters = function () {
  $('.advanced-filters')
    .each( function() {
    	$(this).children('li').sort( numerically ).prependTo($(this));
     });
 }
$('#sort').on('click', sort_filters );
</script>

Now, if you have non-digits in your values, the parseInt will stop at the first non-digit, so we need to provide for this too -- see fiddle.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Excursionist
41 0 6

Thank you, @Tim!

You did an amazing job!

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted
New Member
4 0 0

Hi! If I want the tags to always be displayed in this order (not only when clicking a button), how should I edit this code? Thank you very much!

0 Likes
Highlighted
New Member
1 0 0

Hi Tim - I'm probably being dense - but does the 

{{ tag | replace: "0", ' ' | lstrip |replace: ' ', '0' }}

go in the collection-sidebar.liquid file if we choose this approach?  

0 Likes
Highlighted
New Member
1 0 0

Hi Tim 

{{ tag | replace: "0", ' ' | lstrip |replace: ' ', '0' }}

where in the collection-sidebar.liquid file do we insert this? 

would appreciate any help

thank you in advance

0 Likes