Shopify for loop of all_tags numbers not showing ascending order? How print

Question

I have a problem to print all_tags numbers in ascending order? For example

Currently Loop print: 11

14

15

18

20

22

24

27

40

42

44

9

Need this: 9

11

14

15

18

20

22

24

27

40

42

44

Here is a code:

                    <ul class="collection__filter-checkbox-list wattagess">



                  {% for tag in collection.all_tags %}    
                   {% if tag contains 'Watts-' %}
                  <div class="wattage-tag-div"> <h4 class="wattage-tag">Wattage</h4> </div>

                     {% assign tagName = tag  | remove: 'Watts-' | strip | remove: 'W' %}

                     {% if current_tags contains tag %}    
                  {{ tagName | handle }}
                                    <li class="collection__filter-checkbox">
                                      <div class="checkbox-wrapper">
                                        <input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                                        {% render 'icon', icon: 'check' %}
                                      </div>

                                      <label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
                                    </li>



                       {% else %}
                                    <li class="collection__filter-checkbox">
                                      <div class="checkbox-wrapper">
                                        <input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                                        {% render 'icon', icon: 'check' %}
                                      </div>

                                      <label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
                                    </li>
                       {% endif %}   
                   {% endif %}    



                  {% endfor %}

                </ul>

Answer 1

Try this:

{%- assign maxDigits = 0 -%}
{%- for tag in collection.all_tags -%}
  {%- assign watts = tag | remove: "Watts-" | remove: "W" -%}
  {%- if watts.size > maxDigits -%}
    {%- assign maxDigits = watts.size -%}
  {%- endif -%}
  {%- assign all_tags = all_tags | append: "," | append: watts -%}
{%- endfor -%}
{%- assign all_tags = all_tags | remove_first: "," | split: "," -%}

{%- assign zeroPaddedTags = "" -%}
{%- for tag in all_tags -%}
  {%- assign zerosToAdd = maxDigits | minus: tag.size -%}
  {%- capture zeroPaddedTags -%}{{ zeroPaddedTags }},{%- for i in (1..zerosToAdd) -%}0{%- endfor -%}{{ tag }}{%- endcapture -%}
{%- endfor -%}
{%- assign sortedTags = zeroPaddedTags | remove_first: "," | split: "," | sort -%}

{%- for t in sortedTags -%}
  {%- assign tag = t -%}
  {%- assign tagChars = tag | split: "" -%}
  {%- for char in tagChars -%}
    {%- if char == "0" -%}
      {%- assign tag = tag | remove_first: "0" -%}
      {%- continue -%}
    {%- endif -%}
    {%- break -%}
  {%- endfor -%}

  {{- tag -}}<br>
{%- endfor -%}