Are categories the best way to organize Commerce product filters?

Question

The Commerce site I'm working on (my first Craft project) will have a product listing page with filters. These will function as you would expect, but clicking a filter name will link to another version of the product listing page with another set of products, as opposed to updating the page via AJAX. I'm doing the content modeling now and am wondering if Craft categories are the best way to structure this or if there is a better way. I see it working somewhat like the Patagonia product page (click through the categories toward the top of the sidebar and note the URI change). However, unless there's an advantage to doing otherwise, I was just going to use categories for both of the filter sets below. Patagonia uses query string parameters when filtering by sport, whereas this site would have a unique slug(s) for each combination of filters.

Here's what the filters look like. A checkbox or some other visual indication would be given when a filter is selected:

Product Categories

• Category 1 (slug: category-1)
• Category 2
• Category 3
• New Products

Shop by Use

• Use A (slug: use-a)
• Use B
• Use C
• Use D

The selection options are:

• Only one Product Category can be selected at a time (choosing another deselects the previous selection), but a selection is not required.
• Only one Use can be checked at a time (choosing another deselects the previous selection), but a selection is not required.
• A selected filter can be unselected by clicking it.
• With the Product Category and Use options unselected, a page with ALL products is displayed.

A few more notes:

• Every product will belong to at least one Product Category but can belong to multiple.
• Every product has at least one Use and most have multiple.
• 'New Products' is a unique category that would ideally expire based on a date chosen when adding a product.
• I was picturing the URIs being something like the following:
  • Category selected: domain.com/products/category-1
  • Use selected: domain.com/products/use-a
  • Category and Use selected: domain.com/products/category-1/use-a or domain.com/products/category-1-use-a

---

Questions

1. Are categories the best tool for this job? If not, what would work better? If so:
2. Would it make sense for Product Categories and Shop by Use to be their own category groups?
3. Creating category pages is simple enough, but I'm not sure how best to create a page that represents a combination of categories / selected filters (e.g. Category 2 + Use A). I know I can use relatedTo to list products from multiple categories, but what is the best Craft element to use as a container for these pages? This answer was helpful, but it's not quite the same (for one thing, it's not Commerce-specific; it refers to products but I believe they are just standard channel entries). Should the combined-category pages be in their own channel?
4. New Products: I'm thinking this should be a static link, possibly to a single (/products/new) that lists products whose "newness" has not expired. Is there a better way?

I'm probably overthinking this! I mainly want to know if I'm heading in the right direction.

Answer 1

1. Hard to say if they're the 'best' tool, but I don't see anything here you can't do with Craft categories and they seem the logical and built in way to go about it. In essence you simply look at your url segments and use these as category filters when retrieving the products

2. I think so. It keeps the two separate data concerns nicely separated - but do be aware from a UI point of view, separate category groups are very separate things - you can't use one field to select from both groups (quite a surprise to me the first time I implemented this!)

3. I think you really only need one template here that simply inspects the url segments and builds the products query from whatever is there. This part of the question reads a little as if you're confusing the presentation concerns and the data holding concerns (which is not criticism - it's very easy to do!) - your products will live as products over in Commerce, but your actual url routing and display of those at the category level (i.e. the product listing level) - can probably be handled by just one display template. . You don't need a 'channel' for these pages as such (they're not pages, rather filtered views). So probably just a route that points, say, /catalogue/* -> to your one product listing template. (The actual individual product pages (if they have significantly different displays) - can use multiple templates if need be (or again, conditional logic within the one template)).

4. There's really no reason that you could not use a route to point say /products/new to the same template and again inspect the url to build your products query, showing only the newer products. There's no need per se for a single here unless you want other content on the page or something.

While you described this on slack as a 'noob' question it's not, and it's good to think it through - in some ways this stuff is the hardest part to get your head around with Craft/Commerce. Once you actually get to implementing it you'll find this bit was actually a lot harder than making it work (well, I did!).

The fact you're using separate urls for everything probably makes it a lot easier than some approaches I think, so nothing in your message really strikes me as unachievable. The point to understand is that you don't need a channel or section to hold all of these pages - they aren't really pages as such, really they are all views on the same data (all, or some subsets thereof) - you simply have route(s) which point to a single template with logic that inspects the url and filters the products based on that.

More than happy to chat this through more on Slack if that would help.