New to Grav here and looking for some guidance before getting too far into custom theme development.
The site I’m working on includes pages for Employees, Blog and News, which should be straightforward to build with Modular and/or Collection Pages. However for better UX, I’d also like to include the following functionality:
Dynamically update Collection results (without page refresh), based on sort and filter options selected by the user. Example:
Sort by: First Name or Last Name; and
Filter by: Show All (default), Team 1, Team 2, Team 3, etc.
Pass specific sort/filter settings when linking to a Collection page (from elsewhere on the site) Example:
Link to Employees page and View the members of Team 1, sorted by Last Name.
Is this functionality possible (or practical) with Grav? If someone could steer me in the right direction (especially with examples), it would be greatly appreciated!
In addition… When searching through the Forum, I found an old thread which suggested using CSS to show/hide results. While this may be a possibility, I’m leaning towards keeping the logic within the page templates or a plugin if possible.
I have not tried this yet but maybe you could wrap the twig code for your data inside of a table and use a data table to display, sort and filter the data.
I have done something similar a few times in wordpress.
Hi Tom, thanks for the tip. Not sure if it’s the same idea, but I ended up posting the question on the Discord server and was given the following advice:
Create a JSON version of a template
Have Javascript call the same page (ie. /my/collection), only it will target the JSON template (/my/collection.json) with any parameter needed. This will in turn load collection.json.twig where sorting/filter/paginating can be handled.
Still need to wrap my head around all this (lots to learn with JS), but maybe it will help someone else out there.
It will be done either by a ‘power’ user, or possibly via the admin by an experienced user.
How many employees are there approximately?
To start, I’m expecting about 20-25 employees, but it could increase to 50+ if management decides to include all staff in future. Currently, only key staff will be included.
Not sure what would be considered ‘too large’ in this case. The individual ‘bio’ pages will likely contain 250-500 words (spread over various fields), but the Collection page will only need to display a limited subset of the data (ie. first name, last name, job title, minimal metadata, and thumbnail image path).
Where/how you are going to store the employees?
The plan is to store each employee as a separate page.
As mentioned earlier, I’m also looking to use a similar dynamic setup for the Blog and News landing pages. The plan is to have a monthly feature blog article and news entries are expected to be periodic as well. Both of these landing pages should keep the displayed results to a reasonable number (probably 10-15 entries max). Does this sound possible with the same basic approach as the Employees section?
Dynamically filtering collection
Collections defined in a page can automagically be filtered using parameters in the url. E.g. <a href="/tag:photography">photography</a>. You can see this in action in the ‘Blog Site’ skeleton. This requires a re-load of the page though.
If you want to fetch a JSON object with a new collection of pages using an async request (Ajax/Fetch), you will need some javascript to submit the request and a plugin that captures the request and perform the filtering/sorting in PHP and return a JSON object containing the relevant data. The javascript submitting the request will then receive the json and update the page. This isn’t that hard to do.
Pass specific sort/filter settings when linking to a Collection page
You can reuse the same plugin as above and add some login depending on its POST parameters. It’s like an API you call. Based on the parameters it can create any collection dynamically with filters and sorting on the fly. Collections can be a combination of any or multiple page sets from anywhere in the site, based on a multitude of filters.
Storage
I think using a page per Employee would be the easiest approach. You should create a blueprint to define an entry form in Admin with which employees can be created/updated. This makes maintenance of employees quite easy.
So far, I see no roadblocks in Grav for the requirements you have presented. Yes it does require some javacript and php but nothing too difficult. For a dev that is…
If you have more questions please don’t hesitate to ask…
Good to know there aren’t any technical roadblocks with Grav. I’m the only dev on this project, so I expect a bunch of JS, AJAX, JSON reading will be required…
Thinking I’ll focus on getting the collections working correctly (filtering with the url parameters), and then tackle the dynamic enhancements down the road.