<div class="search-result-filters-button">
<a href="#" class="button-outline" role="button" tabindex="0" data-scroll><i class="button-icon uod-icons uod-icons-filter-funnel"></i> Filters
<span class="button-overlay"><span><i class="button-icon uod-icons uod-icons-filter-funnel"></i> Filters
</span></span></a></div>
<div class="search-result-filters">
<div class="search-result-filters-header">
<div class="search-result-filters-submit-wrapper">
<a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
Apply filters
<span class="button-overlay"><span>
Apply filters
</span></span></a> </div>
<div class="search-result-navigation-close">
<a href="#">
<i class="uod-icons uod-icons-cross"></i>
</a>
</div>
</div>
<div class="search-result-filters-collection">
<section class="search-result-filters-group">
<div class="form-group">
<label for="result-type">Filter by result type</label>
<div>
<select class="form-control" id="result-type" name="result-type">
<option value="">-- Please choose --</option>
<option value="?query=test&collection=uod-meta&f.result+type%7Ctype=courses" id="result-type-course" selected>Course (2)</option>
<option value="?query=test&collection=uod-meta&f.result+type%7Ctype=news" id="result-type-news">News (2)</option>
<option value="?query=test&collection=uod-meta&f.result+type%7Ctype=events" id="result-type-events">Events (10)</option>
<option value="?query=test&collection=uod-meta&f.result+type%7Ctype=case-study" id="result-type-study" disabled>Case study (0)</option>
</select>
</div>
</div>
</section>
</div>
</div>
<div class="search-result-filters-button">
{% include '@button' with {
label: filtersApplied ? "Filters (" ~ filtersApplied ~ " Applied)" : 'Filters',
href: '#',
icon: 'filter-funnel'
} %}
</div>
<div class="search-result-filters">
<div class="search-result-filters-header">
<div class="search-result-filters-submit-wrapper">
{% include '@button' with {
label: 'Apply filters',
href: '#',
scheme: 'yellow'
} %}
</div>
<div class="search-result-navigation-close">
<a href="#">
<i class="uod-icons uod-icons-cross"></i>
</a>
</div>
</div>
<div class="search-result-filters-collection">
{% for group in filterGroups %}
<section class="search-result-filters-group">
{% if group.type == 'dropdown' %}
{% include '@dropdown' with {
id: group.id,
name: group.name,
label: group.title,
options: group.filters,
} %}
{% else %}
{% include '@input-choice' with {
id: group.id,
name: group.name,
label: group.title,
type: group.type,
choices: group.filters,
} %}
{% endif %}
</section>
{% endfor %}
{% if includeCalendarAssets %}
{% include '@calendar-mini-view' %}
{% include '@calendar-view-switcher' %}
{% endif %}
</div>
</div>
{
"value": "Acc",
"filterGroups": [
{
"title": "Filter by result type",
"id": "result-type",
"name": "result-type",
"type": "dropdown",
"filters": [
{
"label": "Course",
"count": 2,
"selected": true,
"id": "result-type-course",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "News",
"count": 2,
"id": "result-type-news",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=news"
},
{
"label": "Events",
"count": 10,
"id": "result-type-events",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=events"
},
{
"label": "Case study",
"count": "0",
"id": "result-type-study",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=case-study",
"disabled": true
}
]
}
],
"includeCalendarAssets": null
}
import $ from 'jquery'
// add functionality to toggle the mobile search menu
$('.search-result-filters-button [role=button],.search-result-filters-submit-wrapper [role=button], .search-result-navigation-close a').on('click', function (event) {
event.preventDefault();
$('.search-result-filters').toggleClass('search-result-filters-active');
});
// In the Funnelback set up each filter's value is a url, on change we need to load the page with that url
$('.search-result-filters input').change(function(event){
window.location.replace($(this).val());
});
.search-result {
&-filters-header {
position: relative;
padding-top: px-to-em(70, 17);
@include for-tablet-landscape-up {
padding-top: 0;
}
}
&-filters-submit-wrapper {
position: absolute;
top: 10px;
.button-yellow {
display: none;
}
@include for-tablet-landscape-up {
display: none;
}
}
&-navigation-close {
position: absolute;
top: px-to-em(26, 25);
right: 0;
width: 25px;
height: 25px;
line-height: 1;
font-size: px-to-em(25, 17);
@include for-tablet-landscape-up {
display: none;
}
a {
@include disable-underlines;
display: inline-block;
transition: transform .3s $default-animation-curve;
color: $white;
&:hover {
transform: rotate(90deg);
}
}
}
&-filters {
@include full-bleed-inset;
display: none;
font-family: $header-font;
font-size: 16px;
@include for-tablet-landscape-up {
display: block;
padding: 0;
}
&-group {
margin-bottom: px-to-em(10, 16);
background: $light-grey;
padding: px-to-em(20, 16);
> .form-group {
margin-bottom: 0;
}
}
&-active {
display: block;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
background: $black;
min-height: 100vh;
@include for-tablet-landscape-up {
position: relative;
background: initial;
min-height: initial;
}
}
&-button {
@include for-tablet-landscape-up {
display: none;
}
.button-outline {
margin-bottom: 0;
}
}
&-collection {
max-height: #{'calc(100vh - ' + px-to-em(70, 16) + ')'};
overflow: scroll;
@include for-tablet-landscape-up {
max-height: 100%;
overflow: visible;
}
}
}
&-filter {
display: block;
position: relative;
margin-bottom: px-to-em(8, 16);
&-label {
display: inline-block;
cursor: pointer;
padding-top: px-to-em(4, 16);
padding-right: px-to-em(4, 16);
padding-bottom: px-to-em(4, 16);
padding-left: px-to-em(34, 16);
line-height: 1.15;
}
&-checkbox {
position: absolute;
}
&.disabled {
color: $dark-grey;
}
}
}
.icheckbox_flat-blue {
background: $white;
}
Filters for selecting and deselecting search result options. Panels are visible by default on desktop, and on mobile and tablet devices are appear through a modal overlay.
If using the “radio” type, you should also specify the “id” of the group.
There is also the option to include calendar assets. Setting to true will include assets relating to the T4 events calendar module.