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 🙂
Utilisateur | CLASSEMENT |
---|---|
4 | |
2 | |
2 | |
2 | |
1 |
Pendant deux semaines, au mois de février, le forum de questions-réponses en langue anglai...
By SarahF_Shopify Mar 16, 2023Maintenant que nous savons ce qu'est Tiktok et le pouvoir qu'il détient, voyons comment l'...
By Océanne Mar 1, 2023Tous les 6 mois, nous présentons une nouvelle version de Shopify Editions pour vous a...
By Jasoh Feb 10, 2023