I'll do my best to explain this.
I have a Portfolio of companies, which I have as a structure, that I need to be able to filter/search through by using up to four different parameters.
- Keyword - a basic search field that a user can type into
- Industry - a category field
- Company Status - a dropdown field
- Board Members - a relation to a different structure
I know how to search these individually but I'm not quite sure how to use any combo of these all at once. Whether that be using a keyword and industry to search, all four items to search, maybe just by industry and board members, or maybe just by industry.
Below is what I have so far. Hoping someone will be able to point me in the right direction or help me piece this together.
This handles the search
{# What is being searched #}
{% set portfolio = craft.entries.section('portfolio') %}
{# Potential Query Strings #}
{% set query = craft.request.getParam('q') %}
{% set industryParam = craft.request.getParam('industry') %}
{% set statusParam = craft.request.getParam('status') %}
{% set boardMemberParam = craft.request.getParam('boardMember') %}
{# Related to Industry and/or Board Member #}
{% set industry = craft.categories.group('industries').slug(industryParam).first %}
{# Here's where I'm not sure how to combine the relatedTo for the industry, status, and/or board members #}
{% set relationParam = industryParam ? {targetElement: industry} : '' %}
{% set entries = portfolio.relatedTo(relationParam).search(query) %}
{# Probably best to not use search, as it's slower than relatedTo, so I commented this out. #}
{# .search('companyStatus::"' ~ statusParam ~ '"') #}
{# Spit out the entries #}
{% if entries|length %}
{% for entry in entries %}
<article class="portfolio-item grid-3">
<a class="portfolio-item-content" href="{{ entry.url }}">
<h3 class="portfolio-item-title">{{ entry.title }}</h3>
</a>
</article>
{% endfor %}
{% else %} {# If nothing matches the search criteria #}
<p>Sorry, no results.</p>
{% endif %}
Stripped down version of where the user sets the parameters
<form action="{{ url('portfolio') }}">
<h3 class="sidebar-title">Filter by Keyword</h3>
<input type="search" name="q" placeholder="Search">
<h3 class="sidebar-title">Filter by Industry</h3>
<select class="fancy" name="industry">
<option value="">All Industries</option>
{# Only get categories that are being used. #}
{# This will definitely need some cache tags. #}
{% set categories = craft.categories.group('industries').order('title asc') %}
{% set entriesWithCategories = craft.entries.relatedTo(categories) %}
{% set categoriesInUse = craft.categories.relatedTo(entriesWithCategories) %}
{% for category in categoriesInUse %}
<option value="{{ category.slug }}">{{ category.title }}</option>
{% endfor %}
</select>
<h3 class="sidebar-title">Filter by Status</h3>
<select class="fancy" name="status">
<option value="">All Statuses</option>
<option value="active">Active</option>
<option value="past">Past</option>
</select>
<h3 class="sidebar-title">Filter by Board Member</h3>
<select class="fancy" name="boardMember">
<option value="">All Board Memebers</option>
{% set team = craft.entries.section('team') %}
{% for member in team %}
<option value="{{ member.slug }}">{{ member.title }}</option>
{% endfor %}
</select>
<input type="submit" value="Go">
</form>
And if possible, how would I do this with AJAX? This can come later, initial search function is 100% okay. I know I could do the the AJAX filter completely on the Front-End but there's potential that the client will want to eventually add pagination if they start adding a bunch of companies to their portfolio.
Thanks in advance.