Horizontal Filters
Horizontal filters provide an alternative layout for presenting filter options, offering a streamlined and space-efficient approach. This documentation guides you through the process of transforming vertical filters into horizontal filters within Findify's app for Shopify merchants.
Instructions
Step 1: Configure findify-grid-search.liquid
findify-grid-search.liquid
- In the
findify-grid-search.liquid
file, locate thediv#findify-search-main
element. - Add the attribute
data-template='horizontal'
to this element. - Wrap filter and sorting into the
div.findify-filters_horizontal
section.
Example:
<div id="findify-search-main" data-template="horizontal" class="findify-search-main">
<div class="findify-loader-overlay">
{% render 'findify-loader' %}
</div>
<div class="findify-filters_horizontal">
<div id="findify-filters-sidebar" class="findify-filters-sidebar open">
<!-- Vertical Filters Code -->
</div>
<!-- Sorting Block -->
<div>
{% render 'findify-sorting',
options: sort_options,
default: default_sort_by,
selected: sort_by,
is_modal: false
%}
</div>
<!-- End Sorting Block -->
</div>
<!-- Product Grid Section -->
</div>
Step 2: Adjust findify-toolbar-desktop.liquid
findify-toolbar-desktop.liquid
Remove the below sorting block code from the findify-toolbar-desktop.liquid
file.
<div>
{% render 'findify-sorting'
, options: sort_options
, default: default_sort_by
, selected: sort_by
, is_modal: false %}
</div>
Step 3: Update CSS Styles
In the findify-grid.css
file, add the below CSS code.
.findify-search-main[data-template="horizontal"] {
flex-direction: column;
}
In the findify-filter.css
file, add the below CSS code.
/* horizontal filters */
.findify-filters-checkbox-item-value > span,
.findify-filters--checkbox-nested-value > span {
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
}
.price-range-input {
max-width: 45px;
}
@media (min-width: 768px) {
#findify-search-main[data-template="horizontal"] {
width: 100%;
}
#findify-search-main[data-template="horizontal"] .findify-filters-wrapper {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#findify-search-main[data-template="horizontal"]
#shopify-section-findify-filter-group {
width: 210px;
position: relative;
}
#findify-search-main[data-template="horizontal"]
.findify-filters--body-container {
position: absolute;
background: white;
z-index: 10;
top: 100%;
width: 100%;
padding: 14px 0 5px 0;
border-bottom: 1px solid #eee;
}
#findify-search-main[data-template="horizontal"]
.findify-filters--body-wrapper {
max-height: 220px;
}
#findify-search-main[data-template="horizontal"]
.findify-filters--body-wrapper::-webkit-scrollbar {
width: 4px;
}
#findify-search-main[data-template="horizontal"]
.findify-filters--body-wrapper::-webkit-scrollbar-thumb {
background: #000000;
border-radius: 2px;
}
#findify-search-main[data-template="horizontal"] .findify-filters-container {
border-bottom: none;
}
#findify-search-main[data-template="horizontal"] .findify-filter-group {
border-bottom: 1px solid #d7d9d6;
height: 46px;
justify-content: flex-end;
}
.findify-search-header-toolbar .findify-search-header-toolbar-actions {
display: none;
}
.findify-filters_horizontal {
display: flex;
}
#findify-search-main[data-template="horizontal"] .findify-sorting-body {
white-space: nowrap;
}
.findify-search-header-toolbar {
justify-content: center;
margin-bottom: 26px;
}
}
Step 4: Update findify-filter-group.liquid
findify-filter-group.liquid
- Change the
aria-collapsed
attribute from"false"
to"true"
. - Add the class
.findify-filters-container
to the.findify-filter-group
element.
Step 5: Modify findify-filter.js
findify-filter.js
- Add the two selectors
horizontalFilters
andfilterGroup
to theselectors
object.
let selectors = {
...
horizontalFilters: ".findify-filters_horizontal",
filterGroup: ".findify-filter-group",
};
- Update the
handleExpandSpecificFilter
function to ensure proper handling of filter expansions in horizontal mode.
const handleExpandSpecificFilter = () => {
// code
const horizontalContainer = document.querySelector(
selectors.horizontalFilters
);
const assignListenerToFilterHeader = (filterContainer, btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
horizontalContainer
.querySelectorAll(selectors.filterGroup)
.forEach((filter) => {
if (filter !== filterContainer) {
hideFilter(filter);
}
});
// code
});
};
// code
};
- Adjust the
toggleFilterDrawer
function to support horizontal filter display.
const toggleFilterDrawer = () =>
document.querySelector(selectors.filterSection) && toggleDrawer(
"open-left",
true,
document.querySelector(selectors.filterSection)
);
By following these steps and integrating the provided code snippets, you can seamlessly transform vertical filters into horizontal filters, enhancing the usability and aesthetics of your Findify-powered Shopify store.
For further assistance or inquiries, feel free to contact us on [email protected].
Updated 21 days ago