Valeurs dynamiques pour les filtres de tags

[Olivv]

Bonjour,

Je cherche à mettre en place des filtres multiples sur mes pages de collection.

J'ai implémenté le code décrit ci-dessous : 

https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags

<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> 

Copy

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...

[Olivv]

Bonjour,

Je cherche à mettre en place des filtres multiples sur mes pages de collection.

J'ai implémenté le code décrit ci-dessous : 

https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags