Filter entries by multiple categories

Question

I am trying to set up a form with checkboxes that allows users to filter entries by selecting multiple categories, but I am not quite getting it right.

Currently this is my form:

{% set subcategoryParam = craft.request.getParam('subcategory') %}
{% set subcategories = craft.categories.group('partnerAreas').find() %}

<form action="{{ craft.request.url }}">

  {% for subcategory in subcategories %}
    <input type="checkbox" value="{{ subcategory.slug }}" id="{{ subcategory.slug }}" name="subcategory" {{ subcategory.slug in subcategoryParam ? 'checked'}}>
    <label class="label__checkbox" for="{{ subcategory.slug }}">
      {{ subcategory.title }}
    </label>
  {% endfor %}

  <button type="submit">
    Search
  </button>
</form>

Submitting this form gets me URL query strings like this:

?subcategory=sourcing-local-products&subcategory=communication

When I am using craft.request.getParam('subcategory'), only the last selected subcategory gets picked up (as you would expect).

I've tried setting the name on the checkbox field to subcategory[], but that gets me an array to string conversion template error and the URL query string then looks like this:

?subcategory%5B%5D=sourcing-local-products&subcategory%5B%5D=communication

What do I need to do to get a comma separated list for the subcategory parameter like this:

?subcategory=sourcing-local-products,communication

And once that is working, how do I then get all the entries that have any of the selected categories assigned via a Matrix field?

This is what I've currently got:

{% set subcategoryParam = craft.request.getParam('subcategory') %}
{% set selectedSubcategories = craft.categories.slug(subcategoryParam) %}
{% set entries = craft.entries({
  section: listingType,
  relatedTo: {
    targetElement: selectedSubcategories,
    field: 'involvementAreas.area'
  }
}) %}

But I imagine that's not quite right if I want to account for an array of selected categories...

Answer 1

I had to get this working just the other day. Here is what I did:

{# Get the relevant entries #}
{% set categoryQuery = craft.request.getParam('category') %}
{% set categories = craft.categories.group('sectionName').slug(categoryQuery) %}

{# Set the search parameters #} 
{% set searchParams = {
    relatedTo: categories,
    section: 'sectionName'
} %}

{# Get the relevant entries #}
{% set relevantEntries = craft.entries(searchParams) %}

In the form I have:

<form action="">

{% for category in craft.categories.group('services') %}
    <input id="{{category.slug}}" type="checkbox" name="category[]"  value="{{ category.slug }}" {{ category.slug in categoryQuery or categoryQuery == null  ? 'checked'}}>
    <label for="{{ category.slug }}" >{{ category.title }}</label>
{% endfor %}

</form>

This seems to work for me.

Answer 2

If multiple are passed subcategoryParam should be an array. So I believe you will need to process the data differently to get the categories. If you pass the id instead of the slug you could do this:

targetElement: subcategoryParam|join(',')

Answer 3

I hijacked the form submission and generated the URL based on all the checkboxes they checked.

Creating a URL like: /results?category=green,red,blue&number=one,two,three

The input names were not category[], but category and number.

Then in the results template, I grabbed the parameters (just displaying one in this example):

{% set number = craft.request.getParam('number') %}

{% if number %}
    {% for item in mealType|split(',') %}
        {% set numberCategories = craft.categories.group('number').slug(item) %}
        {% set relationParam = relationParam|merge([{ targetElement: numberCategories }]) %}
    {% endfor %}
{% endif %}

{# setup your search parameters #}
{% set searchParams = {
    section: 'news',
    relatedTo: relationParam
} %}

{# Find your entries #}
{# {% set entries = craft.entries(searchParams).order('score') %} #}
{% if relationParam|length > 1 %}
    {% paginate craft.entries(searchParams).order('score').limit(12) as pageInfo, pageEntries %}
{% endif %}

The JS for getting the values from each checkbox, I set the checkboxes all to have the same class. I looped thru those checkboxes and built an array to of checkbox input names and the values.

$("#news-form").submit(function(e) {
    e.preventDefault();
    var query_string = '';
    var categories = [];
    var i = 0;

    $('.category-checkbox').each(function (index, value) {
        var checkboxName = $(this).attr('name');
        var checkboxValue = $(this).val();

        // if checkbox is checked
        if ($(this).is(':checked'))
        {
            categories[checkboxName] = categories[checkboxName] || [];
            categories[checkboxName].push(checkboxValue);
        }

    });

    var cat_index = 0;

    for(var key in categories)
    {
        console.log(key);

        if(cat_index > 0)
        {
            query_string += '&' + key + '=' + categories[key];
        } else {
            query_string += key + '=' + categories[key];
        }

        cat_index++;
    }

    if( query_string != '')
    {
        window.location = '/news/results?' + query_string;
    }
});

Hopefully this helps someone out.