Filtering search with checkboxes multiple param querystring

Question

I have a series of checkbox like so: <fieldset data-role="controlgroup"> {% for option in craft.fields.getFieldByHandle('area').getFieldType.options %} <input type="checkbox" name="area[]" value="{{ option.value }}" class="bg-white h-4 w-4 tickbox template_filters" /> <label>{{ option.label }}</label> {% endfor %} </fieldset>

I want to the user to be able to select multiple but only pass through as a single parameter in a query string. At the moment selecting multiple results in: http://localhost:8080/directories/case-studies/?area=africa&area=europe&area=asia Naturally this only filters my results on the last query (asia)

How can I accomplish a search on all three either merging the queries before submission i.e ?area=africa,europe,asiaOR to keep all versions but append the results to merge the query strings?

Answer 1

You can do this by getting all the params in the url that have the same name and joining them into a single string which you can use in your Twig template.

Note this code is untested but is based on something I've recently done. This example only uses categories but it's possible to expand it to search custom fields and/or add a free text search too.

{# get all the area params and join them into a comma delimited string %}
{% set areaQuery = craft.request.getParam('area') | join(',')  %}


{# build the search query #}
{% set relatedParams = ['and'] %}


{% set areas = craft.categories.group('areas').slug( areaQuery | split(',') ).find() %}
{% for area in areas %}
    {% set relatedParams = relatedParams|merge([{ targetElement: area }]) %}
{% endfor %}


{# execute the search and get a resultset of entries #}
{% set entries = craft.entries.relatedTo(relatedParams).order('score') %}

{# output your entries #}

Answer 2

You can create the link with Javascript and redirect via window.location when you press on the button instead of submitting the form.

I did something similar a few days ago working example it's still in progress - so there is no mobile version yet - but I create a new link each time the user interacts with the page in order to provide the functionally to go back and forward. The url is created with Javascript I just append a hash instead of leaving the page (I hate page reloads instead of a clean smooth ajax solution for this use case)