Filters

The Code

{# filters.twig #}

{{ include('_partials/filters.twig') }}

{# _partials/filters.twig #}

{{ include('_partials/filters-header.twig') }}
{{ include('_partials/filters-results.twig') }}

{# _partials/filters-header.twig #}

{% set experienceType = signals.experienceType ?? '' %}
{% set region = signals.region ?? '' %}
{% set destination = signals.destination ?? '' %}
{% set limit = signals.limit ?? 10 %}

<div id="filters-header">
	<div class="grid grid-cols-4 gap-8">
		<div>
			{% set experienceTypes = craft.app.fields.getFieldByHandle('experienceType').options %}
			<select data-bind-experience-type
					data-on-change="{{ datastar.get('_partials/filters-results') }}"
			>
				{% for option in experienceTypes %}
					<option value="{{ option.value }}">{{ option.label }}</option>
				{% endfor %}
			</select>
		</div>

		<div>
			{% set regions = craft.entries().section('regions').orderBy('title').all() %}
			<select data-bind-region
					{# When the region changes, reset the destination and update both the header and results, since the region seelcted determines the destination options. #}
					data-on-change="$destination = ''; {{ datastar.get('_partials/filters') }}"
			>
				<option value="">--</option>
				{% for region in regions %}
					<option value="{{ region.id }}">{{ region.title }}</option>
				{% endfor %}
			</select>
		</div>

		<div>
			{% set destinations = craft.entries().section('destinations').region(region).orderBy('title').all() %}
			<select data-bind-destination
					data-on-change="{{ datastar.get('_partials/filters-results') }}"
			>
				<option value="">--</option>
				{% for destination in destinations %}
					<option value="{{ destination.id }}">{{ destination.title }}</option>
				{% endfor %}
			</select>
		</div>

		<div>
			<select data-bind-limit
					data-on-change="{{ datastar.get('_partials/filters-results') }}"
			>
				<option value="10">10</option>
				<option value="25">25</option>
				<option value="50">50</option>
			</select>
		</div>
	</div>
</div>

{# _partials/filters-results.twig #}

{% set experienceType = signals.experienceType ?? '' %}
{% set region = signals.region ?? '' %}
{% set destination = signals.destination ?? '' %}
{% set limit = signals.limit ?? 10 %}

{% set query = craft.entries().section('experiences').limit(limit) %}
{% if experienceType != '' %}
	{% do query.experienceType(experienceType) %}
{% endif %}
{% if region != '' %}
	{% do query.region(region) %}
{% endif %}
{% if destination != '' %}
	{% do query.destination(destination) %}
{% endif %}
{% set entries = query.all() %}

<div id="filters-results">
	{% for entry in entries %}
		<h3>{{ entry.title }}</h3>
	{% endfor %}

	{{ entries|length ? 'Results found: ' ~ entries|length : 'No results found' }}
</div>