...
| Code Block |
|---|
@import 'components/button/mixin';
.actions-toolbar {
.primary {
button {
@include button(
$type: 'extra-cta',
$icon_pos: $button_default-icon-pos
);
}
}
} |
Filters - make filters horizontal
The optional scenario for magesuite filters is to set them horizontally, above the toolbar and products.
Storefront
...
In order to introduce horizontal filters the layout must be changed to 1column and left column must be placed below or under the main column. Add the following changes in XML files:
src/Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml
| Code Block |
|---|
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column">
<body>
<move element="catalog.leftnav" destination="main" before="-" />
</body>
</page> |
src/Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml
| Code Block |
|---|
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column">
<body>
<move element="catalog.leftnav" destination="main" before="-" />
</body>
</page> |
Although the behavior (vertical/horizontal position) of filters basically is set by page layout, it is also possible to force horizontal or vertical styling for any page layout. Check force_sidebar_filters_style and force_horizontal_filters_style variables in etc/view/xml file in order to learn more.
| Code Block |
|---|
<!-- If you want to have 1column-layout but still keep default filters styling (the one from sidebar) you can set this argument's value to 'true' -->
<argument name="force_sidebar_filters_style" xsi:type="boolean">false</argument>
<!-- If you want to have any other layout than '1column-layout' but still keep horizontal filters styling you can set this argument's value to 'true' -->
<argument name="force_horizontal_filters_style" xsi:type="boolean">false</argument> |
Styling
In theme-creativeshop/src/components/aftersearch-nav/aftersearch-nav.scss there are plenty of variables that can help with styling of horizontal filters.
Pay attention to the below variables, that help to set the desired number of rows and columns on tablet, laptop, and desktop breakpoint
| Code Block |
|---|
$aftersearch-nav--horizontal_cols: (
tablet: 4,
laptop: 5,
desktop: 6,
) !default;
$aftersearch-nav--horizontal_rows: (
tablet: 1,
laptop: 1,
desktop: 1,
) !default; |
Filters - move filters into offcanvas
The common design pattern is to move the filter into offcanvas on mobile. theme-creativeshop offers a built-in possibility to move filters into offcanvas on mobile and/or desktop. (However, desktop offcanvas filters are very rarely used)
Storefront
...
| View file | ||
|---|---|---|
|
Display offcanvas toggle button and enable offcanvas filters:
...