Quick Filters (Best of Content)
Quick filters are an alternative way to display the traditional search facets (checkbox based).This is just example code. It will become obsolete once the relevant CSS and JS are moved to the www theme. Please reference the latest code in the www theme as the source of truth.Important Notes:This is a minimal component with a few CSS classes.JavaScript and js-* classes are required. Example is shown in the code snippet below.
Demo
Twig
Not available in Twig. Please use plain HTML.
HTML
<form>
<div class="c-www-quick-filters">
<div class="c-www-quick-filters__list-wrapper js-www-quick-filters-scroll-wrapper">
<ul class="c-www-quick-filters__list js-www-quick-filters-scroll">
// Render each quick filter as a list item.
<li class="c-www-quick-filters__list-item">
<input type="checkbox" id="filter-id" class="c-www-quick-filters__input">
<label for="filter-id" class="e-bolt-button e-bolt-button--secondary e-bolt-button--small">Filter label</label>
</li>
</ul>
</div>
<div class="c-www-quick-filters__more">
// Assemble "more filters" button and modal here. The modal would contain all possible filters.
// {% include '@bolt-elements-button/button.twig' with {
// content: 'More filters',
// size: 'small',
// hierarchy: 'secondary',
// icon_before: icon_filter,
// attributes: {
// type: 'button',
// 'data-bolt-modal-target': '.js-bolt-modal',
// },
// } only %}
// {% include '@bolt-components-modal/modal.twig' with {
// attributes: {
// class: 'js-bolt-modal',
// },
// ...
// } only %}
</div>
</div>
</form>