Skip to content

Commit

Permalink
Merge pull request #119 from findify/FI-8180-liquid-alternative-grid-…
Browse files Browse the repository at this point in the history 
…toggle

added toggler
  • Loading branch information
@wolff95
wolff95 authored Oct 21, 2024
2 parents 3124c6a + b2f50e4 commit 24cbeb6
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 37 deletions.
36 changes: 28 additions & 8 deletions assets/findify-grid.css
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
.findify-search-section.findify-filters-right .findify-desktop{
.findify-search-section.findify-filters-right .findify-desktop {
overflow: hidden;
}
.findify-search-section.findify-filters-right .findify-desktop .findify-search-header-toolbar,
.findify-search-section.findify-filters-right .findify-search-main{
.findify-search-section.findify-filters-right .findify-search-main {
flex-direction: row-reverse;
}
.findify-search-section.findify-filters-right .findify-search-main {
flex-direction: row-reverse;
}
@media (min-width: 768px) {
.findify-search-section.findify-filters-horizontal .findify-search-main{
.findify-search-section.findify-filters-horizontal .findify-search-main {
flex-wrap: wrap;
}
.findify-search-section.findify-filters-horizontal .findify-filters-sidebar.findify-open{
.findify-search-section.findify-filters-horizontal .findify-filters-sidebar.findify-open {
width: 100%;
flex-wrap: wrap;
}
.findify-search-section.findify-filters-horizontal .findify-filters-wrapper{
.findify-search-section.findify-filters-horizontal .findify-filters-wrapper {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
max-width: 1100px;
}
.findify-search-section.findify-filters-horizontal #shopify-section-findify-filter-group{
.findify-search-section.findify-filters-horizontal #shopify-section-findify-filter-group {
min-width: 220px;
max-width: 220px;
}
}


.findify-initialization {
display: flex;
min-height: 800px;
Expand Down Expand Up @@ -147,7 +146,7 @@ b {
display: none;
}

.findify-search-section.findify-filters-drawer .findify-search-header.findify-mobile{
.findify-search-section.findify-filters-drawer .findify-search-header.findify-mobile {
display: block;
}
.findify-search-header.findify-mobile {
Expand Down Expand Up @@ -185,3 +184,24 @@ b {
/* grid-template-columns: 1fr 1fr; */
}
}
/* grid toggler */
.findify-grid-togglers {
display: flex;
margin-right: 10px;
gap: 12px;
}
.findify-grid-toggler.findify-active rect {
fill: #4e4e4e;
}
.findify-toolbar-block {
display: flex;
}
.findify-mobile {
.findify-toolbar-block {
justify-content: space-between;
}
.findify-grid-toggler svg {
width: 15px;
height: 15px;
}
}
44 changes: 31 additions & 13 deletions sections/findify-grid-collection.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@
{%- assign all_filters_collapsed = query_parameters | split: 'all_filters_collapsed:' | last | split: '|' | first | split: '&' | first -%}
{%- assign sticky_filters = query_parameters | split: 'sticky_filters:' | last | split: '|' | first | split: '&' | first -%}
{%- assign disable_search_input = query_parameters | split: 'disable_search_input:' | last | split: '|' | first | split: '&' | first -%}

{%- assign use_grid_toggler_on_desktop = query_parameters | split: 'use_grid_toggler_on_desktop:' | last | split: '|' | first | split: '&' | first -%}
{%- assign use_grid_toggler_on_mobile = query_parameters | split: 'use_grid_toggler_on_mobile:' | last | split: '|' | first | split: '&' | first -%}
{% if mobile_products_per_view == '1' %}
{% assign mobile_products_per_view_alt = '2' %}
{% else %}
{% assign mobile_products_per_view_alt = '1' %}
{% endif %}
<div
id="findify-search"
class="
Expand Down Expand Up @@ -39,6 +45,9 @@
, active_filters: active_filters
, color_layout: color_layout
, filter_component_id: findify_filters_component_id
, use_grid_toggler: use_grid_toggler_on_desktop
, products_per_view_alt: desktop_products_per_view_alt
, products_per_view: desktop_products_per_view
%}
{% endif %}
{% render 'findify-toolbar-mobile'
Expand All @@ -52,6 +61,9 @@
, sort_by: sort_by
, active_filters: active_filters
, filter_component_id: findify_filters_component_id
, use_grid_toggler: use_grid_toggler_on_mobile
, products_per_view: mobile_products_per_view
, products_per_view_alt: mobile_products_per_view_alt
%}
{% if products_count > 0 %}
<div id="findify-search-main" class="findify-search-main">
Expand Down Expand Up @@ -81,7 +93,7 @@
, text: 'findify.pagination.load_previous'
, hide: hide_load_prev %}</div>
{% endif %}
<div id="findify-product-grid" class="findify-product-list">
<div id="findify-product-grid" class="findify-product-list" data-template="main">
{% comment %}
This element #findify-product-grid will be populated with rendered html from sections/findify-products.liquid
{% endcomment %}
Expand Down Expand Up @@ -119,17 +131,23 @@
{% endif %}
</div>
<style>
@media (min-width: 768px) {
#findify-product-grid.findify-product-list {
grid-template-columns: repeat({{desktop_products_per_view}}, minmax(180px, 1fr));
}
}
@media (max-width: 576px) {
#findify-product-grid.findify-product-list {
grid-template-columns: repeat({{mobile_products_per_view}}, minmax(180px, 1fr));
}
}
</style>
@media (min-width: 768px) {
#findify-product-grid.findify-product-list[data-template='main'] {
grid-template-columns: repeat({{desktop_products_per_view}}, minmax(180px, 1fr));
}
#findify-product-grid.findify-product-list[data-template='alt'] {
grid-template-columns: repeat({{desktop_products_per_view_alt}}, minmax(180px, 1fr));
}
}
@media (max-width: 576px) {
#findify-product-grid.findify-product-list[data-template='main'] {
grid-template-columns: repeat({{mobile_products_per_view}}, minmax(180px, 1fr));
}
#findify-product-grid.findify-product-list[data-template='alt'] {
grid-template-columns: repeat({{mobile_products_per_view_alt}}, minmax(180px, 1fr));
}
}
</style>
<script>
if("{{ use_lazy_loading_pagination }}" == "true") {
initFindifyLazyLoadingPagination("{{lazy_loading_pagination_threshold}}");
Expand Down
26 changes: 22 additions & 4 deletions sections/findify-grid-search.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,14 @@
{%- assign all_filters_collapsed = query_parameters | split: 'all_filters_collapsed:' | last | split: '|' | first | split: '&' | first -%}
{%- assign sticky_filters = query_parameters | split: 'sticky_filters:' | last | split: '|' | first | split: '&' | first -%}
{%- assign disable_search_input = query_parameters | split: 'disable_search_input:' | last | split: '|' | first | split: '&' | first -%}
{%- assign use_grid_toggler_on_desktop = query_parameters | split: 'use_grid_toggler_on_desktop:' | last | split: '|' | first | split: '&' | first -%}
{%- assign use_grid_toggler_on_mobile = query_parameters | split: 'use_grid_toggler_on_mobile:' | last | split: '|' | first | split: '&' | first -%}


{% if mobile_products_per_view == '1' %}
{% assign mobile_products_per_view_alt = '2' %}
{% else %}
{% assign mobile_products_per_view_alt = '1' %}
{% endif %}
{% comment %} Content integration configuration {% endcomment %}
{%- assign use_content_integration = query_parameters | split: 'use_content_integration:' | last | split: '&' | first -%}
{% if use_content_integration == 'false' or tabs[0] == 'none' %}
Expand Down Expand Up @@ -72,6 +78,9 @@
, active_filters: active_filters
, color_layout: color_layout
, filter_component_id: findify_filters_component_id
, use_grid_toggler: use_grid_toggler_on_desktop
, products_per_view_alt: desktop_products_per_view_alt
, products_per_view: desktop_products_per_view
%}
{% endif %}
{% render 'findify-toolbar-mobile'
Expand All @@ -84,6 +93,9 @@
, sort_by: sort_by
, active_filters: active_filters
, filter_component_id: findify_filters_component_id
, use_grid_toggler: use_grid_toggler_on_mobile
, products_per_view: mobile_products_per_view
, products_per_view_alt: mobile_products_per_view_alt
%}

