<form class="taxonomy-filter" data-taxonomy-filter method="get">
<div class="taxonomy-filter__search-container">
<label class="taxonomy-filter__input-label" for="search-input">Search for keywords</label>
<input class="taxonomy-filter__input" placeholder="Enter search term" type="text" id="search-input" value="" name="search" />
<button class="taxonomy-filter__clear-button" type="button" role="button" onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
<span class="taxonomy-filter__clear-button-text">
Clear input field
</span>
<span class="taxonomy-filter__clear-button-icon">
<svg aria-hidden="true" class="clear-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="clear-icon__shape" fill="#E84A27" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM8.613 7.21l.094.083L12 10.585l3.293-3.292c.39-.39 1.024-.39 1.414 0 .36.36.388.928.083 1.32l-.083.094L13.415 12l3.292 3.293c.39.39.39 1.024 0 1.414-.36.36-.928.388-1.32.083l-.094-.083L12 13.415l-3.293 3.292c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094L10.585 12 7.293 8.707c-.39-.39-.39-1.024 0-1.414.36-.36.928-.388 1.32-.083z" />
</svg>
</span>
</button>
<input class="taxonomy-filter__submit" type="submit" id="search-submit" value="Search" />
<div class="taxonomy-filter__submit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25">
<path class="_mark" fill="#fff" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
</svg>
</div>
</div>
<div class="taxonomy-filter__container">
<div class="taxonomy-filter__global-taxonomy">
<label class="taxonomy-filter__select-label" for="global-taxonomy-select">Filter by unit</label>
<select class="taxonomy-filter__select" name="global-taxonomy" id="global-taxonomy-select">
<option class="taxonomy-filter__select-option" value="all">All
</option>
<option class="taxonomy-filter__select-option" value="1">Category 1</option>
<option class="taxonomy-filter__select-option" value="2">Category 2</option>
<option class="taxonomy-filter__select-option" value="3">Category 3</option>
<option class="taxonomy-filter__select-option" value="4">Category 4</option>
</select>
</div>
<div class="taxonomy-filter__local-taxonomy">
<label class="taxonomy-filter__select-label" for="local-taxonomy-select">Filter by type</label>
<select class="taxonomy-filter__select" name="local-taxonomy" id="local-taxonomy-select">
<option class="taxonomy-filter__select-option" value="all">All
</option>
<option class="taxonomy-filter__select-option" value="1">Thing 1</option>
<option class="taxonomy-filter__select-option" value="2">Thing 2</option>
<option class="taxonomy-filter__select-option" value="3">Thing 3</option>
<option class="taxonomy-filter__select-option" value="4">Thing 4</option>
</select>
</div>
<div class="taxonomy-filter__buttons">
<button type="submit" class="standard-button standard-button--light
standard-button---width standard-button--primary
standard-button--sm">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Apply filter</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_5509_8875)">
<path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
</g>
</svg></span></span></div>
</button>
<a href="" class="standard-button standard-button--light
standard-button---width standard-button--reset">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Clear filter</span></span></div>
</a>
</div>
</div>
</form>
{{ enqueue_script('taxonomy-filter') }}
<form class="taxonomy-filter" data-taxonomy-filter method="get">
{% if includeSearch | default(false) %}
<div class="taxonomy-filter__search-container">
<label class="taxonomy-filter__input-label" for="search-input">Search for keywords</label>
<input class="taxonomy-filter__input" placeholder="Enter search term" type="text" id="search-input"
value="{{ search.term }}" name="search"/>
<button class="taxonomy-filter__clear-button" type="button" role="button"
onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
<span class="taxonomy-filter__clear-button-text">
Clear input field
</span>
<span class="taxonomy-filter__clear-button-icon">
{% include 'bits/icons/clear-x.twig' %}
</span>
</button>
<input class="taxonomy-filter__submit" type="submit" id="search-submit" value="Search"/>
<div class="taxonomy-filter__submit-icon">
{% include 'bits/icons/search.twig' %}
</div>
</div>
{% endif %}
{% if includeDateFilter | default(false) %}
{% include 'partials/date-filter/date-filter.twig' %}
{% endif %}
<div class="taxonomy-filter__container">
{% if fields.filterByGlobalTaxonomy == false %}
<div class="taxonomy-filter__global-taxonomy">
<label class="taxonomy-filter__select-label" for="global-taxonomy-select">Filter by unit</label>
<select class="taxonomy-filter__select" name="global-taxonomy" id="global-taxonomy-select">
<option class="taxonomy-filter__select-option"
value="all">All
</option>
{% for option in fields.globalOptions %}
<option class="taxonomy-filter__select-option"
value="{{ option.value }}"{{ fields.taxonomies.globalTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if includeLocalTaxonomyFilter | default(false) %}
<div class="taxonomy-filter__local-taxonomy">
<label class="taxonomy-filter__select-label" for="local-taxonomy-select">Filter by type</label>
<select class="taxonomy-filter__select" name="local-taxonomy" id="local-taxonomy-select">
<option class="taxonomy-filter__select-option"
value="all">All
</option>
{% for option in fields.localOptions %}
<option class="taxonomy-filter__select-option"
value="{{ option.value }}"{{ fields.taxonomies.localTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if includeLocalTaxonomyFilter or fields.filterByGlobalTaxonomy == false %}
<div class="taxonomy-filter__buttons">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
isButton: true,
buttonType: 'submit',
isDisabled: ((request.get | length) > 0),
text: 'Apply filter',
size: 'sm',
},
background: 'light'
} %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'reset',
isButton: false,
buttonType: 'reset',
text: 'Clear filter',
url: cancelUrl,
},
background: 'light'
} %}
</div>
{% endif %}
</div>
</form>
{
"includeSearch": true,
"includeLocalTaxonomyFilter": true,
"fields": {
"filterByGlobalTaxonomy": false,
"globalOptions": [
{
"label": "Category 1",
"value": "1"
},
{
"label": "Category 2",
"value": "2"
},
{
"label": "Category 3",
"value": "3"
},
{
"label": "Category 4",
"value": "4",
"selected": true
}
],
"localOptions": [
{
"label": "Thing 1",
"value": "1"
},
{
"label": "Thing 2",
"value": "2",
"selected": true
},
{
"label": "Thing 3",
"value": "3"
},
{
"label": "Thing 4",
"value": "4"
}
],
"submitButtonText": "View",
"cancelButtonText": "Clear"
}
}
smallestBreakpoint = 400px
mediumBreakpoint = 700px
.taxonomy-filter
--backgroundImage url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8001 0.40006C12.1314 0.841888 12.0419 1.46869 11.6001 1.80006L6.00006 6.00006L0.400058 1.80006C-0.0417693 1.46869 -0.131312 0.841887 0.200059 0.400059C0.53143 -0.0417685 1.15823 -0.131312 1.60006 0.200059L6.00006 3.50006L10.4001 0.200059C10.8419 -0.131312 11.4687 -0.041768 11.8001 0.40006Z' fill='%23162F93'/%3E%3C/svg%3E")
--textColor grey500
--iconFillColor blue500
--iconFillColorActive blue500
--borderColorActive blue500
--backgroundColorActive transparent
--textColorActive black
display flex
flex-direction column
flex-wrap wrap
fluid(gap, 16px, 25px)
&__container
align-items center
display flex
flex-wrap wrap
width 100%
+below(mediumBreakpoint)
display block
&__input-label
@extends $invisible
&__input
@extends $bodyLarge
background-color white
border 2px solid charcoalLighter
border-radius 100px 0 0 100px
color charcoalLight
padding 16px
transition border-color .3s ease
+below(breakpoint)
padding 10px 16px 10px 16px
primaryLink()
&::placeholder
color grey
font-weight normal
&:focus
border-color var(--borderColorActive)
outline none
& ~ ^[0]__submit
border-color var(--borderColorActive)
&__submit-icon
display flex
grid-area submit
margin-left auto
margin-right 24px
pointer-events none
& .search-icon
& .search-icon__shape
fill var(--iconFillColor)
& path
transition all .3s ease
+below(breakpoint)
margin 0 18px 0 14px
&__submit
@extends $linkBodyLarge
background-color smoke
border 2px solid charcoalLighter
border-left none
border-radius 0 100px 100px 0
color charcoalLight
cursor pointer
grid-area submit
height 100%
padding 16px
transition all .3s ease
+below(mediumBreakpoint)
color transparent
padding 0
&:focus
&:hover
fill var(--iconFillColorActive)
background-color var(--backgroundColorActive)
color var(--textColorActive)
border-color var(--borderColorActive)
&:focus
&:hover + .search-form__submit-icon path
fill var(--iconFillColorActive)
background-color var(--backgroundColorActive)
color var(--textColorActive)
border var(--borderColorActive)
&__clear-button
cursor pointer
grid-area input
margin-left auto
margin-right 16px
& .clear-icon
& .clear-icon__shape
fill var(--iconFillColor)
+below(breakpoint)
display none
&__clear-button-text
@extends $invisible
&__clear-button-icon
display flex
&__global-taxonomy
&__local-taxonomy
margin-bottom 16px
+above(mediumBreakpoint)
margin-bottom 8px
margin-right 18px
width 45%
&__buttons
display flex
flex-direction column
gap 16px
margin-bottom 8px
+above(mediumBreakpoint)
flex-direction row
margin-top 19px
&__select-label
@extends $label
color var(--textColor)
display block
padding 0 10px 4px
&__select
@extends $bodySmall
appearance none
box-sizing border-box
background-color white
background-image var(--backgroundImage)
background-repeat no-repeat
background-position right 9px center
border 2px solid grey
border-radius 0
color greyDarkest
padding 10px 32px 10px 16px
width 100%
&__select-option
@extends $bodySmall
color greyDarkest
No notes defined.