<form class="taxonomy-filter" data-taxonomy-filter method="get">
<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": false,
"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.