Re-Ordering tags in drop down filters

abrusenhan
New Member
7 0 0

Hello! I have been able to add drop down filters on my site but one of the dropdowns is a filter by price range and it will not let me put the tags in the order i want. It is ordering based off just the first number rather than the whole so $1500+ is first, $250-$750 is second and $750-$1500 is last. Obviously I'd like for $1500+ to be last! Here is the coding for the dropdown (I only need this on the price dropdown but it's fine if the others are changed as well):

 

  <div class="page-width">
<div class="clearfix filter">
      <p>Refine Your Search:</p>
      <div class="four-columns">
        <p>Price:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'pri-' and 'pri0-'%}
             {% assign tagName = tag | remove: 'pri-'| remove: 'pri0-' %}  
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
          
        </select>
      </div>
      <div class="four-columns">
        <p>Material:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'mat-' %}
             {% assign tagName = tag | remove: 'mat-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>      
  <div class="four-columns">
       <p>Sort By:<p>
    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                    >
      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected>"selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                  </div>
<!-- Multiple Dropdown Sorting Boxes - Collections END -->
        <script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
    }
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>

Image 3-16-20 at 3.33 PM.jpg

0 Likes
CANDISOFT
Shopify Partner
984 142 445

- i have a solution for this issue which i have solved in one project.
- when add tag make a string starting from a digit in ascending order.


example:  1_$0-$150  , 2_$150-$300 , 3_$300-$450 ,4_$450-$600 ,......................


- using this way your tag will be fetched in above order. 
- now to remove appended prefix, split the tag with '_' .
- and now you have price without 1_, 2_, 3_ , ........

-now you can have your ordered select menu for price.

-i hope you understood. if not then comment again.  Happy to Help.
- give me like and mark my answer as accepted solution
Thank You

For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
0 Likes
umair91
Tourist
6 0 1

Hi @CANDISOFT 

I have a similar issue and don't know how to do it. I am using Debut Theme and want to reorder the tag filters as I want. I know it is now in alphabetical order.

Can you please tell me according to my website which code to edit, and where exactly to put that code?
Here is the screen shot of the website

Screen Shot 2021-01-18 at 4.33.03 PM.png

 

0 Likes
CANDISOFT
Shopify Partner
984 142 445

@umair91 ,that is the thing that i can not explain, that is the coding thing, if you want i can do that for you.

For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
0 Likes
umair91
Tourist
6 0 1

Thank you @CANDISOFT for your reply

Fortunately, few other experts helped me to achieve it