<div id="findify-search-main" class="findify-search-main">
Expand Down Expand Up @@ -114,7 +126,7 @@
, hide: hide_load_prev %}
</div>
{% endif %}
<div id="findify-product-grid" class="findify-product-list">
<div id="findify-product-grid" class="findify-product-list" data-template="main">
{% comment %}
This element #findify-product-grid will be replaced with rendered html from sections/findify-products
{% endcomment %}
Expand Down Expand Up @@ -170,14 +182,20 @@

<style>
@media (min-width: 768px) {
#findify-product-grid.findify-product-list {
#findify-product-grid.findify-product-list[data-template='main'] {
grid-template-columns: repeat({{desktop_products_per_view}}, minmax(180px, 1fr));
}
#findify-product-grid.findify-product-list[data-template='alt'] {
grid-template-columns: repeat({{desktop_products_per_view_alt}}, minmax(180px, 1fr));
}
}
@media (max-width: 576px) {
#findify-product-grid.findify-product-list {
#findify-product-grid.findify-product-list[data-template='main'] {
grid-template-columns: repeat({{mobile_products_per_view}}, minmax(180px, 1fr));
}
#findify-product-grid.findify-product-list[data-template='alt'] {
grid-template-columns: repeat({{mobile_products_per_view_alt}}, minmax(180px, 1fr));
}
}
</style>

