How can I set the filter block to show a hierarchical taxonomy? As far as I can see there is only a flat list being built by default. How can I change this and apply the hierarchy of a taxonomy?

Comments

Chris Gillis’s picture

Issue summary: View changes
Status: Active » Closed (won't fix)

This is really beyond the scope of this module, but you could try something along the lines of:

  1. Create a relationship to "parent term"
  2. Add the parent term as a field with display = none
  3. If parent term exists, apply a class of "nested"
  4. Indent using css
ssoulless’s picture

Version: 7.x-1.0-beta2 » 7.x-2.x-dev
Category: Support request » Feature request
Status: Closed (won't fix) » Active

Well that is a good solution but should be good more suggestions, I think this should be implemented due to usually the isotope filters are that "FILTERS", so this is now a feature request, add way of create filters with hierarchy...

Chris Gillis’s picture

Title: Taxonomy hierarchy in filter block? » Apply different view styles to filter block.
Component: Miscellaneous » Code
  1. ssoulless, I can't understand what you have said there.
  2. There is a module that does this. https://www.drupal.org/project/views_tree
  3. I do recognise the need to use different view styles for the filter block, and so I'll update this ticket accordingly.
ssoulless’s picture

Title: Apply different view styles to filter block. » add support for taxonomy with hierarchy in filter block

Look what I meant is have something like this

taxonomy vocabulary= "car brands"

-renault
--clio
--twingo
-bmw
--z4

so if for example I have an isotope view of "cars" I want to filter them by its brand so the initial filter block should be something like

renault | bmw

then if I select "renault" the view should show all the items that match that category, and then the filter block should show its sub categories

renault | bmw
clio | twingo

then you can choose one of the subcategories if you want to filter more. that's it...

the module https://www.drupal.org/project/views_tree works with the view items not with the filter block of isotope

ssoulless’s picture

Right now the filter block just show a flat list of the terms without consider the hierarchy of the terms so the filter block just looks like this

renault | clio | twingo | bmw | z4

and for example you have a car item that is "clio" so if you select "renault" in the filter block it should show that item but id does not, it only is showed if you select "clio" in the filter block

Chris Gillis’s picture

Title: add support for taxonomy with hierarchy in filter block » Apply different view styles to filter block.

I understand. Thank you for your feature request. I'll take it into consideration as we develop 2.x

mccrodp’s picture

I think what @ssoulless was looking for originally here is integration with hierarchical_select module.

Chris Gillis’s picture

Project: Views Isotope (Deprecated) » Isotope (with Masonry and Packery)

Moving feature request to new module.

robcarr’s picture

What I've noticed when trying to implement a filter on taxonomy term parents is that the parent appears to be using the hierarchy of the Isotope filter. So using the car analogy, the 'parent' of clio, twingo and z4 is only the Isotope 'All' option, rather than a list containing renault and bmw.

And in my example, I've built a relationship on a taxonomy term in the Views > Block (Isotope filter), using:

  • Content: Term
  • (Term) Taxonomy term: Parent Term

And then render only one field in the block: (Parent) Taxonomy term: Name. This field is also main Isotope view page (so it can be added as an Isotope data field but excluded from view). All I get is the 'All' item listed on the 'Manufacturer' filter block, even with no aggregation. When used in anger, clicking on the Manufacturer 'All' filter actually resets the Car filter to all items.

voughndutch’s picture

Is this functionality available yet, if so can you give any pointers on how to achieve this. I have been trying to do this for the longest but I have had zero luck.

voughndutch’s picture

I have a Vocabulary Tags setup like such:
Parent A

  • Term 1
  • Term 2
  • Term 3
  • Term 4

Parent B

  • Term 5
  • Term 6
  • Term 7
  • Term 8

Term 1
Term 2
Term 3
Term 4
Term 5
Term 6
All terms(Parent A and B included) share the common Parent (root) so its obvious some terms have multiple parents.
What I need is my filters to appear like [ALL] [Parent A] [Parent B] where selecting all would show all content no matter the term and selecting a parent would filter content containing Parent term or children.

dimmech’s picture

The way that this module currently outputs html from taxonomy vocabularies for filtering, does so assuming that the user would apply filters that are independent of each other. This makes sense because it's normally how filters work. Multiple filters are used so that you can narrow the results of a large data set based on filter combinations. However, for simpler uses, some of those combinations can also be structured in the form of nested terms in a vocabulary. An example of this would be a basic store menu which doesn't necessarily give reason to use multiple filters, but can benefit from a single nested structure. You could use this to implement a themed menu and take advantage of the cool things that this module can do. If you want an Isotope filter block with hierarchy for your store menu here is one way to accomplish this.

First, create your taxonomy vocabulary and nest the items into a menu structure. Remember that the weight values in this step will set the order of items in the hierarchy. If your resulting structure is not right, revisit this step and check the weight values.

Next, the filter block needs to know some basic information about how the taxonomy is nested. For this I chose to use a combination of Taxonomy Lineage and Views Conditional as a starting point. You can use this combo in views to query each taxonomy term for its "depth" then "rewrite the output" based on the result to add custom classes.

Here is the view I used, import it after installing the required modules. The vocabulary I used in this view is named "Product Class (Hierarchy)". If you use another name for your vocabulary be sure to change it in the imported view under "Filter Criteria".

View to import

Now, add a preprocess function to your theme's template.php file. This will load the js and css files we will need to make this all work when the view named 'store' is called. Substitute my_theme with your theme's name where applicable. Also, be sure that the file paths match your structure and that the view name matches your view name.

function my_theme_preprocess_views_view(&$vars) {
$view = $vars['view'];
// Check for the view named 'store'
if($view->name == 'store') {
// add the javascript file
drupal_add_js(drupal_get_path('theme', 'my_theme') . '/custom/store_menu/store_menu.js');
// add the stylesheet
drupal_add_css(drupal_get_path('theme', 'my_theme') .'/custom/store_menu/store_menu.css');
}
}

Then you need to create some js to rewrite the output further with the following objectives.
1. Replace the "All" filter label with text of our own choosing.
2. Target the top level list items for adding classes since there is no parent selector in css. I did this by using the newly created custom classes from our view as selectors to assign classes at their top level <li> elements.
3. Add some hover classes to enable some interaction with the list items through css.

Create a js file at the path specified in the pre-process function we created. In this case the path can be found in a sub-folder of my_theme at /custom/store_menu/store_menu.js

js code

Finally, add the css file to the same location as specified in our preprocess function.

css code

The css and js included here are meant to be used as a place to start and not a finished solution. At this point you should have a hierarchical menu that is customisable to suit your needs!

Note: This does not create a nested html structure although that too can be achieved using js. This is simply the way I chose to do it which is just a different path to the same destination.

voughndutch’s picture

i really appreciate your time explaining this. im going to grind through this thank you