diff --git a/assets/findify-filter.css b/assets/findify-filter.css index 52af868..38085a5 100644 --- a/assets/findify-filter.css +++ b/assets/findify-filter.css @@ -1,3 +1,7 @@ + +.findify-search-section.disable_search_input .findify-filters--checkbox-search{ + display: none; +} .findify-filters--range-container { display: flex; margin-top: 10px; @@ -129,6 +133,12 @@ button { } /* SECTION - HEADER & BODY EXPAND */ +.findify-search-section.filters-horizontal .findify-filters-body{ + position: absolute; + z-index: 3; + background: #fff; + width: 100%; +} .findify-filters-body[aria-expanded="false"] { display: none; } @@ -151,7 +161,15 @@ button { width: 260px; position: relative; } - +.findify-filters-wrapper.absolute{ + position: absolute; +} +.findify-filters-wrapper.fixed{ + position: fixed; + top: 0; + z-index: 3; + background: #fff; +} /* FILTERS */ .findify-filters-container { display: flex; @@ -160,6 +178,7 @@ button { } .findify-filter-group { + position: relative; padding-bottom: 5px; border-bottom: 1px solid var(--findify-filters-separator-color); } @@ -378,6 +397,7 @@ button { .findify-filters-sidebar.open { display: flex; + width: 260px } @media (max-width: 768px) { diff --git a/assets/findify-grid.css b/assets/findify-grid.css index 8b2ac21..4d72c83 100644 --- a/assets/findify-grid.css +++ b/assets/findify-grid.css @@ -1,3 +1,34 @@ +.findify-search-section.filters-right .desktop{ + overflow: hidden; +} +.findify-search-section.filters-right .desktop .findify-search-header-toolbar, +.findify-search-section.filters-right .findify-search-main{ + flex-direction: row-reverse; +} +.findify-search-section.filters-right .findify-search-main { + flex-direction: row-reverse; +} +@media (min-width: 768px) { + .findify-search-section.filters-horizontal .findify-search-main{ + flex-wrap: wrap; + } + .findify-search-section.filters-horizontal .findify-filters-sidebar.open{ + width: 100%; + flex-wrap: wrap; + } + .findify-search-section.filters-horizontal .findify-filters-wrapper{ + width: 100%; + flex-direction: row; + flex-wrap: wrap; + max-width: 1100px; + } + .findify-search-section.filters-horizontal #shopify-section-findify-filter-group{ + min-width: 210px; + max-width: 210px; + } +} + + .findify-initialization { display: flex; min-height: 800px; @@ -116,6 +147,9 @@ b { display: none; } + .findify-search-section.filters-drawer .findify-search-header.mobile{ + display: block; + } .findify-search-header.mobile { display: none; } diff --git a/assets/findify-sidebar-mobile.css b/assets/findify-sidebar-mobile.css index 00b7b68..a7936ee 100644 --- a/assets/findify-sidebar-mobile.css +++ b/assets/findify-sidebar-mobile.css @@ -1,5 +1,5 @@ @media (min-width: 767px) { - #findify-modal-toggler, + /* #findify-modal-toggler, */ .findify-filters-sidebar, .findify-modal-header, .findify-search-header-breadcrumb, @@ -8,7 +8,12 @@ } } -@media (max-width: 768px) { +.filters-drawer .findify-modal .findify-filters-wrapper, +.filters-drawer .findify-modal .findify-filters-container{ + width: 100%; +} + +.findify-search-section.filters-drawer{ .no-scroll { overflow: hidden; } @@ -17,7 +22,7 @@ background: #fff; overflow-y: scroll; height: 100vh; - width: 100%; + width: 30%; position: fixed; z-index: 10000; top: 0; @@ -81,7 +86,84 @@ background: #5396ed; color: #fff; text-transform: uppercase; - position: sticky; + position: absolute; bottom: 0; } } +@media (max-width: 768px){ + .no-scroll { + overflow: hidden; + } + + .findify-modal { + background: #fff; + overflow-y: scroll; + height: 100vh; + width: 100% !important; + position: fixed; + z-index: 10000; + top: 0; + } + + .left { + left: -100%; + } + + .right { + right: -100%; + } + + .findify-modal.animated-left { + transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1); + } + + .findify-modal.animated-right { + transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1); + } + + .findify-modal.animated { + transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1); + } + + .findify-modal.open-left { + left: 0; + } + + .findify-modal.open-right { + right: 0; + } + + .findify-modal-header { + justify-content: space-between; + background: var(--findify-sidebar-header-background-color); + padding: 20px; + margin-bottom: 0px; + width: 100%; + display: flex; + align-items: center; + color: var(--findify-text-inverse-color); + height: 50px; + } + + .findify-modal-header-title { + position: relative; + left: 45%; + } + + .findify-modal-header svg line { + stroke: #fff; + } + + .findify-modal-footer { + padding: 20px; + width: 100%; + height: 50px; + display: flex; + justify-content: center; + background: #5396ed; + color: #fff; + text-transform: uppercase; + position: absolute; + bottom: 0; + } +} \ No newline at end of file diff --git a/sections/findify-filter-group.liquid b/sections/findify-filter-group.liquid index c691ded..6352bed 100644 --- a/sections/findify-filter-group.liquid +++ b/sections/findify-filter-group.liquid @@ -86,15 +86,62 @@ const element_id = "{{ element_id }}"; const filterGroupElement = document.getElementById(element_id); const [header, body] = filterGroupElement.querySelectorAll('div'); + const isOneFilterOpen = document.querySelector('.findify-one-filter-open'); const headerClickHandler = (e) => { e.preventDefault(); - const isOpen = body.getAttribute("aria-expanded") === "true"; - body.setAttribute("aria-expanded", (!isOpen).toString()); + + if(isOneFilterOpen){ + const isExpanded = e.target + .parentNode + .parentNode + .querySelector('.findify-filters-body')?.getAttribute('aria-expanded'); + if(isExpanded == 'false') + document.querySelector('#findify-filters [aria-expanded="true"]')?.setAttribute('aria-expanded', 'false'); + } + + const isOpen = body.getAttribute("aria-expanded") === "true"; + body.setAttribute("aria-expanded", (!isOpen).toString()); }; header.addEventListener("click", headerClickHandler); }; + + const filtersPosition = document.querySelector('#findify-filters').getBoundingClientRect().top; + const filterClass = document.querySelector('#findify-filters').className; + const searchWrapperTop = document.querySelector('.findify-search-container').getBoundingClientRect().x; + const isHorizontal = document.querySelector('.findify-search-section.filters-horizontal'); + + const fixedFilters = () => { + const scrollPosition = window.scrollY; + const classNames = document.querySelector('#findify-filters').className; + const searchWrapperHeight = document.querySelector('.findify-search-main').offsetHeight; + const filtersWrapperHeight = document.querySelector('#findify-filters').offsetHeight; + + if(scrollPosition >= filtersPosition && !classNames.includes('fixed')){ + document.querySelector('#findify-filters').className = classNames?.replace('absolute', ''); + document.querySelector('#findify-filters').style.top = `0px`; + document.querySelector('#findify-filters').className += ' fixed'; + } + + if(scrollPosition > (searchWrapperHeight - 50) && !isHorizontal){ + + document.querySelector('#findify-filters').className = filterClass; + document.querySelector('#findify-filters').className += ' absolute'; + document.querySelector('#findify-filters').style.top = `${searchWrapperHeight - filtersWrapperHeight}px`; + } + + if( (scrollPosition - 80) < searchWrapperTop) + document.querySelector('#findify-filters').className = classNames.replace('fixed', ''); + } + + const isSticky = document.querySelector('.findify-filters-sticky'); + if(isSticky) { + window.addEventListener('scroll', fixedFilters); + document.querySelectorAll('#shopify-section-findify-filter-group').forEach( item => { + item.addEventListener('click', fixedFilters); + }) + } collapseFilter(); diff --git a/sections/findify-grid-collection.liquid b/sections/findify-grid-collection.liquid index 70bc692..3e15075 100644 --- a/sections/findify-grid-collection.liquid +++ b/sections/findify-grid-collection.liquid @@ -4,9 +4,29 @@ {% include 'findify-grid-connector' %} {% assign findify_filters_component_id = 'findify-filters-sidebar' %} -