Bonjour,
Je cherche à mettre en place des filtres multiples sur mes pages de collection.
J'ai implémenté le code décrit ci-dessous :
<div class="clearfix filter">
<p>Filtrer par catégorie:</p>
<select class="coll-filter">
<option value="">All</option>
{% for tag in collection.all_tags %}
{% unless tag contains "Nature_" %}
{% continue %}
{% endunless %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | split:"_" | last }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag | split:"_" | last }}</option>
{% endif %} {% endfor %}
</select>
</div>
<script>
/* Product Tag Filters - Good for any number of filters on any type of collection pages */
const collFilters = document.querySelectorAll('.coll-filter');
if (collFilters.length > 0) {
collFilters.forEach((collFilter) => {
collFilter.addEventListener('change', function(){
var newTags = [];
collFilters.forEach((collFilter) => {
for(var i = 0; i <= collFilter.length-1; i++){
if(collFilter[i].selected == true && collFilter[i].value != "") {
newTags.push(collFilter[i].value);
}
}
});
if (newTags.length) {
var query = newTags.join('+');
window.location.href = '/collections/{{ collection.handle }}/' + query;
}
else {
{% if collection.handle %}
window.location.href = '/collections/{{ collection.handle }}';
{% elsif collection.products.first.type == collection.title %}
window.location.href = '{{ collection.title | url_for_type }}';
{% elsif collection.products.first.vendor == collection.title %}
window.location.href = '{{ collection.title | url_for_vendor }}';
{% endif %}
}
});
});
}
</script>
Cela marche très bien mais je voudrais que les filtres se mettent à jour en fonction des produits affichés à l'écran :
Les valeurs affichés dans tous les filtres seraient alors mis à jour à chaque fois qu'un des filtres est changé.
J'espère être clair 🙂
Merci...
