<div class="filters ">
<h2 class="filters__heading">
<svg class="icon filters__heading--icon" aria-hidden="true" role="img">
<title>filter</title>
<use xlink:href="/images/icons-sprite.svg#custom-filter"></use>
</svg>
Filters
</h2>
<button type="button" class="filters__switcher filters__heading" data-state-current="hidden">
<svg class="icon filters__switcher-icon" role="img">
<title>filter</title>
<use xlink:href="/images/icons-sprite.svg#custom-filter"></use>
</svg>
Filters
</button>
<div class="
filters__list
filters__list--mobile-hidden
dropdown-list
dropdown-list--secondary
">
<div class="filters__active">
<div class="filters__active--heading">
<h3 class="filter__title">
Actieve filters
</h3>
<button class="button button--icon filters__close" type="button" aria-label="close filters button, click to close the filters">
<svg class="icon filters__close-icon button__icon " role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
<ul class="active-filters list ">
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Kleur:
</span>
<span class="active-filters__value">
Rood
</span>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Maat:
</span>
<span class="active-filters__value">
S
</span>
</li>
<li class="active-filters__item list__item ">
<a href="#" class="active-filters__remove " aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
<svg class="icon active-filters__remove-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</a>
<span class="active-filters__label">
Merk:
</span>
<span class="active-filters__value">
UFC
</span>
</li>
<a href="#" class="active-filters__clear-all " title="Wis alle filters">
Wis alle filters
</a>
</ul>
</div>
<div>
<div class="filter ">
<h3 class="filter__title">
Zoek op merk
</h3>
<div class="filter__content">
<div class="filter__list filter__list--select">
<div class="select ">
<label class="label " for="brand">
Show
</label>
<select id="brand" class="select__field select__field--red " name="brand">
<option value="1">
Kies merk
</option>
<option value="2">
Venum
</option>
<option value="3">
Joya
</option>
<option value="4">
Booster
</option>
<option value="5">
Super Pro
</option>
<option value="6">
Vechtsport Online
</option>
</select>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Maat
</h3>
<div class="filter__content">
<div class="filter__list filter__list--select">
<div class="select ">
<label class="label " for="size">
Show
</label>
<select id="size" class="select__field select__field--red " name="size">
<option value="1">
Kies je maat
</option>
<option value="2">
Extra small
</option>
<option value="3">
Small
</option>
<option value="4">
Medium
</option>
<option value="5">
Large
</option>
<option value="6">
Extra large
</option>
</select>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Prijs
</h3>
<div class="range-filter filter__range">
<div class="smile-es-range-slider" data-role="range-price-slider-price">
<div class="range-filter__labels">
<div data-role="from-label">€ 10</div>
<div data-role="to-label">€ 150</div>
</div>
<div data-role="slider-bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
<div class="actions-toolbar">
<div data-role="message-box">12 producten</div>
<div class="actions-primary">
<a class="action primary button button--secondary" data-role="apply-range">
<span>Filteren</span>
</a>
</div>
</div>
</div>
</div>
<script src="/components/raw/range/range.js"></script>
</div>
<div class="filter ">
<h3 class="filter__title">
Kleur
</h3>
<div class="filter__content">
<div class="filter__list filter__list--swatches">
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option--active">
<div class="filter__color-sample" style="background: #000"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: red"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #5cb85c"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #0275d8"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #f1a83b"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #ff5e98"></div>
</a>
</div>
<div class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #8f27b4"></div>
</a>
</div>
</div>
</div>
</div>
<div class="filter ">
<h3 class="filter__title">
Type Bokszak
</h3>
<div class="filter__content">
<div class="filter__list">
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Uppercut bags
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link checkbox--link-checked">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Angle bags
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Water gevulde stootzakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Hangende bokszakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Staande bokszakken
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Dummies
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Bevestigingsmateriaal
</span>
</a>
</div>
<div>
<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Overige
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/components/raw/filters/../filters/filters.js"></script>
<div class="filters {{ class }}" {{{ attributes }}}>
<h2 class="filters__heading">
{{ render '@icon' iconFilterHeading }}
{{ filtersHeading }}
</h2>
<button
type="button"
class="filters__switcher filters__heading"
data-state-current="hidden"
>
{{ render '@icon' switcherIcon }}
{{ filtersHeading }}
</button>
<div
class="
filters__list
filters__list--mobile-hidden
dropdown-list
{{ dropdownList.class }}
"
{{{ dropdownList.attributes }}}
>
<div class="filters__active">
<div class="filters__active--heading">
<h3 class="filter__title">
{{ activeFiltersHeading }}
</h3>
{{#if buttonClose }}
{{ render '@button--icon' buttonClose merge=true}}
{{/if}}
</div>
{{ render '@active-filters' }}
</div>
<div>
{{ render '@filter--selectbox-brand' }}
{{ render '@filter--selectbox-maat' }}
{{ render '@filter--range' }}
{{ render '@filter--color' }}
{{ render '@filter--checkbox' }}
</div>
</div>
</div>
<script src="{{static '../filters/filters.js'}}"></script>
{
"tag": "div",
"filtersHeading": "Filters",
"activeFiltersHeading": "Actieve filters",
"iconFilterHeading": {
"id": "custom-filter",
"title": "filter",
"class": "filters__heading--icon",
"attributes": "aria-hidden=\"true\""
},
"switcherIcon": {
"id": "custom-filter",
"title": "filter",
"class": "filters__switcher-icon"
},
"angleUp": {
"id": "angle-up",
"title": "Arrow up",
"class": "filters__angleup"
},
"angleDown": {
"id": "angle-down",
"title": "Arrow down",
"class": "filters__angledown"
},
"dropdownList": {
"class": "dropdown-list--secondary"
},
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--icon filters__close",
"icon": {
"id": "close",
"title": "Close",
"class": "filters__close-icon button__icon "
},
"attributes": "type=\"button\" aria-label=\"close filters button, click to close the filters\""
}
}
.filters {
padding: $spacer--1 0 0;
@include mq($screen-l) {
background-color: rgba(255, 255, 255, 1.0);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 0;
padding: $spacer--medium;
}
&__heading {
display: none;
margin: 0;
color: $red;
font-family: $font-family-saira;
font-size: $font-size-medium;
font-weight: $font-weight-bold;
@include mq($screen-l) {
display: flex;
margin: 0 0 $spacer--medium 0;
}
&--mobile-hidden {
display: none;
@include mq($screen-l) {
display: block;
}
@media screen and (max-width: $screen-l) {
width: 100%;
margin: 0;
z-index: 9999999999;
}
}
&--icon {
fill: #999999;
margin-right: $spacer;
}
}
&__switcher {
display: flex;
align-items: center;
height: $spacer--extra-large;
min-width: 100%;
padding: 0 $spacer--medium;
border: none;
border-radius: $border-radius;
background-color: #ecf5f4;
color: $color-secondary;
font-size: $font-size-medium;
font-family: $font-family-base;
text-decoration: none;
text-align: left;
&:hover,
&:focus {
color: $color-secondary;
text-decoration: none;
cursor: pointer;
}
@include mq($screen-l) {
display: none;
}
}
&__switcher-icon {
fill: $gray-dark;
margin-right: $spacer;
transition: $transition-base;
&--active {
fill: $red;
}
}
&__close {
display: flex;
justify-content: flex-end;
background: none;
@include mq($screen-l) {
display: none;
}
&:hover,
&:focus {
background: none;
}
& .filters__close-icon {
&:hover,
&:focus {
fill: $red;
}
}
}
&__close-icon {
fill: $gray;
}
&__list {
position: absolute;
z-index: 2;
left: 0;
margin: 4px 0 0 $spacer;
padding: $spacer--medium;
box-shadow: 0 24px 24px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px;
width: 100%;
@include mq($screen-l) {
position: unset;
z-index: unset;
left: unset;
box-shadow: none;
margin: 0;
padding: 0;
}
&--mobile-hidden {
display: none;
@include mq($screen-l) {
display: block;
}
}
}
&__active {
margin: 0 0 $spacer--medium 0;
&--heading {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-right: 15px;
}
}
}
'use strict';
(function Filters() {
const filters = {
init() {
this.switcher = document.querySelector('.filters__switcher');
this.icon = document.querySelector('.filters__switcher-icon');
this.close = document.querySelector('.filters__close');
this.filters = document.querySelector('.filters__list');
this.switcher.addEventListener('click', this.toggle.bind(this));
this.close.addEventListener('click', this.toggle.bind(this));
},
toggle() {
switch (this.switcher.dataset.stateCurrent) {
case 'hidden':
this.show();
break;
case 'display':
this.hide();
break
}
},
show() {
this.filters.classList.remove('filters__list--mobile-hidden');
this.icon.classList.add('filters__switcher-icon--active');
this.switcher.dataset.stateCurrent = 'display'
},
hide() {
document.querySelector('.filters__list').classList.add('filters__list--mobile-hidden');
this.icon.classList.remove('filters__switcher-icon--active');
this.switcher.dataset.stateCurrent = 'hidden';
}
};
filters.init();
}());
There are no notes for this item.