<form class="filter-list" method="get" action="/filter-page/" data-filter-list-off-canvas-id="filter-list-2031946955">
<div class="off-canvas">
<div class="off-canvas__overlay"></div>
<div id="filter-list-2031946955" class="off-canvas__panel--right" data-visible-width="767">
<div class="off-canvas__container">
<div class="off-canvas__header">
<button class="button-icon--icon-regular -icon-close" type="button" data-off-canvas-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
<div class="filter-list__apply-button">
<button class="button--secondary-small" disabled type="button" data-filter-list-off-canvas-close="true">Anwenden</button>
</div>
</div>
<div class="off-canvas__content">
<aside class="filter-list__body">
<h3 class="filter-list__body-title">Kategorien</h3>
<div class="filter-category">
<h4 class="filter-category__title">
<a href="/de/shop/bekleidung--ausruestung-c1056" class="filter-category__title-link">Bekleidung & Ausrüstung</a>
</h4>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073" class="filter-category__list-item-link--bold">
<span class="filter-category__list-item-label">Helme</span>
<span class="filter-category__list-item-count">391</span>
</a>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Modelle</span>
<span class="filter-category__list-item-count">303</span>
</a>
</li>
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Zubehör</span>
<span class="filter-category__list-item-count">88</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<h3 class="filter-list__body-title">Resultate filtern</h3>
<ul class="filter-list__list">
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Specials</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-new" type="checkbox" name="filter-new" value="selected" />
<label class="checkbox__label" for="filter-new">
<span>Neu
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-bestseller" type="checkbox" name="filter-bestseller" value="selected" checked />
<label class="checkbox__label" for="filter-bestseller">
<span>Bestseller
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-discount" type="checkbox" name="filter-discount" value="selected" />
<label class="checkbox__label" for="filter-discount">
<span>Reduziert
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-available-soon" type="checkbox" name="filter-available-soon" value="selected" />
<label class="checkbox__label" for="filter-available-soon">
<span>Demnächst verfügbar
</span>
</label>
</div>
</div>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Marke</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-a" type="checkbox" name="filter-brand-a" value="selected" />
<label class="checkbox__label" for="filter-brand-a">
<span>Marke A
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-b" type="checkbox" name="filter-brand-b" value="selected" />
<label class="checkbox__label" for="filter-brand-b">
<span>Marke B
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-c" type="checkbox" name="filter-brand-c" value="selected" />
<label class="checkbox__label" for="filter-brand-c">
<span>Marke C
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-d" type="checkbox" name="filter-brand-d" value="selected" checked />
<label class="checkbox__label" for="filter-brand-d">
<span>Marke D
</span>
</label>
</div>
</div>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Preis</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-number-range">
<div class="text-field-range--light">
<div class="text-field-range__container">
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-from" type="number" name="text-field-range-from" required autocomplete="on" placeholder="ab *" />
<label class="visually-hidden" for="text-field-range-from">ab
*
</label>
</div>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-to" type="number" name="text-field-range-to" required autocomplete="on" placeholder="bis *" />
<label class="visually-hidden" for="text-field-range-to">bis
*
</label>
</div>
</div>
</div>
</div> <button class="button--primary-small" type="button">Ok</button>
</div>
</div>
</li>
</ul>
</aside>
</div>
</div>
</div>
</div>
</form>
{% include '@SharedComponents/modules/b2b-product-listing/components/filters/filter-list/filter-list.twig' %}
{
"headingLevel": "3",
"labels": {
"categories": "Kategorien",
"filters": "Resultate filtern"
},
"title": "Resultate filtern",
"action": "/filter-page/",
"applyButton": {
"variant": "secondary-small",
"type": "button",
"role": "button",
"title": "Anwenden",
"disabled": true,
"attributes": {
"data-filter-list-off-canvas-close": "true"
}
},
"offCanvasCloseButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button"
},
"categories": {
"headingLevel": "4",
"parentCategory": {
"label": "Bekleidung & Ausrüstung",
"value": "1056",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056"
},
"currentCategory": {
"label": "Helme",
"value": "1073",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073"
},
"subCategories": [
{
"label": "Modelle",
"value": "1074",
"count": "303",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074"
},
{
"label": "Zubehör",
"value": "1272",
"count": "88",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272"
}
]
},
"filters": [
{
"name": "multi-relation",
"label": "Specials",
"data": {
"options": [
{
"variant": "light",
"id": "filter-new",
"name": "filter-new",
"label": "Neu",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-bestseller",
"name": "filter-bestseller",
"label": "Bestseller",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-discount",
"name": "filter-discount",
"label": "Reduziert",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-available-soon",
"name": "filter-available-soon",
"label": "Demnächst verfügbar",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
}
]
}
},
{
"name": "multi-relation",
"label": "Marke",
"data": {
"options": [
{
"variant": "light",
"id": "filter-brand-a",
"name": "filter-brand-a",
"label": "Marke A",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-b",
"name": "filter-brand-b",
"label": "Marke B",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-c",
"name": "filter-brand-c",
"label": "Marke C",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-d",
"name": "filter-brand-d",
"label": "Marke D",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
}
]
}
},
{
"name": "multi-number-range",
"label": "Preis",
"data": {
"range": {
"variant": "light",
"from": {
"variant": "light",
"id": "text-field-range-from",
"name": "text-field-range-from",
"label": "ab",
"required": true,
"value": "",
"disabled": false,
"type": "number",
"autocomplete": "false",
"error": "",
"helper": ""
},
"to": {
"variant": "light",
"id": "text-field-range-to",
"name": "text-field-range-to",
"label": "bis",
"required": true,
"value": "",
"disabled": false,
"type": "number",
"autocomplete": "false"
}
},
"button": {
"variant": "primary-small",
"type": "button",
"role": "button",
"title": "Ok",
"disabled": false
}
}
}
]
}
import FilterListMediator, {name as title} from 'cando-cx-components-library/components/modules/b2b-product-listing/components/filters/filter-list/filter-list-mediator';
export default FilterListMediator;
export const name = title;
import './filter-list.scss';
import FilterList, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-listing/components/filters/filter-list/filter-list';
export default FilterList;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-listing/components/filters/filter-list/filter-list";
Initial auto expand only expands when there are active filters inside a filter group.