Vendor List Page

Highlighted
Tourist
8 0 1

Here's yet another version of the Vendor List page.

 

Notes: I don't like linking directly to the vendor - as that's a filtered page (basically, all products where vendor equals xxxxx). Instead, I prefer creating collections for each vendor - so I can have a nice description, an image header, and other design elements. If you do it this way, you need to make sure that the vendor name and the collection name match exactly.

{% for product_vendor in shop.vendors %}
	{% assign vendorproductcount = 0 %}
	{% assign thisVendor = product_vendor | handleize %}
	{% assign vendorproductcount = collections[thisVendor].products_count | plus:0 %}
	{% if vendorcolcount > 0 %}
		<a href="/collections/{{thisVendor}}">{{ product_vendor }}</a>
	{% endif %}
{% endfor %}

 

 

This code grabs all the vendors, checks to see if they have products, and then, if they do, show a link to the collection. It also stops a couple weird bugs that I ran into.


For loop - this is your standard 'get all vendors'

line 2 - (re)sets a variable used for the product count. This variable gets set later, but if you don't reset it early, sometimes it keeps its count in later iterations of the loop.

line 3 - choose the vendor in this iteration, use the handle version of the name

line 4 - checks for the matching collection (using the handle), and does a product count. Note the "plus: 0" at the end. Somtimes the collection.product_count returns a null instead of a zero. When it does that, your next if check returns an error. The plus-zero basically forces this to be an integer rather than a string.

line 5 - the if-check. If the product count is greater than zero...

line 6 - returns a link to the matched collection

and then the appropriate endifs.

 

Extra caveat on sorting - It looks like vendors in shop.vendors is alphabetized automatically. However, according to the support person I fought with earlier, capitalization matters in the sort, and it will sort names that start with capitals before names that start with lowercase. Where you and I might expect a sort of "alice, Bob, dave, Steve" to be correct, it's not. Instead, it'll do "Bob, Steve, alice, dave" - Yes it's that's stupid.

 

One probably could assign an array {% assign vendorarray = shop.vendors %}, then do some sorting magic on vendorarray, and then do {% for product_vendor in vendorarray %}. But it was more work than I was willing to put in. Better, make sure that you commit to naming your vendors consistently.

Saw another post do something similar here: https://community.shopify.com/c/Shopify-Design/Vendor-Designer-Directory-Page/m-p/472018  - which is more about matching a particular design. Has an interesting way of matching vendors and collections, different from my method, so it's worth looking at too.

1 Like
New Member
1 0 0
Hi Sam thanks a lot! Please need some details
1) before edit that code, have you created a collection for each vendor right?
2) in which file do i put your code and where in the file?
Thanks im a starter in coding
0 Likes
Highlighted
Shopify Partner
6 0 0

Where should I add this code? Thanks

0 Likes