Filtering posts by subfolder and via Javascript at the same time

support
1

Hello,

my use case is a bit special. I want to create a car registry and have some simple filters in it.

I would like that when a user goes to /cars, all of the cars are shown (this is working now). But I would also like to have the continents in the menu so if a user clicks on “Africa”, a new list page is loaded displaying only the cars (aka posts) inside /cars/africa.

Each index.md contains some basic information about the car: color, brand, etc. I would like to use this info to filter so that when a user selects “red” from a dropdown, only the cars whose parameter “color” equals red is shown. That can be achieved, I think, with jmooring’s awesome example in this post: Create a filter by taxonomy terms in the section page

My question is: is possible to have both things working at the same time? Seeing all the cars from all the continents when the user goes to /cars and seeing only the cars in each continent once the user goes to /cars/continent?

This is how my files look like:

├── content
│   ├── cars
│   │   ├── africa
│   │   │   ├── car_name1
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   │   ├── car_name2
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   ├── asia
│   │   │   ├── car_name3
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   │   ├── car_name4
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   ├── europe
│   │   │   ├── car_name5
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   │   ├── car_name6
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   ├── north_america
│   │   │   ├── car_name7
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   │   ├── car_name8
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
│   │   │   ├── car_name9
│   │   │   │   ├── cover.jpg
│   │   │   │   └── index.md
2

Hi smrpr

I made something which looks the same for a genealogy site.
I have a fiches folder under content which is full of individual md files (one per person).
In my template, I list all the individual files.

Then i add a javascript filter which filters on the displayed data.

Maybe it could be a starter for your question : in the cars section list all the posts and add a javascript filter to hide/display items, according to a filter on title or whatever you want.

Hope this helps.

3

You need to make each continent a section by adding an _index.md file to each continent directory.

4

@jmooring I did, but by adding _index.md files to each continent, the /cars list becomes empty, and I would like the “root” of continents to display all cars “without filters”.

5

Thanks Welsh, I’m gonna look into your solution now.

6

Change the page collection that you range through at the top level (i.e., RegularPagesRecursive).

https://gohugo.io/quick-reference/page-collections/

7

That worked wonders! Amazing, I now have the first part of the problem solved, I can see all cars inside /cars and the cars of a specific continent when accessing /cars/continent. Thanks a lot @jmooring!

Now on to understand your code regarding filters, I’ve been trying to implement it since yesterday without success. I can work my way through backend but frontend and especially javascript is black magic for me :grinning:

8

That’s going to be a challenge for you. It’s not a trivial exercise.