Problem explanation:
I have a Shopify store and I want to add multiple filters for tags, my product tags look like this
product 1: Face shape diamond, frame size medium, frame shape aviator
product 2: Face shape heart, frame size small, frame shape square
And what I need is 3 filters (select box),
1st filter title: Face Shape
1st filter options: diamond, heart, square
2nd filter title: Frame size
2nd filter options: small, large, medium
3rd filter title: Frame Shape
3rd filter options: cat eye, aviator, square
Then when the user clicks on each one it filters the products accordingly
What's happening now is it filters only according to 1 tag, then when I add the second filter by tag it removes the first one & filters by the second tag
So for example, if I filter by face shape = diamond, the results are correctly showing, however, when I add the second filter by frame size = small, it shows the results of frame size = small disregarding the face shape
The code
My theme doesn't allow filters so I downloaded Search & Discovery application and added 1 filter for the tags but I cannot add more than 1 filter of any type on the application
I added 1 tag filter from the app and tried to make the other 2 filters manually like so
<details class="filter-group">
//this is the filter title
<summary class="filter-group-summary">
<div>
<span>Frame Size</span>
</div>
<div>
{% render 'armament-icon' with icon: 'arrow-right', classes: "w-10 custom-filter__right-icon" %}
</div>
</summary>
//this is checkboxes with all the tags values of the frame size
<div class="filter-group-display">
<ul class="filter-group-display__list">
{% for tag in collection.all_tags %}
{% if tag contains 'SIZE_' %}
<li class="filter-group-display__list-item pb-2">
<label for="Filter-{{ forloop.index }}">
// when the form is submitted, take this name and put it in the url
<input type="checkbox"
name="filter.p.tag"
value="{{ tag }}"
id="Filter-{{ forloop.index }}"
{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
data-armada-selector="custom_filter_checkbox"
>
{{ tag | remove: "SIZE_" }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</details>
<script>
let collection_handle = '{{collection.handle}}';
let custom_loader = document.querySelector('#custom_loader');
let custom_checkbox = document.querySelectorAll('[data-armada-selector="custom_filter_checkbox"]');
let custom_filter_form = document.querySelector('[data-armada-selector="custom_filter-form-container"]');
let custom_active_filters = document.querySelector('[data-armada-selector="active-filters"]');
let queryString;
custom_checkbox.forEach(checkbox =>
checkbox.addEventListener("change", (e) => {
// take the form data & transform them into queryParam
queryString = new URLSearchParams(new FormData(custom_filter_form)).toString();
custom_loader.classList.remove('hidden')
let fetch_url;
if(window.location.href.includes("?sort") || window.location.href.includes("&sort"))
{
const querySortString = window.location.search;
const urlParams = new URLSearchParams(querySortString);
const sort_by_value = urlParams.get('sort_by')
fetch_url = '/collections/{{ collection.handle }}?' + queryString + "&sort_by="+sort_by_value
}
else fetch_url = '/collections/{{ collection.handle }}?' + queryString;
fetch(fetch_url)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
let active_filter_div = document.createElement('div');
html_div.innerHTML = data;
active_filter_div.innerHTML = data;
let html_dom = html_div.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML;
let active_filter_html_dom = html_div.querySelector('[data-armada-selector="active-filters"]').innerHTML;
// replace the document grid section with the grid from api response
document.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML = html_dom;
document.querySelector('[data-armada-selector="active-filters"]').innerHTML = active_filter_html_dom;
// update url without refreshing the page
history.replaceState(null, null, fetch_url);
custom_loader.classList.add('hidden');
})
.catch(error => console.error('Error:', error))
.finally(() => custom_loader.classList.add('hidden'));
})
)
</script>
URL structure in the browser
?filter.p.product_type=Acetate+Eyeglasses&filter.p.tag=FRAME+SHAPE_ROUND&filter.p.tag=SIZE_SMALL
What I think the solution is
I think since having 2 inputs with the same name (filter.p.tag), the form is submitting only one of them and replacing the other but I have to have this name so the form takes the value & puts it in the URL as it should be & probably it's the URL structure what's wrong but I'm not finding the resource of how to filter products by multiple tags
What I tried
In Shopify documentation, they say to add a coma in between the 2 tags
?filter.p.tag=FRAME+SHAPE_ROUND,SIZE_SMALL
But it's not working for me as well
Also I tried this url structure
?filter.p.tag=FRAME+SHAPE_ROUND+AND+SIZE_SMALL
But the result was no product found although of having multiple products with these 2 tags
I also tried these structures as suggested by ChatGPT
- ?filter[p][tag][]=FRAME+SHAPE_ROUND&filter[p][tag][]=SIZE_SMALL
- ?constraint=tag:FRAME+SHAPE_ROUND,SIZE_SMALL
- ?tags=FRAME+SHAPE_ROUND,SIZE_SMALL
But still no results
