<div class="filter-settings">
<form action="/" method="get" class="filter-settings__container">
<div class="filter-settings__sort-by">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="sort-by" name="sort-by" required>
<option value="" disabled>Please choose</option>
<option value="bestAsc">Beste Ergebnisse</option>
<option value="priceAsc">Preis aufsteigend</option>
<option value="priceDesc" selected="selected">Preis absteigend</option>
</select>
<label class="select__label" for="sort-by">Sort by
*
</label>
</div>
</div>
</div>
<div class="filter-settings__items-per-page">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="items-per-page" name="items-per-page" required>
<option value="" disabled>Please choose</option>
<option value="30">30</option>
<option value="60" selected="selected">60</option>
<option value="120">120</option>
</select>
<label class="select__label" for="items-per-page">Items per page
*
</label>
</div>
</div>
</div>
</form>
<div class="filter-settings__filter-view">
<div class="filter-view">
<div class="filter-view__title">Ansicht:</div>
<div class="filter-view__button">
<a href="#" class="button-icon--icon-regular -icon-list-rows">
<span class="visually-hidden">Listenansicht</span>
</a>
</div>
<div class="filter-view__button is-active">
<a href="#" class="button-icon--icon-regular -icon-list-tiles">
<span class="visually-hidden">Kachelansicht</span>
</a>
</div>
</div>
</div>
<div class="filter-settings__filters" data-filter-list-off-canvas-open>
<button class="button--primary-small" type="button">Filters</button>
</div>
</div>
{% include '@SharedComponents/modules/b2b-product-listing/components/filter-settings/filter-settings.twig' %}
{
"action": "/",
"filters": {
"variant": "primary-small",
"type": "button",
"role": "button",
"disabled": false,
"title": "Filters"
},
"sortBy": {
"variant": "light",
"id": "sort-by",
"name": "sort-by",
"label": "Sort by",
"required": true,
"disabled": false,
"selected": "priceDesc",
"options": {
"bestAsc": "Beste Ergebnisse",
"priceAsc": "Preis aufsteigend",
"priceDesc": "Preis absteigend"
},
"choose": "Please choose"
},
"itemsPerPage": {
"variant": "light",
"id": "items-per-page",
"name": "items-per-page",
"label": "Items per page",
"required": true,
"disabled": false,
"selected": "60",
"options": {
"30": "30",
"60": "60",
"120": "120"
},
"choose": "Please choose"
},
"filterView": {
"labels": {
"title": "Ansicht:"
},
"buttons": [
{
"button": {
"name": "list-rows"
},
"context": {
"variant": "icon-regular",
"title": "Listenansicht",
"icon": "list-rows",
"type": "a",
"href": "#"
}
},
{
"button": {
"active": true,
"name": "list-tiles"
},
"context": {
"variant": "icon-regular",
"title": "Kachelansicht",
"icon": "list-tiles",
"type": "a",
"href": "#"
}
}
]
}
}
import './filter-settings.scss';
import FilterSettings, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-listing/components/filter-settings/filter-settings';
export default FilterSettings;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-listing/components/filter-settings/filter-settings";
No notes defined.