How can select multiple tags in sidebar filter

charliec
New Member
1 0 0

Hi I would like to select multiple tags in sidebar filter 

{%- if section.settings.filter_by_tag and collection.all_tags.size > 0 -%}
{%- if current_tags == blank -%}
{%- assign noFilter = true -%}
{%- else -%}
{%- assign noFilter = false -%}
{%- endif -%}
    {%- if template.name == 'collection' and collection.all_tags.size > 0 -%}
        {%- assign strListTags = '' -%}
        {% for tag in collection.all_tags %}
            {%- if tag contains '_' -%}
                {% capture strListTags %}{% unless strListTags == blank  %}{{ strListTags }}|{% endunless %}{{ tag | split: '_' | first }}{% endcapture %}
            {%- endif -%}
        {% endfor %}
        {%- assign groupTags = strListTags | split: '|' | uniq -%}
    {%- endif -%}
 
    {% if section.settings.sidebar_filtervendor_enable %}
 
    <div class="velaFilter velaBlock">
        <h3 class="titleSidebar">{{ section.settings.sidebar_filtervendor_title }}</h3>
     
        <div class="velaContent">
            <ul class="listSidebar list-unstyled">
                {% assign itemArray = section.settings.sidebar_filtervendor_list | split:"," %}
           
                {% for itemVendor in itemArray %}
                    {% if shop.vendors contains itemVendor %}
                        {% if collection.current_vendor == itemVendor %}
                            <li class="active">
                                {{ itemVendor | link_to_vendor }}
                            </li>
                        {% else %}
                            <li>
                                {{ itemVendor | link_to_vendor }}
                            </li>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endif %}
{% if section.settings.sidebar_filtertype_enable %}
 
    <div class="velaFilter velaBlock">
        <h3 class="titleSidebar">{{ section.settings.sidebar_filtertype_title }}</h3>
        <div class="velaContent">
            <ul class="listSidebar list-unstyled">
                {% assign itemArray = section.settings.sidebar_filtertype_list | split:"," %}
                {% for itemType in itemArray %}
                    {% if shop.types contains itemType %}
                        {% if collection.current_vendor == itemType %}
                            <li class="active">
                                {{ itemType | link_to_type }}
                            </li>
                        {% else %}
                            <li>
                                {{ itemType | link_to_type }}
                            </li>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endif %}
    <div id="sidebarAjaxFilter" class="velaFilter velaBlock">
        {%- if section.settings.filter_by_tag_title != blank  -%}
            <h3 class="titleSidebar">
                <span>{{ section.settings.filter_by_tag_title }}</span>
                <a href="javascript&colon;void(0)" class="velaClearAll{% if noFilter %} hidden{% endif %}">{{ 'collections.sidebar.clear_all' | t }}</a>
            </h3>
        {%- endif -%}
        <div class="velaContent">
            {% for groupTagTitle in groupTags %}
                {%- if groupTagTitle contains 'Size' -%}
                    {%- assign classFilter = 'listFilterSize' -%}
                {%- endif -%}
                <div class="ajaxFilter velaBlock">
                    <h4 class="titleSidebar ajaxFilterTitle">
                        <!--<span>Filter by {{ groupTagTitle }}</span> -->
                        <span>{{ groupTagTitle }}</span>
                        <a href="javascript&colon;void(0)" class="velaClear" style="display:none;">{{ 'collections.sidebar.clear' | t }}</a>
                    </h4>
                    <ul class="listFilter {{ classFilter }} list-unstyled">
                        {% for tag in collection.all_tags %}
                            {%- assign cat = tag | split: '_' | first -%}
                            {%- assign catDowncase = cat | downcase -%}
                            {%- if cat != tag and groupTagTitle == cat -%}
                                {%- if catDowncase == 'color' or catDowncase == 'colour' -%}
                                    {% capture imageColor %}{{ tag | remove_first: groupTagTitle | remove_first: '_' | handle }}{% endcapture %}
                                    {% capture colorImage %}{{ imageColor }}.png{% endcapture %}
                                    <li class="filterColor{% if current_tags contains tag %} active{% endif %}" data-filter="{{ tag | handle }}">
                                        <a href="javascript&colon;void(0)" title="{{ imageColor }}" style="background-color: {{ imageColor }}">
                                            <img class="img-responsive" alt="{{ tag | remove_first: groupTagTitle | remove_first: '_' | escape }}" src="{{ colorImage | file_img_url:'master' }}"  onError="this.onerror=null;this.src='{{'color_default.png' | asset_img_url: 'icon'}}';" />
                                        </a>
                                    </li>
                                {%- else -%}
                                    {%- if current_tags contains tag -%}
                                        <li class="filterItem active" data-filter="{{ tag | handle }}">
                                            {{ tag | remove_first: groupTagTitle | remove_first: '_' | link_to_remove_tag: tag }}
                                        </li>
                                    {%- else -%}
                                        <li class="filterItem" data-filter="{{ tag | handle }}">
                                            {{ tag | remove_first: groupTagTitle | remove_first: '_' | link_to_add_tag: tag }}
                                        </li>
                                    {%- endif -%}
                                {%- endif -%}
                            {%- endif -%}
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
{%- endif -%}
{% schema %}
    {
        "name": "Sidebar Filter",
        "settings": [
            {
                "type": "header",
                "content": "Sidebar Filter By Vendor"
            },
            {
                "type": "checkbox",
                "id": "sidebar_filtervendor_enable",
                "label": "Enable"
            },
            {
                "type": "text",
                "id": "sidebar_filtervendor_title",
                "label": "Heading"
            },
            {
                "type": "textarea",
                "id": "sidebar_filtervendor_list",
                "placeholder": "Vendor1,Vendor2",
                "label": "Vendors list",
                "info": "Separate by a comma \",\""
            },
            {
                "type": "header",
                "content": "Sidebar Filter By Type"
            },
            {
                "type": "checkbox",
                "id": "sidebar_filtertype_enable",
                "label": "Enable"
            },
            {
                "type": "text",
                "id": "sidebar_filtertype_title",
                "label": "Heading"
            },
            {
                "type": "textarea",
                "id": "sidebar_filtertype_list",
                "placeholder": "Product Type,Product Vendor2",
                "label": "Product types list",
                "info": "Separate by a comma \",\""
            },
            {
                "type": "header",
                "content": "SIDEBAR CUSTOMIZE TAGS"
            },
            {
                "type": "checkbox",
                "id": "filter_by_tag",
                "label": "Enable"
            },
            {
                "type": "text",
                "id": "filter_by_tag_title",
                "label": "Heading"
            }
 
        ]
    }
{% endschema %}
0 Likes