Re: {% for vendor in shop.vendors %} filter

How can I filter products by vendor on a collection page?

FredAz
Excursionist
16 1 4

Hi, I'm using this code on collection page, it works fine but not like what I need :

<div class="filter_co">
{% for vendor in shop.vendors %}
<a href="{{ vendor | url_for_vendor }}">{{ vendor }}</a>
{% endfor %}
</div>

In fact, I would like to display all the products vendor in the collection where I'm in, not all the products of the vendor in the entire shop...

And I would like to add a "display all" in case you select a vendor to duisplay again all the products from the collection...

Hope this clear... Any help please?

Replies 6 (6)

pvoulg
Shopify Partner
178 26 62

Hi @FredAz

Not sure about the filtering features you want to use, but the code you need can be written as so: 

<div class="filter_co">
{% for product_vendor in collection.all_vendors %}
  {{ product_vendor | link_to_vendor }}
{% endfor %}
</div>

 

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
FredAz
Excursionist
16 1 4
Thanx. This works exactly like my solution. It displays all the products in the shop from the vendor, not the products from this vendor in this specific collection. And I need a « display all » button too.
pvoulg
Shopify Partner
178 26 62

OK, so I kind of misread your request there (in my defense, it was rather late). Let's dive into it then: 

In order to figure out the unique vendors that exist in a single collection, but not throughout the whole store, you'd need to loop through your collection's products and loop through each one's vendor. If we create an array where we can append each unique instance, then we can loop through that array and create a URL with a query string for each one. Kind of like this: 

 

<div class="filter_co">
{% assign vendors = ''  %}

{% for product in collection.products %}
  {% unless vendors contains product.vendor %}
	{% assign vendors = vendors | append: product.vendor | append: ', ' %}
  {% endunless %}
{% endfor %}

{% assign vendors = vendors | split: ', ' | sort %}
<ul>
{% for vendor in vendors %}
 <li><a href="/collections/{{ collection.handle }}/?vendor={{ vendor | escape }}" title="{{ vendor }} in {{ collection.title }}">{{ vendor }}</a></li>
{% endfor %}
 <li><a href="/collections/{{ collection.handle }}" title="{{ collection.title }}">Display all</a></li>
</ul>
</div>

 

Now, for the Display All option, I imagine that you can just add a link to the collection URL (that last li above).

I have a vague feeling that there's an easier/more efficient way to do this (since you'd are effectively looping a collection's products twice), but my brain isn't working at full capacity at the moment tbh. If I come up with a better option, I'll let you know.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
FredAz
Excursionist
16 1 4
When I click on a vendor it displays all vendors not the only one I’ve clicked but « display all » works
pvoulg
Shopify Partner
178 26 62

The above should produce a URL with a query string which filters products for a specific vendor in that specific collection. Each URL should look something like this: 

https://yourstorename.com/collections/yourselectedcollection/?vendor=VendorName

If not, then there's something wrong with the output. 

 

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
Aleon
Shopify Partner
32 0 3

The collection page does not show the products of my suppliers, it always shows me the same ones, it does not filter by products (Filter)

 

My code

<div class="form-horizontal">
<select name="brands" class="btn--tertiary" onChange="window.location.href=this.value">
<option value="{{ collection.url }}">Marca</option>
{% for product_vendor in collection.all_vendors %}
<option {% if option.vendor == product_vendor %} selected {% endif %} value="{{ collection.url }}/?vendor={{ product_vendor | handle }}">{{ product_vendor }}</option>
{% endfor %}

</select>
</div>

My URL

misitioweb/collections/acabados/?vendor=generica

 

I do not understand what the problem is, he keeps showing me the same products