Filtering a collection with products tags

[poojafmile]

Hello,

Am trying to add filters to my collection pages, I have included these codes in my collection.liquid template file:

<ul class="clearfix filters">
<li class="clearfix filter">
{% assign tags = 'blue, black, white' | split: ',' %}
<label>Shop by color</label>
<select class="coll-filter">
<option value="">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</li>
<li class="clearfix filter">
{% assign tags = 'Small, Medium, Large' | split: ',' %}
<label>Shop by size</label>
<select class="coll-filter">
<option value="">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</li>
<li class="clearfix filter">
{% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
<label>Shop by material</label>
<select class="coll-filter">
<option value="">All</option>
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</li>
</ul>


----------------------
And this is the javascript i have added at the end of the file:
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('.coll-picker').change(function() {
if (jQuery(this).val()) {
location.href = '/collections/' + jQuery(this).val();
}
else {
location.href = '/collections/all';
}
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});
</script>



-----------------------

I can see the options:

But when am choosing the option blue, it is not working(nothing changes doesnt even refresh or anything) as the url is not being edited as required, but when i enter it manually to the url it works :
..../collections/fragrances/blue

Am thinking its because my collections url format are different, can someone please advise on how to correct it ?

Video reference am using: https://www.youtube.com/watch?v=9IJCKm9Titk&ab_channel=TripsterDevelopers

Thanks

[IttantaTech]

Hello , @poojafmile 

Can you please provide your store url ?

[poojafmile]

@IttantaTech I have messaged you the url

[poojafmile]

@IttantaTech any update on this one please??