Product category filter on the /products page

Question

I've been looking for a while but I can not seem to find the correct way to tackle the following problem.

On my products page, where all the products are, I have the standard drupal commerce kickstart filters. One of those filters lets me filter the shown products depending on which category they belong to. Now, I have somewhat of a hierarchy

Term
-child Term
--"grandchild (child of child)

(see image below)

now I'd like to be able to show for example the "Kastanje" product when i click on "Vloeibaar". Show the child product when clicking on the parent.

So far, i have had no idea how to do this and have tried pretty much everything i can think of in the "configure facet display" option.

Anyone who has an idea on how to do this?

Answer 1

You need to add a new filter to your view and remove the default category filter.

You should choose: Content: Has taxonomy term ID (with depth)

This filter / argument will also return content assigned to child terms of any given taxonomy term.

Answer 2

Complete solution is somewhat as @bmunslow said, though a tad different if you specifically want a hierarchy in your "shop" (/products page by default, where all your products are shown).

1) Go to admin/configuration/search API
2) Go to fields -> Check the checkbox of Product category » All parent terms | field_product_category:parents_all
3) Save the changes and then go back to facets (2 tabs away from "fields")
4) Click on the checkbox of the All Parent Terms and save
5) go to your blocks. Add the newly saved (enabled) block to your sidebar region, remove the standard one (for product category, leave the price one be if you want it).
6) Check: Expand hierachy checkbox
7) Optional: Go to the display and there "Treat parents items as individual facet items" and save.

Answer 3

And I'm adding a third answer here. This is copied from an earlier answer I posted on the drupalcommerce.org forum.

Here's the tutorial video: https://www.youtube.com/watch?v=y1jqu8JnLbU

STEP BY STEP

1. Create a Taxonomy Vocabulary here: admin/structure/taxonomy (And create a few terms)

2. Create a Taxonomy View here: admin/structure/views/add

You want to make sure that you choose "taxonomy" entities.

3. Add a contextual filter for "Taxonomy term: Parent term"

Make sure to select "Default Filter" and choose "Taxonomy term from url." Also, specify a "Default validation criteria" for "Taxonomy term" and choose "Convert taxonomy name to ID" and select "Transform dashes in url..."

4. Add a new page to this view, remove the contextual filter from this view and add a filter for "Taxonomy term: Parent term" and set it to "equal to" and leave the field there blank.

5. Save that view and create a new view here: admin/structure/views/add

Make sure this view is a for "Content" of type "Product Display" (or whatever entity bundle has the field for your taxonomy terms).

6. Add a contextual filter for your taxonomy term, mine was called "Product Categories"

Make sure this contextual filter displays "Contents of No Results." Also, specify a "Default validation criteria" for "Taxonomy term" and choose "Convert taxonomy name to ID" and select "Transform dashes in url..."

7. Add a "No results" item called a "View Area" and select "Page_1" from your first view (this is the second page we created)

8. Save this view and go back to the first view.

9. Add a "No results" item called a "View Area" and select the second view that we just made.

10. Make sure your title field in the Taxonomy View doesn't link to the taxonomy term, but it outputs the field as a link to "catalog/[name]" that way your catalog names are clickable :)

11. Profit!

---

Bonus Answer!!

As a follow up on the same forum post, they wanted to know how to do this with multiple vocabularies, instead of one vocabulary.

Bonus video: https://www.youtube.com/watch?v=ngl3v0-8XZI

Bonus!! PRE-FLIGHT CHECKLIST

Before you walkthrough the video and the step-by-step below, make sure you have three taxonomy vocabularies with three taxonomy terms each. Additionally, confirm your Product Display has a field per taxonomy field.

Bonus!! STEP BY STEP

1. Create a View: admin/structure/views/add

   • Call it "Catalog" and leave the "page" selected
   • Show type "Taxonomy" for Level 1
   • Click "Continue"

2. Edit the field that shows for this taxonomy

   • Rewrite the output and select "output this field as a link"
   • Choose the path to be "catalog/[name]" and select to convert spaces to dashes

3. Create a new view: admin/structure/views/add

   • Call this view "Catalog - Products"
   • Change name to "Catalog" and url to "catalog"
   • Show "Content" of type "Product Display"

4. Edit the view by doing the following:

   • Change the path to "catalog/%/%/%"
   • Add a contextual filter for all three Taxonomy Vocabulary Fields that you added in Preflight
   • Add a relationship for all three Taxonomy Vocabulary Fields that you added in Preflight
   • Call this display "Products"

5. Add a new page

   • Change the path to "catalog/%/%"
   • Change the name of the display to "Level 3"
   • Remove the Level 3 contextual filter FOR THIS PAGE ONLY
   • Change the Content Format to "Fields" FOR THIS PAGE ONLY
   • Remove the title field and add a Taxonomy term name field
   • Change the relationship to be level 3 relationship
   • Modify the output of the taxonomy term name field to output a link to "catalog/%1/%2/[name]"
   • Check the "Convert spaces to dashes" checkbox

6. Add a page

   • Path should be "catalog/%"
   • Change Display to be called "Level 2"
   • Remove Level 3 and Level 2 contextual filters FOR THIS PAGE ONLY
   • Change Display format to Fields FOR THIS PAGE ONLY
   • Modify the taxonomy term name relationship to be Level 2
   • Modify the output of the taxonomy term name field to output a link to "catalog/%1/[name]"
   • Check the "Convert spaces to dashes" checkbox

7. Profit!