Liquid, Javascript, thèmes
<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 🙂
Bonjour, Depuis quelque temps, nous nous attachons à améliorer l’expérience Shopify e...
By Shopify May 12, 2025Maîtrisez l’expansion internationale de votre activité Shopify grâce au parcours d’appr...
By Shopify Feb 7, 2025Agrandissez la vente en gros avec le parcours d’apprentissage de Shopify Academy, B2B...
By Shopify Jan 30, 2025