Supply's 'advanced tag filtering' with more control of the listing order AND view more functionality

readme.md

Group Sorting:

• There is a text field in the theme settings where you list the tag prefixes with no underscores. (ex: Size,Price,Color)
• All groups must be mentioned in that input field in order to appear.

Individual List Sorting:

• This requires the use of a Link List in the Navigation area of the Admin
• The list name is 'reorder_' with the tag prefix to represent the group of tags you want to manually sort. ie Reorder_Size
• Each link inside this list is the full product tag with prefix and underscore directly the same as in the product page.
• Only the lists that you want to sort manually need to be created or else it will just use the normal sorting of the list
• See image below as an example:

Setting this up

• You want to find <div class="grid-uniform"> in the collection-sidebar.liquid and replace that section (approx lines 13-44) with what I have above.

collection-sidebar.liquid

    <div class="grid-uniform">
      {% if settings.manual_group %}
        {% assign group_array = settings.manual_group_array | split: ',' %}
        {% for group in group_array %}
          {% if cat_array contains group %}
            {% capture array %}{% unless array == blank or array == "" %}{{ array }},{% endunless %}{{group | strip}}{% endcapture%}
          {% endif %}
        {% endfor%}
        {% assign cat_array = array | split:',' %}
      {% endif %}

      {% comment %}
        Loop through tag categories
      {% endcomment %}

      {% for cat_item in cat_array %}     

        {% comment %}
          Ignore if tag category is empty
        {% endcomment %}

        {% assign tags_present = false %} 
        {% assign indexOfLoop = 0 %}
        {% assign viewMore = false %}
        {% assign viewMoreLimit = 5 %}

        {% if cat_array contains cat_item %}
          {% assign tags_present = true %}
        {% endif %}

        {% unless tags_present == false %}
          {% assign linklist_title = cat_item | handleize | prepend: 'reorder_' %}
          {% if linklists[linklist_title].links != '' %}
            <div class="grid-item small--one-half medium--one-third">
              <h3>{{ cat_item }}</h3>
              <ul class="advanced-filters sidebar-module__list">
                {% for link in linklists[linklist_title].links %}
                  {% for custom_tag in collection.all_tags %}
                    {% if link.title == custom_tag %}
                      {% assign indexOfLoop = indexOfLoop | plus: 1 %}
                      {% if indexOfLoop > viewMoreLimit %}
                        {% assign viewMore = true %}
                      {% endif %}
                      {% if current_tags contains link.title %}
                        <li class="advanced-filter active-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}" data-handle="{{ link.title | handleize }}">{{ link.title | remove_first: cat_item | remove: '_' | link_to_remove_tag: link.title }}</li>
                      {% else %}
                        <li class="advanced-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}">{{ link.title | remove_first: cat_item | remove: '_' | link_to_add_tag: link.title }}</li>
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                {% endfor %}
              </ul>
              {% if viewMore %}
              <button class="text-link sidebar-module__viewmore">
                <span class="sidebar-module__expand">View More</span>
                <span class="sidebar-module__collapse">View Less</span>
              </button>
              {% endif %}
            </div>
          {% endif %}

          {% unless cat_item == '' or linklists[linklist_title].links.size > 0  %}
            <div class="grid-item small--one-half medium--one-third">
              <h3>{{ cat_item }}</h3>
              <ul class="advanced-filters sidebar-module__list">
                {% comment %}
                  Loop through collection tags
                {% endcomment %}

                {% for custom_tag in collection.all_tags %}
                  {% if custom_tag contains cat_item %}
                    {% assign indexOfLoop = indexOfLoop | plus: 1 %}
                    {% if indexOfLoop > viewMoreLimit %}
                      {% assign viewMore = true %}
                    {% endif %}
                    {% comment %}
                      Strip out tag category prefix and add/remove link for tag filtering
                    {% endcomment %}

                  {% if current_tags contains custom_tag %}
                    <li class="advanced-filter active-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">{{ custom_tag | remove: cat_item | remove: '_' | link_to_remove_tag: custom_tag }}</li>
                  {% else %}
                    <li class="advanced-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}">{{ custom_tag | remove: cat_item | remove: '_' | link_to_add_tag: custom_tag }}</li>
                  {% endif %}

                {% endif %}
              {% endfor %}
              </ul>
              {% if viewMore %}
              <button class="text-link sidebar-module__viewmore">
                <span class="sidebar-module__expand">View More</span>
                <span class="sidebar-module__collapse">View Less</span>
              </button>
              {% endif %}
            </div>
          {% endunless %}
        {% endunless %}
      {% endfor %}
    </div>

settings_schema.json

  {
    "type": "checkbox",
    "id": "manual_group",
    "label": "Enable manual ordering of groups by comma seperated list?"
  },
  {
    "type": "text",
    "id": "manual_group_array",
    "label": "Order groups by comma seperated list",
    "info": "List items must be identical to the tag prefixes (no underscore). ie. Brand,Product Type,Burn Time (approx),Colour"
  }

theme.liquid

  {% comment %}
  Place this just before the end of the body -> </body>
  {% endcomment %}
 
  <script>
    jQuery(function($) {
      $('.sidebar-module__viewmore').on('click', function() {
        $(this).prev('.sidebar-module__list').toggleClass('sidebar-module__list--expand');
      });
    });
  </script>

timber.scss.liquid

{% comment %}
Place the following add the end of this file
{% endcomment %}
 
.sidebar-module__hidden-item {
  display: none;
}
.sidebar-module__collapse {
  display: none;
}
.sidebar-module__viewmore {
  top: -25px;
  position: relative;
}
.sidebar-module__list--expand {
  .sidebar-module__hidden-item {
    display: block;
  }
 
  + .sidebar-module__viewmore .sidebar-module__expand {
    display: none;
  }
 
  + .sidebar-module__viewmore .sidebar-module__collapse {
    display: inline-block;
  }
}

I have the same issue as Aim828. Is there any solution to this? Thanks!

Regarding:
Is there a way to tell it to hide the entire group if sidebar-module__list is empty? For example, I have a website where one category uses a certain group that I've added to the sidebar, but a different category doesn't use that group so it shows up in the sidebar needlessly. Is there a way to fix this?

Any word on this? I'd love to use it on my site, but if I can't get rid of the extra groups then I can't really use it since it looks awkward.