Expand Down
1 change: 1 addition & 0 deletions snippets/findify-grid-connector.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
# Grid Settings and configurations
assign desktop_products_per_view = query_parameters | split: 'desktop_products_per_view:' | last | split: '|' | first | split: '&' | first
assign mobile_products_per_view = query_parameters | split: 'mobile_products_per_view:' | last | split: '|' | first | split: '&' | first
assign desktop_products_per_view_alt = query_parameters | split: 'desktop_products_per_view_alt:' | last | split: '|' | first | split: '&' | first

assign settingsObj = page_url | split: 'settingsObj=' | last | split: '&' | first

Expand Down
57 changes: 57 additions & 0 deletions snippets/findify-grid-toggler.liquid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{% assign container_selector = 'findify-grid-togglers' %}
{% assign grid_selector = 'findify-grid-toggler' %}
{% assign products_per_view = products_per_view | plus: 0 %}
{% assign products_per_view_alt = products_per_view_alt | plus: 0 %}

<div class="{{container_selector}}">
<button
class="{{grid_selector}}"
data-template="{% if products_per_view > products_per_view_alt %}alt{% else %}main{% endif %}"
>
{% if is_mobile %}
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.5" width="14" height="14" fill="#E2E2E2"/>
</svg>

{% else %}
<svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="9.8" height="21" fill="#E2E2E2"/>
<rect x="11.9004" width="9.8" height="21" fill="#E2E2E2"/>
</svg>
{% endif %}
</button>
<button
class="{{grid_selector}}"
data-template="{% if products_per_view > products_per_view_alt %}main{% else %}alt{% endif %}"
>
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.400391" width="9.45" height="9.45" fill="#E2E2E2"/>
<rect x="11.9512" width="9.45" height="9.45" fill="#E2E2E2"/>
<rect x="0.400391" y="11.5498" width="9.45" height="9.45" fill="#E2E2E2"/>
<rect x="11.9512" y="11.5498" width="9.45" height="9.45" fill="#E2E2E2"/>
</svg>
</button>
</div>
<script>
const containerElement = document.querySelector(`.{{parent_selector}} .{{container_selector}}`);
const buttons = containerElement.querySelectorAll('.{{grid_selector}}');
const setProductTemplate = () => {
const template = localStorage.getItem('findify-grid-template') || 'main';
console.log(template);
containerElement.querySelector(`[data-template='${template}']`)?.classList.add('findify-active');
document.getElementById('findify-product-grid').setAttribute('data-template', template);
};
buttons.forEach((btn) => {
btn.addEventListener('click', (e) => {
localStorage.setItem('findify-grid-template', btn.dataset.template);
document.getElementById('findify-product-grid').setAttribute('data-template', btn.dataset.template);
buttons.forEach((i) => i.classList.remove('findify-active'));
btn.classList.add('findify-active');
});
});
setProductTemplate();
</script>
15 changes: 8 additions & 7 deletions snippets/findify-toolbar-desktop.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@
, query_type: query_type
%}

<div>
{% render 'findify-sorting',
options: sort_options,
default: default_sort_by,
selected: sort_by,
is_modal: false
%}
<div class="findify-toolbar-block">
{% if use_grid_toggler == 'true' %}
{% render 'findify-grid-toggler' parent_selector: 'findify-desktop'
, products_per_view_alt: products_per_view_alt
, products_per_view: products_per_view
%}
{% endif %}
{% render 'findify-sorting', options: sort_options, default: default_sort_by, selected: sort_by, is_modal: false %}
</div>
</div>
{% if active_filters != 'none' %}
Expand Down
19 changes: 14 additions & 5 deletions snippets/findify-toolbar-mobile.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,20 @@
%}

<div class="findify-search-header findify-mobile">
{%
render 'findify-query' terms: terms, results_count: results_count, is_collection: is_collection, , terms: terms
, corrected_q: corrected_q
, query_type: query_type
%}
<div class="findify-toolbar-block">
{%
render 'findify-query' terms: terms, results_count: results_count, is_collection: is_collection, , terms: terms
, corrected_q: corrected_q
, query_type: query_type
%}
{% if use_grid_toggler == 'true' %}
{% render 'findify-grid-toggler' is_mobile: true
, parent_selector: 'findify-mobile'
, products_per_view_alt: products_per_view_alt
, products_per_view: products_per_view
%}
{% endif %}
</div>
<div class="findify-search-header-toolbar">
<div class="findify-search-header-toolbar-actions">
<button
Expand Down

0 comments on commit 24cbeb6

Please sign in to comment.