From 47fe26de1f67a771a596d24159e1cf03511aada2 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 2 Mar 2022 15:23:54 -0500 Subject: [PATCH 001/176] Create vertical filter --- assets/component-facets-vertical.css | 189 +++++++ assets/component-facets.css | 63 +++ locales/en.default.schema.json | 9 + sections/main-collection-product-grid.liquid | 24 +- snippets/facets-vertical.liquid | 508 +++++++++++++++++++ snippets/facets.liquid | 28 +- 6 files changed, 814 insertions(+), 7 deletions(-) create mode 100644 assets/component-facets-vertical.css create mode 100644 snippets/facets-vertical.liquid diff --git a/assets/component-facets-vertical.css b/assets/component-facets-vertical.css new file mode 100644 index 00000000000..df355a0f08e --- /dev/null +++ b/assets/component-facets-vertical.css @@ -0,0 +1,189 @@ +.facets-vertical { + display: flex; +} + +.facets-vertical-container { +width: 33%; +} + +#ProductGridContainer { + width: 66%; +} + +.facets__item label, +.facets__item input[type='checkbox'] { + cursor: pointer; +} + +.facet-checkbox { + padding: 1rem 2rem 1rem 0; + flex-grow: 1; + position: relative; + font-size: 1.4rem; + display: flex; + word-break: break-word; +} + +.facet-checkbox input[type='checkbox'] { + position: absolute; + opacity: 1; + width: 1.6rem; + height: 1.6rem; + top: 0.7rem; + left: -0.4rem; + z-index: -1; + appearance: none; + -webkit-appearance: none; +} + +.facet-checkbox > svg { + background-color: rgb(var(--color-background)); + margin-right: 1.2rem; + flex-shrink: 0; +} + +.facet-checkbox .icon-checkmark { + visibility: hidden; + position: absolute; + left: 0.3rem; + z-index: 5; + top: 1.4rem; +} + +.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark { + visibility: visible; +} + +.facets__heading { +display: block; +color: rgba(var(--color-foreground), 0.85); +font-size: 1.4rem; +margin: -1.5rem 2rem 0 0; +} + +.disclosure-has-popup[open] > summary::before { + content: none; +} + +.active-facets { + display: flex; + flex-wrap: wrap; + width: 100%; + grid-column: 1 / -1; + grid-row: 2; + margin-top: -0.5rem; + } + + .active-facets__button { + display: block; + margin-right: 1.5rem; + margin-top: 1.5rem; + padding-left: 0.2rem; + padding-right: 0.2rem; + text-decoration: none; + } + +span.active-facets__button-inner { + color: rgb(var(--color-foreground)); + box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground)); + border-radius: 2.6rem; + font-size: 1rem; + min-height: 0; + min-width: 0; + padding: 0.5rem 1rem; + display: flex; + align-items: stretch; + } + + span.active-facets__button-inner:before, + span.active-facets__button-inner:after { + display: none; + } + + .facets__summary { + color: rgba(var(--color-foreground), 0.75); + font-size: 1.4rem; + margin-bottom: 1.5rem; + padding: 0 1.75rem 0 0; + } + + .facet-filters__field { + align-items: center; + display: flex; + flex-grow: 1; + justify-content: flex-end; + } + + .facet-filters__field .select { + width: auto; + } + + .facet-filters__field .select:after, + .facet-filters__field .select:before, + .mobile-facets__sort .select:after, + .mobile-facets__sort .select:before { + content: none; + } + + .facet-filters__field .select__select, + .mobile-facets__sort .select__select { + border-radius: 0; + min-width: auto; + min-height: auto; + transition: none; + } + + .facet-filters { + align-items: flex-start; + display: flex; + grid-column: 2; + grid-row: 1; + padding-left: 2.5rem; + } + + @media screen and (min-width: 990px) { + .facet-filters { + padding-left: 3rem; + } + } + + + .facet-filters button { + margin-left: 2.5rem; + } + + .facet-filters__sort { + background-color: transparent; + border: 0; + border-radius: 0; + font-size: 1.4rem; + height: auto; + line-height: calc(1 + 0.5 / var(--font-body-scale)); + margin: 0; + padding-left: 0; + padding-right: 1.75rem; + } + + .facet-filters__sort + .icon-caret { + right: 0; + } + + @media screen and (forced-colors: active) { + .facet-filters__sort { + border: none; + } + } + + .facet-filters__sort, + .facet-filters__sort:hover { + box-shadow: none; + filter: none; + transition: none; + } + + .facet-filters__label { + display: block; + color: var(--color-foreground-85); + font-size: 1.4rem; + margin: 0 2rem 0 0; + } \ No newline at end of file diff --git a/assets/component-facets.css b/assets/component-facets.css index 8b87a67e658..3d891a11991 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -903,3 +903,66 @@ input.mobile-facets__checkbox { .product-count__text.loading + .loading-overlay__spinner { display: block; } + +@media screen and (min-width: 990px) { +.facets-vertical { + display: flex; +} +} + +@media screen and (min-width: 990px) { +.facets-vertical-container { +width: 33%; +} +} + +@media screen and (min-width: 990px) { +#ProductGridContainer { + width: 66%; +} +} + +.facets-vertical .disclosure-has-popup[open] > summary::before { + content: none; +} + +.facets-vertical .facets__display { + position: initial; + border: none; + max-height: none; +} + +.facets-vertical .facet-filters { + padding-left: 0; +} + +.facets-vertical .facets__form { + display: flex; + flex-direction: column; + width: 35rem; +} + +.facets-vertical .facet-filters__field { + justify-content: flex-start; +} + +.facets-vertical .facets__wrapper { + flex-direction: column; + align-items: initial; + align-self: initial; + flex-wrap: initial; +} + +.facets-vertical .facets__heading { + margin: 0; +} + +.facets-vertical .facets__header, +.facets-vertical .facets__list { + padding-left: 0; +} + +.facets-vertical .facets__disclosure { + margin-right: 0; +} + diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index f34e1e94812..e9a67f77f3e 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1366,6 +1366,15 @@ "label": "Enable filtering", "info": "Customize [filters](/admin/menus)" }, + "filter_type": { + "label": "Filter type", + "options__1": { + "label": "Vertical" + }, + "options__2": { + "label": "Horizontal" + } + }, "enable_sorting": { "label": "Enable sorting" }, diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index e520a6562ac..b6237dd19af 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -26,16 +26,16 @@ } {%- endstyle -%} -
+
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {{ 'component-facets.css' | asset_url | stylesheet_tag }} -
- {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %} +
+ {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %}
{%- endif -%} - +
{%- paginate collection.products by section.settings.products_per_page -%} {%- if collection.products.size == 0 -%} @@ -168,6 +168,22 @@ "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label", "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info" }, + { + "type": "select", + "id": "filter_type", + "options": [ + { + "value": "vertical", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label" + }, + { + "value": "horizontal", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label" + } + ], + "default": "horizontal", + "label": "t:sections.main-collection-product-grid.settings.filter_type.label" + }, { "type": "checkbox", "id": "enable_sorting", diff --git a/snippets/facets-vertical.liquid b/snippets/facets-vertical.liquid new file mode 100644 index 00000000000..b9e0ae69318 --- /dev/null +++ b/snippets/facets-vertical.liquid @@ -0,0 +1,508 @@ +{% comment %} + Renders facets (filtering and sorting) + + Accepts: + - results: {Object} Collection or Search object + - enable_filtering: {Boolean} Show filtering when true + - enable_sorting: {Boolean} Show sorting when true + - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true + + Usage: + {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %} +{% endcomment %} + +{%- liquid + assign sort_by = results.sort_by | default: results.default_sort_by + assign total_active_values = 0 + if results.url + assign results_url = results.url + else + assign terms = results.terms | escape + assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by + endif + -%} + +
+ {%- unless collapse_on_larger_devices -%} + +
+ {%- if enable_sorting -%} +
+
+

+ +

+
+ {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ + +
+ {%- endif -%} + +
+

+ + {%- if results.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: results.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} + {%- endif -%} + +

+ +
+ + {%- if results.terms -%} + + + {%- endif -%} + + {% if enable_filtering %} +
+ {%- unless results.filters == empty -%} +

{{ 'products.facets.filter_by_label' | t }}

+ {%- endunless -%} + + {%- for filter in results.filters -%} + {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%} + {% case filter.type %} + {% when 'list' %} +
+ +
+ {{ filter.label | escape }} + {% render 'icon-caret' %} +
+ +
+
+ {{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} + + + {{ 'products.facets.reset' | t }} + + +
+ +
    + {%- for value in filter.values -%} +
  • + +
    • + {%- endfor -%} +
+
+
+ {% when 'price_range' %} + {% liquid + assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ',' + assign uses_comma_decimals = false + if currencies_using_comma_decimals contains cart.currency.iso_code + assign uses_comma_decimals = true + endif + %} +
+ +
+ {{ filter.label | escape }} + {% render 'icon-caret' %} +
+ +
+
+ {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%} + {{ "products.facets.max_price" | t: price: max_price_amount }} + + + {{ 'products.facets.reset' | t }} + + +
+ + {{ cart.currency.symbol }} +
+ + +
+ {{ cart.currency.symbol }} +
+ + +
+ +
+
+ {% endcase %} + {%- endfor -%} + +
+ +
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} + + + + {{ value.label | escape }} + {% render 'icon-close-small' %} + + + + + {%- endfor -%} + {% if filter.type == "price_range" %} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} + {% endif %} + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+ {% endif %} + + {% if results.current_vendor or results.current_type %} + + {% endif %} + +
+ + {%- endunless -%} + + +
+ + + {% render 'icon-filter' %} + + {%- if enable_filtering and enable_sorting -%} + {{ 'products.facets.filter_and_sort' | t }} + {%- elsif enable_filtering -%} + {{ 'products.facets.filter_button' | t }} + {%- elsif enable_sorting -%} + {{ 'products.facets.sort_button' | t }} + {%- endif -%} + + + {%- render 'icon-close' -%} + + +
+
+
+
+

+ {%- if enable_filtering and enable_sorting -%} + {{ 'products.facets.filter_and_sort' | t }} + {%- elsif enable_filtering -%} + {{ 'products.facets.filter_button' | t }} + {%- elsif enable_sorting -%} + {{ 'products.facets.sort_button' | t }} + {%- endif -%} +

+

+ {%- if results.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: results.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} + {%- endif -%} +

+
+
+
+ {%- for filter in results.filters -%} + {% case filter.type %} + {% when 'list' %} +
+ +
+ {{ filter.label | escape }} + {% render 'icon-arrow' %} + +
+ +
+ +
    + {%- for value in filter.values -%} +
  • + +
    • + {%- endfor -%} +
+ +
+ + {{ 'products.facets.clear' | t }} + + + +
+
+
+ {% when 'price_range' %} +
+ +
+ {{ filter.label | escape }} + {% render 'icon-arrow' %} + +
+ +
+ + +

{{ "products.facets.max_price" | t: price: max_price_amount }}

+ + + {{ cart.currency.symbol }} +
+ + +
+ + {{ cart.currency.symbol }} +
+ + +
+ +
+ + {{ 'products.facets.clear' | t }} + + + +
+
+
+ {% endcase %} + {%- endfor -%} + + {%- if enable_sorting -%} +
+
+
+ +
+ + {% render 'icon-caret' %} +
+
+
+
+ {%- endif -%} + +
+ + {{ 'products.facets.clear_all' | t }} + + + +
+
+ + {% if results.current_vendor or results.current_type %} + + {% endif %} + + {%- if results.terms -%} + + + {%- endif -%} +
+
+ +
+ + +
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} + + + + {{ value.label | escape }} + {% render 'icon-close-small' %} + + + + + {%- endfor -%} + + {%- if filter.type == "price_range" -%} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} + {%- endif -%} + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+
+

+ + {%- if results.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: results.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} + {%- endif -%} + +

+ +
+
\ No newline at end of file diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 74f5083aa03..25a69e7ac2b 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -6,9 +6,10 @@ - enable_filtering: {Boolean} Show filtering when true - enable_sorting: {Boolean} Show sorting when true - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true + - filter_type: {String} Type of filter Usage: - {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %} + {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false, filter_type: 'vertical' %} {% endcomment %} {%- liquid @@ -26,7 +27,28 @@ {%- unless collapse_on_larger_devices -%}
- + {%- if enable_sorting and filter_type == 'vertical' -%} +
+
+

+ +

+
+ {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ + +
+ {%- endif -%} {%- if results.terms -%} @@ -205,7 +227,7 @@ {% endif %} - {%- if enable_sorting -%} + {%- if enable_sorting and filter_type == 'horizontal' -%}

From 9d964431ba9af278aff83f92246d8a5d9f9ce9ab Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 2 Mar 2022 15:26:20 -0500 Subject: [PATCH 002/176] remove unused file --- assets/component-facets-vertical.css | 189 ---------- snippets/facets-vertical.liquid | 508 --------------------------- 2 files changed, 697 deletions(-) delete mode 100644 assets/component-facets-vertical.css delete mode 100644 snippets/facets-vertical.liquid diff --git a/assets/component-facets-vertical.css b/assets/component-facets-vertical.css deleted file mode 100644 index df355a0f08e..00000000000 --- a/assets/component-facets-vertical.css +++ /dev/null @@ -1,189 +0,0 @@ -.facets-vertical { - display: flex; -} - -.facets-vertical-container { -width: 33%; -} - -#ProductGridContainer { - width: 66%; -} - -.facets__item label, -.facets__item input[type='checkbox'] { - cursor: pointer; -} - -.facet-checkbox { - padding: 1rem 2rem 1rem 0; - flex-grow: 1; - position: relative; - font-size: 1.4rem; - display: flex; - word-break: break-word; -} - -.facet-checkbox input[type='checkbox'] { - position: absolute; - opacity: 1; - width: 1.6rem; - height: 1.6rem; - top: 0.7rem; - left: -0.4rem; - z-index: -1; - appearance: none; - -webkit-appearance: none; -} - -.facet-checkbox > svg { - background-color: rgb(var(--color-background)); - margin-right: 1.2rem; - flex-shrink: 0; -} - -.facet-checkbox .icon-checkmark { - visibility: hidden; - position: absolute; - left: 0.3rem; - z-index: 5; - top: 1.4rem; -} - -.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark { - visibility: visible; -} - -.facets__heading { -display: block; -color: rgba(var(--color-foreground), 0.85); -font-size: 1.4rem; -margin: -1.5rem 2rem 0 0; -} - -.disclosure-has-popup[open] > summary::before { - content: none; -} - -.active-facets { - display: flex; - flex-wrap: wrap; - width: 100%; - grid-column: 1 / -1; - grid-row: 2; - margin-top: -0.5rem; - } - - .active-facets__button { - display: block; - margin-right: 1.5rem; - margin-top: 1.5rem; - padding-left: 0.2rem; - padding-right: 0.2rem; - text-decoration: none; - } - -span.active-facets__button-inner { - color: rgb(var(--color-foreground)); - box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground)); - border-radius: 2.6rem; - font-size: 1rem; - min-height: 0; - min-width: 0; - padding: 0.5rem 1rem; - display: flex; - align-items: stretch; - } - - span.active-facets__button-inner:before, - span.active-facets__button-inner:after { - display: none; - } - - .facets__summary { - color: rgba(var(--color-foreground), 0.75); - font-size: 1.4rem; - margin-bottom: 1.5rem; - padding: 0 1.75rem 0 0; - } - - .facet-filters__field { - align-items: center; - display: flex; - flex-grow: 1; - justify-content: flex-end; - } - - .facet-filters__field .select { - width: auto; - } - - .facet-filters__field .select:after, - .facet-filters__field .select:before, - .mobile-facets__sort .select:after, - .mobile-facets__sort .select:before { - content: none; - } - - .facet-filters__field .select__select, - .mobile-facets__sort .select__select { - border-radius: 0; - min-width: auto; - min-height: auto; - transition: none; - } - - .facet-filters { - align-items: flex-start; - display: flex; - grid-column: 2; - grid-row: 1; - padding-left: 2.5rem; - } - - @media screen and (min-width: 990px) { - .facet-filters { - padding-left: 3rem; - } - } - - - .facet-filters button { - margin-left: 2.5rem; - } - - .facet-filters__sort { - background-color: transparent; - border: 0; - border-radius: 0; - font-size: 1.4rem; - height: auto; - line-height: calc(1 + 0.5 / var(--font-body-scale)); - margin: 0; - padding-left: 0; - padding-right: 1.75rem; - } - - .facet-filters__sort + .icon-caret { - right: 0; - } - - @media screen and (forced-colors: active) { - .facet-filters__sort { - border: none; - } - } - - .facet-filters__sort, - .facet-filters__sort:hover { - box-shadow: none; - filter: none; - transition: none; - } - - .facet-filters__label { - display: block; - color: var(--color-foreground-85); - font-size: 1.4rem; - margin: 0 2rem 0 0; - } \ No newline at end of file diff --git a/snippets/facets-vertical.liquid b/snippets/facets-vertical.liquid deleted file mode 100644 index b9e0ae69318..00000000000 --- a/snippets/facets-vertical.liquid +++ /dev/null @@ -1,508 +0,0 @@ -{% comment %} - Renders facets (filtering and sorting) - - Accepts: - - results: {Object} Collection or Search object - - enable_filtering: {Boolean} Show filtering when true - - enable_sorting: {Boolean} Show sorting when true - - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true - - Usage: - {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %} -{% endcomment %} - -{%- liquid - assign sort_by = results.sort_by | default: results.default_sort_by - assign total_active_values = 0 - if results.url - assign results_url = results.url - else - assign terms = results.terms | escape - assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by - endif - -%} - -
- {%- unless collapse_on_larger_devices -%} - - - {%- if enable_sorting -%} -
-
-

- -

-
- {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} - - {% render 'icon-caret' %} -
-
- - -
- {%- endif -%} - -
-

- - {%- if results.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} - {%- elsif results.products_count == results.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: results.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} - {%- endif -%} - -

- -
- - {%- if results.terms -%} - - - {%- endif -%} - - {% if enable_filtering %} -
- {%- unless results.filters == empty -%} -

{{ 'products.facets.filter_by_label' | t }}

- {%- endunless -%} - - {%- for filter in results.filters -%} - {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%} - {% case filter.type %} - {% when 'list' %} -
- -
- {{ filter.label | escape }} - {% render 'icon-caret' %} -
- -
-
- {{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} - - - {{ 'products.facets.reset' | t }} - - -
- -
    - {%- for value in filter.values -%} -
  • - -
    • - {%- endfor -%} -
-
-
- {% when 'price_range' %} - {% liquid - assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ',' - assign uses_comma_decimals = false - if currencies_using_comma_decimals contains cart.currency.iso_code - assign uses_comma_decimals = true - endif - %} -
- -
- {{ filter.label | escape }} - {% render 'icon-caret' %} -
- -
-
- {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%} - {{ "products.facets.max_price" | t: price: max_price_amount }} - - - {{ 'products.facets.reset' | t }} - - -
- - {{ cart.currency.symbol }} -
- - -
- {{ cart.currency.symbol }} -
- - -
- -
-
- {% endcase %} - {%- endfor -%} - -
- -
- {%- for filter in results.filters -%} - {%- for value in filter.active_values -%} - - - - {{ value.label | escape }} - {% render 'icon-close-small' %} - - - - - {%- endfor -%} - {% if filter.type == "price_range" %} - {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - - - - {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} - {% render 'icon-close-small' %} - - - - - {%- endif -%} - {% endif %} - {%- endfor -%} - - - {{ 'products.facets.clear_all' | t }} - - -
- {% endif %} - - {% if results.current_vendor or results.current_type %} - - {% endif %} - - - - {%- endunless -%} - - -
- - - {% render 'icon-filter' %} - - {%- if enable_filtering and enable_sorting -%} - {{ 'products.facets.filter_and_sort' | t }} - {%- elsif enable_filtering -%} - {{ 'products.facets.filter_button' | t }} - {%- elsif enable_sorting -%} - {{ 'products.facets.sort_button' | t }} - {%- endif -%} - - - {%- render 'icon-close' -%} - - -
-
-
-
-

- {%- if enable_filtering and enable_sorting -%} - {{ 'products.facets.filter_and_sort' | t }} - {%- elsif enable_filtering -%} - {{ 'products.facets.filter_button' | t }} - {%- elsif enable_sorting -%} - {{ 'products.facets.sort_button' | t }} - {%- endif -%} -

-

- {%- if results.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} - {%- elsif results.products_count == results.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: results.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} - {%- endif -%} -

-
-
-
- {%- for filter in results.filters -%} - {% case filter.type %} - {% when 'list' %} -
- -
- {{ filter.label | escape }} - {% render 'icon-arrow' %} - -
- -
- -
    - {%- for value in filter.values -%} -
  • - -
    • - {%- endfor -%} -
- -
- - {{ 'products.facets.clear' | t }} - - - -
-
-
- {% when 'price_range' %} -
- -
- {{ filter.label | escape }} - {% render 'icon-arrow' %} - -
- -
- - -

{{ "products.facets.max_price" | t: price: max_price_amount }}

- - - {{ cart.currency.symbol }} -
- - -
- - {{ cart.currency.symbol }} -
- - -
- -
- - {{ 'products.facets.clear' | t }} - - - -
-
-
- {% endcase %} - {%- endfor -%} - - {%- if enable_sorting -%} -
-
-
- -
- - {% render 'icon-caret' %} -
-
-
-
- {%- endif -%} - -
- - {{ 'products.facets.clear_all' | t }} - - - -
-
- - {% if results.current_vendor or results.current_type %} - - {% endif %} - - {%- if results.terms -%} - - - {%- endif -%} -
-
- -
- - -
- {%- for filter in results.filters -%} - {%- for value in filter.active_values -%} - - - - {{ value.label | escape }} - {% render 'icon-close-small' %} - - - - - {%- endfor -%} - - {%- if filter.type == "price_range" -%} - {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - - - - {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} - {% render 'icon-close-small' %} - - - - - {%- endif -%} - {%- endif -%} - {%- endfor -%} - - - {{ 'products.facets.clear_all' | t }} - - -
-
-

- - {%- if results.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} - {%- elsif results.products_count == results.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: results.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} - {%- endif -%} - -

- -
-
\ No newline at end of file From aeeeef455a5537e807d792933b32a1c4c75216fd Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 2 Mar 2022 17:19:19 -0500 Subject: [PATCH 003/176] Add collapse logic --- assets/component-facets.css | 4 +-- assets/facets.js | 17 ++++++++++++ sections/main-collection-product-grid.liquid | 28 ++++++++++++++++---- snippets/facets.liquid | 17 ++++++++---- 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 3d891a11991..9fcae54dd7f 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -917,8 +917,8 @@ width: 33%; } @media screen and (min-width: 990px) { -#ProductGridContainer { - width: 66%; + .product-grid-container-vertical { + width: 100%; } } diff --git a/assets/facets.js b/assets/facets.js index e3fc8e82646..bd12264f7dc 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -223,3 +223,20 @@ class FacetRemove extends HTMLElement { } customElements.define('facet-remove', FacetRemove); + + +class VerticalCollapse extends HTMLElement { + constructor() { + super(); + console.log('hellooooo') + this.querySelector('.vertical-filter-collapse').addEventListener('click', () => { + if (this.querySelector('.vertical-filter-collapse').hasAttribute('open')) { + this.querySelector('.facets').classList.remove('hidden'); + } else { + this.querySelector('.facets').classList.add('hidden'); + } + }); + } +} + +customElements.define('vertical-collapse', VerticalCollapse); diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index b6237dd19af..2ea93441359 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -30,13 +30,31 @@ {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {{ 'component-facets.css' | asset_url | stylesheet_tag }} - -
- {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %} -
+ + {%- if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices -%} +
+ + + {% render 'icon-filter' %} + + {%- if section.settings.enable_filtering and section.settings.enable_sorting -%} + {{ 'products.facets.filter_and_sort' | t }} + {%- elsif section.settings.enable_filtering -%} + {{ 'products.facets.filter_button' | t }} + {%- elsif section.settings.enable_sorting -%} + {{ 'products.facets.sort_button' | t }} + {%- endif -%} + + +
+ {%- endif -%} +
+ {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %} +
+ {%- endif -%} -
+
{%- paginate collection.products by section.settings.products_per_page -%} {%- if collection.products.size == 0 -%}
diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 25a69e7ac2b..f78ff0605b7 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -15,6 +15,12 @@ {%- liquid assign sort_by = results.sort_by | default: results.default_sort_by assign total_active_values = 0 + assign should_show_desktop_menu = false + if collapse_on_larger_devices == false and filter_type == 'horizontal' + assign should_show_desktop_menu = true + elsif filter_type == 'vertical' + assign should_show_desktop_menu = true + endif if results.url assign results_url = results.url else @@ -24,7 +30,7 @@ -%}
- {%- unless collapse_on_larger_devices -%} + {%- if should_show_desktop_menu -%}
{%- if enable_sorting and filter_type == 'vertical' -%} @@ -270,9 +276,9 @@
- {%- endunless -%} + {%- endif -%} - +
@@ -510,7 +516,7 @@
-
+ {% comment %}

{%- if results.results_count -%} @@ -527,5 +533,6 @@

-
+
{% endcomment %}
+ From 4c684fd861db010160aa181a2976a7ac95c7f4fb Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 3 Mar 2022 10:16:44 -0500 Subject: [PATCH 004/176] FIx collapse --- assets/component-facets.css | 6 +- assets/facets.js | 3 +- sections/main-collection-product-grid.liquid | 145 ++++++++++--------- snippets/facets.liquid | 2 +- 4 files changed, 82 insertions(+), 74 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 9fcae54dd7f..c8fc96b4abe 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -912,7 +912,11 @@ input.mobile-facets__checkbox { @media screen and (min-width: 990px) { .facets-vertical-container { -width: 33%; +width: 0; +} + +.facets-vertical-container.open { + width: 33%; } } diff --git a/assets/facets.js b/assets/facets.js index bd12264f7dc..49074ccfe8d 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -228,12 +228,13 @@ customElements.define('facet-remove', FacetRemove); class VerticalCollapse extends HTMLElement { constructor() { super(); - console.log('hellooooo') this.querySelector('.vertical-filter-collapse').addEventListener('click', () => { if (this.querySelector('.vertical-filter-collapse').hasAttribute('open')) { this.querySelector('.facets').classList.remove('hidden'); + this.classList.add('open'); } else { this.querySelector('.facets').classList.add('hidden'); + this.classList.remove('open'); } }); } diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 2ea93441359..70e0b62ce53 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -26,82 +26,85 @@ } {%- endstyle -%} -
- {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} - {{ 'component-facets.css' | asset_url | stylesheet_tag }} - - - {%- if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices -%} -
- - - {% render 'icon-filter' %} - - {%- if section.settings.enable_filtering and section.settings.enable_sorting -%} - {{ 'products.facets.filter_and_sort' | t }} - {%- elsif section.settings.enable_filtering -%} - {{ 'products.facets.filter_button' | t }} - {%- elsif section.settings.enable_sorting -%} - {{ 'products.facets.sort_button' | t }} - {%- endif -%} - - -
- {%- endif -%} -
- {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %} -
- + + {%- if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices -%} +
+ + + {% render 'icon-filter' %} + + {%- if section.settings.enable_filtering and section.settings.enable_sorting -%} + {{ 'products.facets.filter_and_sort' | t }} + {%- elsif section.settings.enable_filtering -%} + {{ 'products.facets.filter_button' | t }} + {%- elsif section.settings.enable_sorting -%} + {{ 'products.facets.sort_button' | t }} + {%- endif -%} + + +
{%- endif -%} -
- {%- paginate collection.products by section.settings.products_per_page -%} - {%- if collection.products.size == 0 -%} -
-
-
-

- {{ 'sections.collection_template.empty' | t }}
- {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }} -

-
+
+ {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} + {{ 'component-facets.css' | asset_url | stylesheet_tag }} + +
+ {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %}
- {%- else -%} -
-
- -
    - {%- for product in collection.products -%} - {% assign lazy_load = false %} - {%- if forloop.index > 2 -%} - {%- assign lazy_load = true -%} - {%- endif -%} + {%- endif -%} -
  • - {% render 'card-product', - card_product: product, - media_aspect_ratio: section.settings.image_ratio, - show_secondary_image: section.settings.show_secondary_image, - show_vendor: section.settings.show_vendor, - show_rating: section.settings.show_rating, - lazy_load: lazy_load, - show_quick_add: section.settings.enable_quick_add, - section_id: section.id - %} -
    • - {%- endfor -%} -
- - {%- if paginate.pages > 1 -%} - {% render 'pagination', paginate: paginate, anchor: '' %} - {%- endif -%} -
- {%- endif -%} - {%- endpaginate -%} +
+ {%- paginate collection.products by section.settings.products_per_page -%} + {%- if collection.products.size == 0 -%} +
+
+
+

+ {{ 'sections.collection_template.empty' | t }}
+ {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }} +

+
+
+ {%- else -%} +
+
+ +
    + {%- for product in collection.products -%} + {% assign lazy_load = false %} + {%- if forloop.index > 2 -%} + {%- assign lazy_load = true -%} + {%- endif -%} + +
  • + {% render 'card-product', + card_product: product, + media_aspect_ratio: section.settings.image_ratio, + show_secondary_image: section.settings.show_secondary_image, + show_vendor: section.settings.show_vendor, + show_rating: section.settings.show_rating, + lazy_load: lazy_load, + show_quick_add: section.settings.enable_quick_add, + section_id: section.id + %} +
    • + {%- endfor -%} +
+ + {%- if paginate.pages > 1 -%} + {% render 'pagination', paginate: paginate, anchor: '' %} + {%- endif -%} +
+ {%- endif -%} + {%- endpaginate -%} +
+>>>>>>> a201986 (FIx collapse)
-
+ + {% schema %} { diff --git a/snippets/facets.liquid b/snippets/facets.liquid index f78ff0605b7..47980552d87 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -482,7 +482,7 @@ -
+
{%- for filter in results.filters -%} {%- for value in filter.active_values -%} From a0b3301c50d6766c4bed630553655857bbeb159f Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 3 Mar 2022 11:50:37 -0500 Subject: [PATCH 005/176] cleanup --- assets/facets.js | 18 ------ locales/en.default.schema.json | 3 + sections/main-collection-product-grid.liquid | 67 ++++++++++---------- snippets/facets.liquid | 33 ++-------- 4 files changed, 42 insertions(+), 79 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 49074ccfe8d..e3fc8e82646 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -223,21 +223,3 @@ class FacetRemove extends HTMLElement { } customElements.define('facet-remove', FacetRemove); - - -class VerticalCollapse extends HTMLElement { - constructor() { - super(); - this.querySelector('.vertical-filter-collapse').addEventListener('click', () => { - if (this.querySelector('.vertical-filter-collapse').hasAttribute('open')) { - this.querySelector('.facets').classList.remove('hidden'); - this.classList.add('open'); - } else { - this.querySelector('.facets').classList.add('hidden'); - this.classList.remove('open'); - } - }); - } -} - -customElements.define('vertical-collapse', VerticalCollapse); diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index e9a67f77f3e..aeb2053a3f3 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1373,6 +1373,9 @@ }, "options__2": { "label": "Horizontal" + }, + "options__3": { + "label": "Drawer" } }, "enable_sorting": { diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 70e0b62ce53..cc36c10e393 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -26,33 +26,39 @@ } {%- endstyle -%} - - {%- if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices -%} -
- - - {% render 'icon-filter' %} - - {%- if section.settings.enable_filtering and section.settings.enable_sorting -%} - {{ 'products.facets.filter_and_sort' | t }} - {%- elsif section.settings.enable_filtering -%} - {{ 'products.facets.filter_button' | t }} - {%- elsif section.settings.enable_sorting -%} - {{ 'products.facets.sort_button' | t }} - {%- endif -%} - - -
+
+ {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} + {{ 'component-facets.css' | asset_url | stylesheet_tag }} + +
+ {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %} +
{%- endif -%} -
- {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} - {{ 'component-facets.css' | asset_url | stylesheet_tag }} - -
- {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices, filter_type: section.settings.filter_type %} +
+ {%- paginate collection.products by section.settings.products_per_page -%} + {%- if collection.products.size == 0 -%} +
+
+
+

+ {{ 'sections.collection_template.empty' | t }}
+ {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }} +

+
- {%- endif -%} + {%- else -%} +
+
+ +
    + {%- for product in collection.products -%} + {% assign lazy_load = false %} + {%- if forloop.index > 2 -%} + {%- assign lazy_load = true -%} + {%- endif -%}
    {%- paginate collection.products by section.settings.products_per_page -%} @@ -101,9 +107,8 @@ {%- endif -%} {%- endpaginate -%}
    ->>>>>>> a201986 (FIx collapse)
- +
{% schema %} @@ -200,6 +205,10 @@ { "value": "horizontal", "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label" + }, + { + "value": "drawer", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label" } ], "default": "horizontal", @@ -211,12 +220,6 @@ "default": true, "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label" }, - { - "type": "checkbox", - "id": "collapse_on_larger_devices", - "default": false, - "label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label" - }, { "type": "header", "content": "t:sections.main-collection-product-grid.settings.header_mobile.content" diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 47980552d87..c8584be53db 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -5,22 +5,15 @@ - results: {Object} Collection or Search object - enable_filtering: {Boolean} Show filtering when true - enable_sorting: {Boolean} Show sorting when true - - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true - filter_type: {String} Type of filter Usage: - {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false, filter_type: 'vertical' %} + {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical' %} {% endcomment %} {%- liquid assign sort_by = results.sort_by | default: results.default_sort_by assign total_active_values = 0 - assign should_show_desktop_menu = false - if collapse_on_larger_devices == false and filter_type == 'horizontal' - assign should_show_desktop_menu = true - elsif filter_type == 'vertical' - assign should_show_desktop_menu = true - endif if results.url assign results_url = results.url else @@ -30,7 +23,7 @@ -%}
- {%- if should_show_desktop_menu -%} + {%- if filter_type == 'vertical' or filter_type == 'horizontal' -%}
{%- if enable_sorting and filter_type == 'vertical' -%} @@ -278,7 +271,7 @@ {%- endif -%} - +
@@ -482,7 +475,7 @@
-
+
{%- for filter in results.filters -%} {%- for value in filter.active_values -%} @@ -516,23 +509,5 @@
- {% comment %}
-

- - {%- if results.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} - {%- elsif results.products_count == results.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: results.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} - {%- endif -%} - -

- -
{% endcomment %}
From 54863ac0e706b77c84ad1135365d386a726cdaf9 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 3 Mar 2022 15:01:37 -0500 Subject: [PATCH 006/176] Fix filter --- sections/main-collection-product-grid.liquid | 76 +++++++++++++------- snippets/facets.liquid | 40 +++++------ 2 files changed, 67 insertions(+), 49 deletions(-) diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index cc36c10e393..46803b7f3d5 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -26,39 +26,62 @@ } {%- endstyle -%} -
+
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%} + {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} +
+
+

+ +

+
+ {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ +
+ {%- endif -%} + {%- endif -%} + +
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
{% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
- {%- endif -%} -
- {%- paginate collection.products by section.settings.products_per_page -%} - {%- if collection.products.size == 0 -%} -
-
-
-

- {{ 'sections.collection_template.empty' | t }}
- {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }} -

+
+ {%- paginate collection.products by section.settings.products_per_page -%} + {%- if collection.products.size == 0 -%} +
+
+
+

+ {{ 'sections.collection_template.empty' | t }}
+ {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }} +

+
-
- {%- else -%} -
-
- -
    - {%- for product in collection.products -%} - {% assign lazy_load = false %} - {%- if forloop.index > 2 -%} - {%- assign lazy_load = true -%} - {%- endif -%} + {%- else -%} +
    +
    + +
      + {%- for product in collection.products -%} + {% assign lazy_load = false %} + {%- if forloop.index > 2 -%} + {%- assign lazy_load = true -%} + {%- endif -%}
      {%- paginate collection.products by section.settings.products_per_page -%} @@ -84,7 +107,6 @@ {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- endif -%} -
    • {% render 'card-product', card_product: product, @@ -95,6 +117,7 @@ lazy_load: lazy_load, show_quick_add: section.settings.enable_quick_add, section_id: section.id + %}
      • {%- endfor -%} @@ -108,7 +131,6 @@ {%- endpaginate -%}
    -
{% schema %} diff --git a/snippets/facets.liquid b/snippets/facets.liquid index c8584be53db..0e3d98e8c8f 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -26,28 +26,6 @@ {%- if filter_type == 'vertical' or filter_type == 'horizontal' -%} - {%- if enable_sorting and filter_type == 'vertical' -%} -
-
-

- -

-
- {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} - - {% render 'icon-caret' %} -
-
- - -
- {%- endif -%} {%- if results.terms -%} @@ -509,5 +487,23 @@
+
+

+ + {%- if results.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: results.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} + {%- endif -%} + +

+ +
From f7bed589068e8d476f51d76e347cc72203f9f570 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Fri, 4 Mar 2022 18:44:14 -0500 Subject: [PATCH 007/176] fix sort --- assets/facets.js | 23 +++++++++-- sections/main-collection-product-grid.liquid | 40 +++++++++++--------- snippets/facets.liquid | 2 +- 3 files changed, 43 insertions(+), 22 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index e3fc8e82646..c826ea9ab9b 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -156,9 +156,26 @@ class FacetFiltersForm extends HTMLElement { onSubmitHandler(event) { event.preventDefault(); - const formData = new FormData(event.target.closest('form')); - const searchParams = new URLSearchParams(formData).toString(); - FacetFiltersForm.renderPage(searchParams, event); + const sortFilterForms = document.querySelectorAll('facet-filters-form form'); + if (event.srcElement.className == 'mobile-facets__checkbox') { + const formData = new FormData(event.target.closest('form')); + const searchParams = new URLSearchParams(formData).toString(); + FacetFiltersForm.renderPage(searchParams, event); + } else { + const forms = []; + sortFilterForms.forEach((form) => { + if (form.id == 'FacetSortForm') { + const formData = new FormData(form); + const searchParams = new URLSearchParams(formData).toString(); + forms.push(searchParams) + } else if (form.id == 'FacetFiltersForm') { + const formData = new FormData(form); + const searchParams = new URLSearchParams(formData).toString(); + forms.push(searchParams) + } + }) + FacetFiltersForm.renderPage(forms.join('&'), event); + } } onActiveFilterClick(event) { diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 46803b7f3d5..cf0a3555cfb 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -29,25 +29,29 @@
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} -
-
-

- -

-
- {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} - - {% render 'icon-caret' %} + + +
+
+

+ +

+
+ {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+
-
- -
+ + {%- endif -%} {%- endif -%} diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 0e3d98e8c8f..a10332625dd 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -487,7 +487,7 @@
-
+

{%- if results.results_count -%} From ebda63746425410c28efbd82dc50a3ba2df897d8 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 7 Mar 2022 09:39:50 -0500 Subject: [PATCH 008/176] Clean up css --- assets/component-facets.css | 44 +++++++++++++++----- sections/main-collection-product-grid.liquid | 2 +- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index c8fc96b4abe..54f16c301c0 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -905,25 +905,29 @@ input.mobile-facets__checkbox { } @media screen and (min-width: 990px) { -.facets-vertical { - display: flex; -} + .facets-vertical { + display: flex; + } } @media screen and (min-width: 990px) { -.facets-vertical-container { -width: 0; -} + .facets-vertical-container { + width: 0; + } -.facets-vertical-container.open { - width: 33%; -} + .facets-vertical-container.open { + width: 33%; + } } @media screen and (min-width: 990px) { .product-grid-container-vertical { width: 100%; + } } + +.facets-vertical-sort { + padding: 0; } .facets-vertical .disclosure-has-popup[open] > summary::before { @@ -957,8 +961,20 @@ width: 0; flex-wrap: initial; } +.facets-vertical .facets__wrapper .facets__disclosure:not(:last-child) { + border-top: solid rgba(var(--color-foreground),var(--popup-border-opacity)); +} + +.facets-vertical .facets__summary { + margin-top: 1.5rem; +} + .facets-vertical .facets__heading { - margin: 0; + margin: 0 0 1.5rem 0; +} + +.facets-vertical .product-count { + margin-top: 1.5rem; } .facets-vertical .facets__header, @@ -970,3 +986,11 @@ width: 0; margin-right: 0; } +.facets-vertical .facets-container .page-width { + padding-right: 3rem; +} + +.product-grid-container-vertical .collection { + padding-left: 0; +} + diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index cf0a3555cfb..b7e79b9fc72 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -29,7 +29,7 @@
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} - +
From 31e0a6e8eec86456fb21d034bd5dbd32591d72b9 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 7 Mar 2022 10:23:33 -0500 Subject: [PATCH 009/176] Clean up --- assets/component-facets.css | 129 +++++++------------ assets/facets.js | 23 ++-- sections/main-collection-product-grid.liquid | 8 +- 3 files changed, 67 insertions(+), 93 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 54f16c301c0..40a1ca22067 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -908,89 +908,56 @@ input.mobile-facets__checkbox { .facets-vertical { display: flex; } -} -@media screen and (min-width: 990px) { - .facets-vertical-container { - width: 0; + .facets-vertical .disclosure-has-popup[open] > summary::before { + content: none; } - - .facets-vertical-container.open { - width: 33%; + + .facets-vertical .facets__display { + position: initial; + border: none; + max-height: none; } -} - -@media screen and (min-width: 990px) { - .product-grid-container-vertical { - width: 100%; + + .facets-vertical .facets__form { + display: flex; + flex-direction: column; + width: 35rem; + } + + .facets-vertical .facets__wrapper { + flex-direction: column; + align-items: initial; + align-self: initial; + flex-wrap: initial; + } + + .facets-vertical .facets__wrapper .facets__disclosure:not(:last-child) { + border-top: solid rgba(var(--color-foreground),var(--popup-border-opacity)); + } + + .facets-vertical .facets__summary { + margin-top: 1.5rem; + } + + .facets-vertical .facets__heading { + margin: 0 0 1.5rem 0; + } + + .facets-vertical .product-count { + margin-top: 1.5rem; + } + + .facets-vertical .facets__header, + .facets-vertical .facets__list { + padding-left: 0; + } + + .facets-vertical .facets__disclosure { + margin-right: 0; + } + + .facets-vertical .facets-wrapper { + padding-right: 3rem; } } - -.facets-vertical-sort { - padding: 0; -} - -.facets-vertical .disclosure-has-popup[open] > summary::before { - content: none; -} - -.facets-vertical .facets__display { - position: initial; - border: none; - max-height: none; -} - -.facets-vertical .facet-filters { - padding-left: 0; -} - -.facets-vertical .facets__form { - display: flex; - flex-direction: column; - width: 35rem; -} - -.facets-vertical .facet-filters__field { - justify-content: flex-start; -} - -.facets-vertical .facets__wrapper { - flex-direction: column; - align-items: initial; - align-self: initial; - flex-wrap: initial; -} - -.facets-vertical .facets__wrapper .facets__disclosure:not(:last-child) { - border-top: solid rgba(var(--color-foreground),var(--popup-border-opacity)); -} - -.facets-vertical .facets__summary { - margin-top: 1.5rem; -} - -.facets-vertical .facets__heading { - margin: 0 0 1.5rem 0; -} - -.facets-vertical .product-count { - margin-top: 1.5rem; -} - -.facets-vertical .facets__header, -.facets-vertical .facets__list { - padding-left: 0; -} - -.facets-vertical .facets__disclosure { - margin-right: 0; -} - -.facets-vertical .facets-container .page-width { - padding-right: 3rem; -} - -.product-grid-container-vertical .collection { - padding-left: 0; -} - diff --git a/assets/facets.js b/assets/facets.js index c826ea9ab9b..5bcb52dd07d 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -154,27 +154,34 @@ class FacetFiltersForm extends HTMLElement { ] } + createSearchParams(form) { + const formData = new FormData(form); + return new URLSearchParams(formData).toString(); + } + + onSubmitForm(searchParams, event) { + FacetFiltersForm.renderPage(searchParams, event); + } + onSubmitHandler(event) { event.preventDefault(); const sortFilterForms = document.querySelectorAll('facet-filters-form form'); if (event.srcElement.className == 'mobile-facets__checkbox') { - const formData = new FormData(event.target.closest('form')); - const searchParams = new URLSearchParams(formData).toString(); - FacetFiltersForm.renderPage(searchParams, event); + console.log(event.srcElement, '----') + const searchParams = this.createSearchParams(event.target.closest('form')) + this.onSubmitForm(searchParams, event) } else { const forms = []; sortFilterForms.forEach((form) => { if (form.id == 'FacetSortForm') { - const formData = new FormData(form); - const searchParams = new URLSearchParams(formData).toString(); + const searchParams = this.createSearchParams(form) forms.push(searchParams) } else if (form.id == 'FacetFiltersForm') { - const formData = new FormData(form); - const searchParams = new URLSearchParams(formData).toString(); + const searchParams = this.createSearchParams(form) forms.push(searchParams) } }) - FacetFiltersForm.renderPage(forms.join('&'), event); + this.onSubmitForm(forms.join('&'), event) } } diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index b7e79b9fc72..eb3ab79bf0c 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -55,14 +55,14 @@ {%- endif -%} {%- endif -%} -
+
{{ 'component-facets.css' | asset_url | stylesheet_tag }} -
+
{% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
-
+
{%- paginate collection.products by section.settings.products_per_page -%} {%- if collection.products.size == 0 -%}
@@ -75,7 +75,7 @@
{%- else -%} -
+
    {{ 'component-facets.css' | asset_url | stylesheet_tag }} -
    + {%- if section.settings.enable_filtering -%} +
    {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
    + {%- endif -%}
    {%- paginate collection.products by section.settings.products_per_page -%} From 1f794da7f3b9fdcb02d4c5ff18c3afa6ebfe15ee Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 7 Mar 2022 14:01:07 -0500 Subject: [PATCH 011/176] Show more --- assets/component-facets.css | 9 +++++++++ locales/en.default.json | 1 + snippets/facets.liquid | 9 +++++++-- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 40a1ca22067..f8f082cdec1 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -960,4 +960,13 @@ input.mobile-facets__checkbox { .facets-vertical .facets-wrapper { padding-right: 3rem; } + + .product-grid-container { + width: 100%; + } + + .facets-vertical .button-show-more { + padding-left: 0; + justify-content: flex-start; + } } diff --git a/locales/en.default.json b/locales/en.default.json index 67938167bcb..ed847dc0599 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -165,6 +165,7 @@ "one": "{{ count }} selected", "other": "{{ count }} selected" }, + "show_more": "Show more", "max_price": "The highest price is {{ price }}", "product_count": { "one": "{{ product_count }} of {{ count }} product", diff --git a/snippets/facets.liquid b/snippets/facets.liquid index a10332625dd..4708869f0a7 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -60,7 +60,7 @@
      {%- for value in filter.values -%} -
    • +
      • {%- endfor -%} + {%- if filter.values.size > 6 and filter_type == 'vertical' -%} + + {%- endif %}
    @@ -222,7 +227,7 @@
{%- endif -%} From 0cc55fb1235bd55b99d76fc2e543a74685551da8 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 7 Mar 2022 15:21:34 -0500 Subject: [PATCH 012/176] Fix show more --- snippets/facets.liquid | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 4708869f0a7..03c0af3d3ae 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -60,7 +60,7 @@
    {%- for value in filter.values -%} -
  • +
From 984ea76c681f1c7a0e03743642ddf12b3a0dc4ce Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 16 Mar 2022 13:36:15 -0400 Subject: [PATCH 014/176] Move elements --- assets/component-facets.css | 13 ++ locales/en.default.json | 1 + sections/main-collection-product-grid.liquid | 21 ++- snippets/facets.liquid | 148 ++++++++++++------- 4 files changed, 129 insertions(+), 54 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 2ca614b3439..a41ce62b8bf 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -977,4 +977,17 @@ input.mobile-facets__checkbox { .facets__item-show-more:not(.hidden) + .button-show-more .label-show-more { display: none; } + + .facets-vertical-form { + display: flex; + justify-content: flex-end; + } + + .facets-vertical-form .product-count { + margin-left: 3.5rem; + } + + .facets-vertical .active-facets__button-wrapper { + margin-bottom: 2rem; + } } diff --git a/locales/en.default.json b/locales/en.default.json index b91b616755b..cc8d35fecb8 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -165,6 +165,7 @@ "one": "{{ count }} selected", "other": "{{ count }} selected" }, + "filter_selected": " ({{ count }})", "show_more": "Show more", "show_less": "Show less", "max_price": "The highest price is {{ price }}", diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index f76c70d7b4c..569d37a0677 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -30,7 +30,7 @@ {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} - +

@@ -50,6 +50,25 @@

+ +
+

+ + {%- if collection.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: collection.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }} + {%- endif -%} + +

+ +
{%- endif -%} diff --git a/snippets/facets.liquid b/snippets/facets.liquid index fac1b7b5c5f..91dd45be0ca 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -37,6 +37,42 @@

{{ 'products.facets.filter_by_label' | t }}

{%- endunless -%} + {%- if filter_type == 'vertical' -%} +
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} + + + + {{ value.label | escape }} + {% render 'icon-close-small' %} + + + + + {%- endfor -%} + {% if filter.type == "price_range" %} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} + {% endif %} + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+ {%- endif -%} + {%- for filter in results.filters -%} {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%} {% case filter.type %} @@ -44,19 +80,21 @@
- {{ filter.label | escape }} + {{ filter.label | escape }}{% if filter.active_values.size > 0 -%}{{ 'products.facets.filter_selected' | t: count: filter.active_values.size }}{% endif %} {% render 'icon-caret' %}
-
- {{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} - - - {{ 'products.facets.reset' | t }} - - -
+ {%- if filter_type != 'vertical' -%} +
+ {{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} + + + {{ 'products.facets.reset' | t }} + + +
+ {%- endif -%}
    {%- for value in filter.values -%} @@ -171,39 +209,41 @@
-
- {%- for filter in results.filters -%} - {%- for value in filter.active_values -%} - - - - {{ filter.label }}: {{ value.label | escape }} - {% render 'icon-close-small' %} - - - - - {%- endfor -%} - {% if filter.type == "price_range" %} - {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + {%- if filter_type == 'horizontal' -%} +
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} - + - {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {{ value.label | escape }} {% render 'icon-close-small' %} - {%- endif -%} - {% endif %} - {%- endfor -%} - - - {{ 'products.facets.clear_all' | t }} - - -
+ {%- endfor -%} + {% if filter.type == "price_range" %} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} + {% endif %} + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+ {%- endif -%} {% endif %} {% if results.current_vendor or results.current_type %} @@ -233,24 +273,26 @@
{%- endif -%} -
-

- - {%- if results.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} - {%- elsif results.products_count == results.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: results.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} - {%- endif -%} - -

- -
+ {%- if filter_type == 'horizontal' -%} +
+

+ + {%- if results.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} + {%- elsif results.products_count == results.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: results.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} + {%- endif -%} + +

+ +
+ {%- endif -%} {%- endif -%} From beb96cd251679ae0a85592c21e72960326b3d5fa Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 16 Mar 2022 13:49:42 -0400 Subject: [PATCH 015/176] First one open --- assets/global.js | 6 +++++- snippets/facets.liquid | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/assets/global.js b/assets/global.js index 6c93fcc63bd..2b4d5963a46 100644 --- a/assets/global.js +++ b/assets/global.js @@ -8,7 +8,11 @@ function getFocusableElements(container) { document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => { summary.setAttribute('role', 'button'); - summary.setAttribute('aria-expanded', 'false'); + if (summary.parentNode.hasAttribute('open')) { + summary.setAttribute('aria-expanded', 'true'); + } else { + summary.setAttribute('aria-expanded', 'false'); + } if(summary.nextElementSibling.getAttribute('id')) { summary.setAttribute('aria-controls', summary.nextElementSibling.id); diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 91dd45be0ca..5ec4ffa2fc3 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -76,8 +76,8 @@ {%- for filter in results.filters -%} {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%} {% case filter.type %} - {% when 'boolean' or 'list' %} -
+ {% when 'list' or 'list' %} +
{{ filter.label | escape }}{% if filter.active_values.size > 0 -%}{{ 'products.facets.filter_selected' | t: count: filter.active_values.size }}{% endif %} From aca53126e942ed6191f6c7fe91a1bf82569a5cb2 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 16 Mar 2022 14:41:10 -0400 Subject: [PATCH 016/176] Clean up --- assets/facets.js | 1 - snippets/facets.liquid | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 5bcb52dd07d..94d0717ad24 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -167,7 +167,6 @@ class FacetFiltersForm extends HTMLElement { event.preventDefault(); const sortFilterForms = document.querySelectorAll('facet-filters-form form'); if (event.srcElement.className == 'mobile-facets__checkbox') { - console.log(event.srcElement, '----') const searchParams = this.createSearchParams(event.target.closest('form')) this.onSubmitForm(searchParams, event) } else { diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 5ec4ffa2fc3..4df68495516 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -80,7 +80,7 @@
- {{ filter.label | escape }}{% if filter.active_values.size > 0 -%}{{ 'products.facets.filter_selected' | t: count: filter.active_values.size }}{% endif %} + {{ filter.label | escape }}{%- if filter_type == 'vertical' -%}{{ 'products.facets.filter_selected' | t: count: filter.active_values.size }}{% endif %} {% render 'icon-caret' %}
From d517c7936a4073f12433b157c67261f5e8bf4e5f Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 16 Mar 2022 14:43:38 -0400 Subject: [PATCH 017/176] Clean up --- assets/component-facets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index a41ce62b8bf..736d00e027d 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -922,7 +922,7 @@ input.mobile-facets__checkbox { .facets-vertical .facets__form { display: flex; flex-direction: column; - width: 35rem; + width: 24rem; } .facets-vertical .facets__wrapper { From a1684cb54692208b5f6b2656a28ba378820e2029 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 16 Mar 2022 15:03:43 -0400 Subject: [PATCH 018/176] fix --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 4df68495516..c431dc5332f 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -98,7 +98,7 @@
-
+
{%- for filter in results.filters -%} {%- for value in filter.active_values -%} @@ -544,6 +554,33 @@
+ + {%- if enable_sorting and filter_type == 'drawer' -%} + + +
+
+

+ +

+
+ {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ + +
+ + + {%- endif -%}

@@ -562,5 +599,43 @@

+ +
+
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} + + + + {{ filter.label }}: {{ value.label | escape }} + {% render 'icon-close-small' %} + + + + + {%- endfor -%} + + {%- if filter.type == "price_range" -%} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} + {%- endif -%} + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+
+
From f6faabe18d1bbf41177fe95d5511ee9d98fc15a4 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 12:41:52 -0400 Subject: [PATCH 033/176] fix price --- assets/component-facets.css | 9 +++++++++ snippets/facets.liquid | 4 +++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 5384c5860b3..283efe5d3a8 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1032,6 +1032,15 @@ input.mobile-facets__checkbox { padding-top: 2rem; } + .facets-vertical .facets__price { + padding-left: 0; + padding-right: 0; + } + + .facets-vertical .facets__price .field:last-of-type { + margin-left: 1rem; + } + .facets-container-drawer { display: flex;; flex-flow: row wrap; diff --git a/snippets/facets.liquid b/snippets/facets.liquid index a4802946abe..8401244b402 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -189,7 +189,9 @@ >
- {{ cart.currency.symbol }} + {%- if filter_type != 'vertical' -%} + {{ cart.currency.symbol }} + {%- endif -%}
Date: Mon, 21 Mar 2022 12:45:41 -0400 Subject: [PATCH 034/176] fix price --- assets/component-facets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 283efe5d3a8..ce611256f48 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1034,7 +1034,7 @@ input.mobile-facets__checkbox { .facets-vertical .facets__price { padding-left: 0; - padding-right: 0; + padding-right: 0.5rem; } .facets-vertical .facets__price .field:last-of-type { From 759a542a238d458c51ce7f986d536f4de09beffb Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 12:56:53 -0400 Subject: [PATCH 035/176] spacing --- assets/component-facets.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index ce611256f48..a6e7f096a3d 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -950,6 +950,7 @@ input.mobile-facets__checkbox { .facets-vertical .facets__display { width: 26rem; + margin-top: 2.7rem; } .facets-vertical .facets__wrapper { @@ -980,6 +981,10 @@ input.mobile-facets__checkbox { padding-left: 0; } + .facets-vertical .facets__list { + margin-bottom: 1.7rem; + } + .facets-vertical .facets__header { border-bottom: 0; } @@ -1001,6 +1006,11 @@ input.mobile-facets__checkbox { justify-content: flex-start; } + .facets-vertical .button-show-more, .facets-vertical .button-show-more { + margin-top: 2.2rem; + margin-bottom: 1.7rem; + } + .facets__item-show-more.hidden + .button-show-more .label-show-less { display: none; } @@ -1033,8 +1043,7 @@ input.mobile-facets__checkbox { } .facets-vertical .facets__price { - padding-left: 0; - padding-right: 0.5rem; + padding: 2rem 0.5rem 3.2rem 0; } .facets-vertical .facets__price .field:last-of-type { From dbf645586b7fa657ea3c248149b4e7479e9ba1c4 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 12:59:09 -0400 Subject: [PATCH 036/176] update button --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 8401244b402..454e7e513f0 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -138,7 +138,7 @@ {%- endfor -%} {%- if filter.values.size > 6 and filter_type == 'vertical' -%} - From 7be10dfc5b3dee330079b915aee48538cef3cca2 Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Mon, 21 Mar 2022 17:02:01 +0000 Subject: [PATCH 037/176] Update 3 translation files --- locales/pt-BR.schema.json | 13 +++++++++++++ locales/pt-PT.schema.json | 13 +++++++++++++ locales/sv.schema.json | 13 +++++++++++++ 3 files changed, 39 insertions(+) diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 66b0874ef2d..032d5f72525 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -1297,6 +1297,19 @@ "options__2": { "label": "2 colunas" } + }, + "filter_type": { + "label": "Layout de filtro para desktop", + "options__1": { + "label": "Horizontal" + }, + "options__2": { + "label": "Vertical" + }, + "options__3": { + "label": "Menu deslizante" + }, + "info": "O menu deslizante é o layout-padrão para dispositivo móvel." } } }, diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index 667645420bd..b33c17ae95a 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -1297,6 +1297,19 @@ "options__2": { "label": "2 colunas" } + }, + "filter_type": { + "label": "Esquema de filtro para desktop", + "options__1": { + "label": "Horizontal" + }, + "options__2": { + "label": "Vertical" + }, + "options__3": { + "label": "Gaveta" + }, + "info": "A gaveta é o esquema padrão para dispositivos móveis." } } }, diff --git a/locales/sv.schema.json b/locales/sv.schema.json index 46c5cdcfe4c..f7f50d01920 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -1297,6 +1297,19 @@ "options__2": { "label": "2 kolumner" } + }, + "filter_type": { + "label": "Filterlayout för dator", + "options__1": { + "label": "Liggande" + }, + "options__2": { + "label": "Stående" + }, + "options__3": { + "label": "Låda" + }, + "info": "Låda är standardlayouten för mobil." } } }, From f4a9a8d5ee5d14e4ac2660935579ba5a993fe4a8 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 13:17:12 -0400 Subject: [PATCH 038/176] push --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 454e7e513f0..7437e64907d 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -135,7 +135,7 @@ {{ value.label | escape }} ({{ value.count }}) - + {%- endfor -%} {%- if filter.values.size > 6 and filter_type == 'vertical' -%} - {%- endif %} - + {{ value.label | escape }} ({{ value.count }}) + + + {%- endfor -%} + {%- if filter.values.size > 10 and filter_type == 'vertical' -%} + + {%- endif %} + +
{% when 'price_range' %} From 8482d5a4ef18c4647e0d1b9d0ebe796f777b38cc Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:24:15 -0400 Subject: [PATCH 042/176] feedback Co-authored-by: Kai --- assets/facets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index 4a7480aa8df..18386af65b6 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -92,7 +92,7 @@ class FacetFiltersForm extends HTMLElement { const parsedHTML = new DOMParser().parseFromString(html, 'text/html'); const facetDetailsElements = - parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter #FacetFiltersPillsForm .js-filter'); + parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'); const matchesIndex = (element) => { const jsFilter = event ? event.target.closest('.js-filter') : undefined; return jsFilter ? element.dataset.index === jsFilter.dataset.index : false; From 1da0c1f610a9a492a58d6c35cb45da0f82d8bb96 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:27:29 -0400 Subject: [PATCH 043/176] feedback --- assets/component-facets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 786d8da80ed..5cb4da80536 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1012,7 +1012,7 @@ input.mobile-facets__checkbox { justify-content: flex-start; } - .facets-vertical .button-show-more, .facets-vertical .button-show-more { + .facets-vertical .button-show-more, .facets-vertical .button-show-less { margin-top: 2.2rem; margin-bottom: 1.7rem; } From 64b06f405624a30e2e4431e2b1999180318d76e6 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:30:52 -0400 Subject: [PATCH 044/176] feedback --- assets/facets.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 18386af65b6..f1381b929a9 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -172,10 +172,7 @@ class FacetFiltersForm extends HTMLElement { } else { const forms = []; sortFilterForms.forEach((form) => { - if (form.id == 'FacetSortForm') { - const searchParams = this.createSearchParams(form) - forms.push(searchParams) - } else if (form.id == 'FacetFiltersForm') { + if (form.id == 'FacetSortForm' || form.id == 'FacetFiltersForm') { const searchParams = this.createSearchParams(form) forms.push(searchParams) } From ddca22d024b7fbea91eeb7bdf4a59e9efc1c8e3a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:31:59 -0400 Subject: [PATCH 045/176] feedback --- assets/global.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/assets/global.js b/assets/global.js index 2b4d5963a46..f13ced75891 100644 --- a/assets/global.js +++ b/assets/global.js @@ -8,11 +8,7 @@ function getFocusableElements(container) { document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => { summary.setAttribute('role', 'button'); - if (summary.parentNode.hasAttribute('open')) { - summary.setAttribute('aria-expanded', 'true'); - } else { - summary.setAttribute('aria-expanded', 'false'); - } + summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open')); if(summary.nextElementSibling.getAttribute('id')) { summary.setAttribute('aria-controls', summary.nextElementSibling.id); From 3c39c848b1d01a28b7a5382d2fbb5675023ad79b Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:35:01 -0400 Subject: [PATCH 046/176] feedback; --- assets/component-facets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 5cb4da80536..aed5340c273 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -966,7 +966,7 @@ input.mobile-facets__checkbox { flex-wrap: initial; } - .facets-vertical .facets__wrapper .facets__disclosure:not(:last-child) { + .facets-vertical .facets__disclosure { border-top: solid rgba(var(--color-foreground),var(--popup-border-opacity)); } From e03995301435797461d72b9e489bf7cfc3e80f3d Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 16:59:29 -0400 Subject: [PATCH 047/176] cleanup --- assets/component-facets.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index aed5340c273..d7ea7726936 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -933,7 +933,7 @@ input.mobile-facets__checkbox { display: block; } -@media screen and (min-width: 990px) { +@media screen and (min-width: 750px) { .facets-vertical { display: flex; } @@ -981,6 +981,10 @@ input.mobile-facets__checkbox { .facets-vertical .product-count { margin-top: 1.5rem; } + + .facets-vertical .active-facets__button-remove { + padding-top: 0; + } .facets-vertical .facets__header, .facets-vertical .facets__list { @@ -1068,7 +1072,20 @@ input.mobile-facets__checkbox { .facets-container-drawer .product-count { align-self: flex-start; } +} + +@media screen and (max-width: 998px) { + .facets-vertical .active-facets__button, .active-facets__button-remove { + padding: 0.5rem; + } +} +.facets-vertical .active-facets { + margin: 0; + align-items: flex-start; +} + +@media screen and (min-width: 990px) { .facets-container-drawer .mobile-facets__wrapper { width: calc(60% - 2rem); } From fdeba7175808cd0ec946125d16e1b186d33fe13a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Mon, 21 Mar 2022 17:03:01 -0400 Subject: [PATCH 048/176] fix brakcet --- locales/en.default.json | 1 - snippets/facets.liquid | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/locales/en.default.json b/locales/en.default.json index 72bd7215847..8cfad8b124d 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -165,7 +165,6 @@ "one": "{{ count }} selected", "other": "{{ count }} selected" }, - "filter_selected": " ({{ count }})", "filter_selected_accessibility": "{{ type }} ({{ count }} filters selected)", "show_more": "+Show more", "show_less": "-Show less", diff --git a/snippets/facets.liquid b/snippets/facets.liquid index f12e51ef87e..120374660bc 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -87,7 +87,7 @@
- {{ filter.label | escape }}{%- if filter_type == 'vertical' -%}{{ 'products.facets.filter_selected' | t: count: filter.active_values.size }}{% endif %} + {{ filter.label | escape }}{%- if filter_type == 'vertical' -%} ({{ filter.active_values.size }}){% endif %} {% render 'icon-caret' %}
From ad6bc68d46ce606c598f8b479e4cc695cca18c1f Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Tue, 22 Mar 2022 07:07:33 +0000 Subject: [PATCH 049/176] Update 2 translation files --- locales/cs.json | 9 ++++++--- locales/hr-HR.json | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/locales/cs.json b/locales/cs.json index 9994f4bce5e..0af9b6f3acd 100644 --- a/locales/cs.json +++ b/locales/cs.json @@ -158,7 +158,7 @@ "facets": { "apply": "Použít", "clear": "Vymazat", - "clear_all": "Vymazat vše", + "clear_all": "Odebrat vše", "from": "Od", "filter_and_sort": "Filtrování a řazení", "filter_by_label": "Filtrovat:", @@ -186,7 +186,10 @@ "few": "Počet produktů: {{ count }}", "many": "Počet produktů: {{ count }}" }, - "clear_filter": "Vymazat filtr" + "clear_filter": "Odebrat filtr", + "filter_selected_accessibility": "{{ type }} (počet vybraných filtrů: {{ count }})", + "show_more": "+ Zobrazit více", + "show_less": "- Zobrazit méně" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Kolekce", "empty": "Nenalezeny žádné produkty", - "use_fewer_filters_html": "Můžete použít méně filtrů nebo vymazat vše." + "use_fewer_filters_html": "Můžete použít méně filtrů nebo všechny odebrat" }, "video": { "load_video": "Načíst video: {{ description }}" diff --git a/locales/hr-HR.json b/locales/hr-HR.json index bdf2df6ed3c..595491860b6 100644 --- a/locales/hr-HR.json +++ b/locales/hr-HR.json @@ -157,7 +157,7 @@ "facets": { "apply": "Primijeni", "clear": "Očisti", - "clear_all": "Očisti sve", + "clear_all": "Ukloni sve", "from": "Od", "filter_and_sort": "Filtriraj i razvrstaj", "filter_by_label": "Filtriraj:", @@ -182,7 +182,10 @@ "other": "Broj proizvoda: {{ count }}", "few": "Broj proizvoda: {{ count }}" }, - "clear_filter": "Očisti filtar" + "clear_filter": "Ukloni filtar", + "filter_selected_accessibility": "{{ type }} (broj odabranih filtra: {{ count }})", + "show_more": "+Prikaži više", + "show_less": "-Prikaži manje" } }, "templates": { @@ -278,7 +281,7 @@ "collection_template": { "title": "Kolekcija", "empty": "Nije pronađen nijedan proizvod", - "use_fewer_filters_html": "Upotrijebite manje filtara ili očistite sve" + "use_fewer_filters_html": "Upotrijebi manje filtara ili ukloni sve" }, "video": { "load_video": "Učitaj videozapis: {{ description }}" From cd037c2feb534e954f9da1c64fcf0e80fcd3b533 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:15:13 -0400 Subject: [PATCH 050/176] Feedback --- assets/component-facets.css | 11 +++-------- locales/en.default.json | 4 ++-- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index d7ea7726936..04f68df199d 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -946,6 +946,7 @@ input.mobile-facets__checkbox { position: initial; border: none; max-height: none; + width: 26rem; } .facets-vertical .facets__form { @@ -953,11 +954,6 @@ input.mobile-facets__checkbox { flex-direction: column; width: 26rem; } - - .facets-vertical .facets__display { - width: 26rem; - margin-top: 2.7rem; - } .facets-vertical .facets__wrapper { flex-direction: column; @@ -1017,8 +1013,7 @@ input.mobile-facets__checkbox { } .facets-vertical .button-show-more, .facets-vertical .button-show-less { - margin-top: 2.2rem; - margin-bottom: 1.7rem; + margin-top: 1.3rem; } .facets__item-show-more.hidden + .button-show-more .label-show-less { @@ -1053,7 +1048,7 @@ input.mobile-facets__checkbox { } .facets-vertical .facets__price { - padding: 2rem 0.5rem 3.2rem 0; + padding: 1rem 0.5rem 2.9rem 0; } .facets-vertical .facets__price .field:last-of-type { diff --git a/locales/en.default.json b/locales/en.default.json index 8cfad8b124d..0a666b202a8 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -166,8 +166,8 @@ "other": "{{ count }} selected" }, "filter_selected_accessibility": "{{ type }} ({{ count }} filters selected)", - "show_more": "+Show more", - "show_less": "-Show less", + "show_more": "+ Show more", + "show_less": "- Show less", "max_price": "The highest price is {{ price }}", "product_count": { "one": "{{ product_count }} of {{ count }} product", From 43cd667a5bf20382983e3f04b6d89fea800e2fad Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:24:26 -0400 Subject: [PATCH 051/176] feedback --- assets/component-facets.css | 4 +++ snippets/facets.liquid | 62 +++++++++++++++++++------------------ 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 04f68df199d..13b6f9e96f1 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1067,6 +1067,10 @@ input.mobile-facets__checkbox { .facets-container-drawer .product-count { align-self: flex-start; } + + .facets-vertical .facet-filters.sorting.no-js { + padding-left: 0; + } } @media screen and (max-width: 998px) { diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 120374660bc..615e6a492fb 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -603,43 +603,45 @@
- -
-
- {%- for filter in results.filters -%} - {%- for value in filter.active_values -%} - - - - {{ filter.label }}: {{ value.label | escape }} - {% render 'icon-close-small' %} - - - - - {%- endfor -%} - - {%- if filter.type == "price_range" -%} - {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + {%- if filter_type == 'drawer' -%} + + +
+ {%- for filter in results.filters -%} + {%- for value in filter.active_values -%} - + - {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} + {%- endfor -%} + + {%- if filter.type == "price_range" -%} + {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} + + + + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} + {% render 'icon-close-small' %} + + + + + {%- endif -%} {%- endif -%} - {%- endif -%} - {%- endfor -%} - - - {{ 'products.facets.clear_all' | t }} - - -
- - + {%- endfor -%} + + + {{ 'products.facets.clear_all' | t }} + + +
+ + + {%- endif -%}
From 1b99ba5351c1faa0e7e92dc677ba74985837a7a3 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:27:47 -0400 Subject: [PATCH 052/176] move icons --- locales/cs.json | 4 ++-- locales/en.default.json | 4 ++-- locales/hr-HR.json | 4 ++-- snippets/facets.liquid | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/locales/cs.json b/locales/cs.json index 0af9b6f3acd..f34f19fb27e 100644 --- a/locales/cs.json +++ b/locales/cs.json @@ -188,8 +188,8 @@ }, "clear_filter": "Odebrat filtr", "filter_selected_accessibility": "{{ type }} (počet vybraných filtrů: {{ count }})", - "show_more": "+ Zobrazit více", - "show_less": "- Zobrazit méně" + "show_more": "Zobrazit více", + "show_less": "Zobrazit méně" } }, "templates": { diff --git a/locales/en.default.json b/locales/en.default.json index 0a666b202a8..53e0cf0f2e0 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -166,8 +166,8 @@ "other": "{{ count }} selected" }, "filter_selected_accessibility": "{{ type }} ({{ count }} filters selected)", - "show_more": "+ Show more", - "show_less": "- Show less", + "show_more": "Show more", + "show_less": "Show less", "max_price": "The highest price is {{ price }}", "product_count": { "one": "{{ product_count }} of {{ count }} product", diff --git a/locales/hr-HR.json b/locales/hr-HR.json index 595491860b6..b093e8bc004 100644 --- a/locales/hr-HR.json +++ b/locales/hr-HR.json @@ -184,8 +184,8 @@ }, "clear_filter": "Ukloni filtar", "filter_selected_accessibility": "{{ type }} (broj odabranih filtra: {{ count }})", - "show_more": "+Prikaži više", - "show_less": "-Prikaži manje" + "show_more": "Prikaži više", + "show_less": "Prikaži manje" } }, "templates": { diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 615e6a492fb..d56be621f7e 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -140,8 +140,8 @@ {%- endfor -%} {%- if filter.values.size > 10 and filter_type == 'vertical' -%} {%- endif %} From b2dc63776551c64de9d3e3e61116b065da3b3061 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:30:24 -0400 Subject: [PATCH 053/176] fix typo --- sections/main-collection-product-grid.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 54287cb5557..a814487a76c 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -56,7 +56,7 @@ {%- if collection.results_count -%} {{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }} - {%- elsif results.products_count == results.all_products_count -%} + {%- elsif collection.products_count == collection.all_products_count -%} {{ 'products.facets.product_count_simple' | t: count: collection.products_count }} {%- else -%} {{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }} From 30e5ce3bd72479bfca9be1f050e34f6a16ce85c2 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:46:44 -0400 Subject: [PATCH 054/176] accessibility --- snippets/facets.liquid | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index d56be621f7e..161f438cbbf 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -134,7 +134,8 @@ stroke-linejoin="round" /> - {{ value.label | escape }} ({{ value.count }}) + + {%- endfor -%} @@ -398,7 +399,9 @@ - {{ value.label | escape }} ({{ value.count }}) + + + {%- endfor -%} From 2d61c950939fa52be38e7e748b8d7312180dbab4 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 08:52:57 -0400 Subject: [PATCH 055/176] add aria label --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 161f438cbbf..7455166f883 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -85,7 +85,7 @@ {% case filter.type %} {% when 'boolean' or 'list' %}
- +
{{ filter.label | escape }}{%- if filter_type == 'vertical' -%} ({{ filter.active_values.size }}){% endif %} {% render 'icon-caret' %} From 67273d6b1ef61896f95b2b71d25347efedc6a168 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 09:43:42 -0400 Subject: [PATCH 056/176] fix --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 7455166f883..1104cb7f1a8 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -230,7 +230,7 @@ - {{ value.label | escape }} + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} From 76dc487c0aa366184667aff641acf83477028d4a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 10:57:09 -0400 Subject: [PATCH 057/176] Add search --- sections/main-search.liquid | 219 +++++++++++++++++++++++------------- 1 file changed, 141 insertions(+), 78 deletions(-) diff --git a/sections/main-search.liquid b/sections/main-search.liquid index 556baf28130..e26f8d5da21 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -132,83 +132,131 @@ {%- endif -%}
{%- if search.performed -%} - {%- if search.filters != empty -%} - {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} -
- {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %} -
+ {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} + {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} + +
+
+
+

+ +

+
+ {%- assign sort_by = search.sort_by | default: search.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ +
+ +
+

+ + {%- if search.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }} + {%- elsif search.products_count == search.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: search.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }} + {%- endif -%} + +

+ +
+
+ {%- endif -%} {%- endif -%} -
- {%- if search.results.size == 0 and search.filters != empty -%} -
-
-
-

- {{ 'sections.collection_template.empty' | t }}
- {{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }} -

-
-
- {%- else -%} - {% paginate search.results by 24 %} -
+
+ {%- if search.filters != empty -%} + {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} + + {%- endif -%} + {%- endif -%} +
+ {%- if search.results.size == 0 and search.filters != empty -%} +
-
    - {%- for item in search.results -%} - {% assign lazy_load = false %} - {%- if forloop.index > 2 -%} - {%- assign lazy_load = true -%} - {%- endif -%} +
    +

    + {{ 'sections.collection_template.empty' | t }}
    + {{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }} +

    +
    +
+ {%- else -%} + {% paginate search.results by 24 %} +
+
+ - {%- if paginate.pages > 1 -%} - {% render 'pagination', paginate: paginate %} - {%- endif -%} -
- {% endpaginate %} - {%- endif -%} + {%- endcase -%} + + {%- endfor -%} + + {%- if paginate.pages > 1 -%} + {% render 'pagination', paginate: paginate %} + {%- endif -%} +
+ {% endpaginate %} + {%- endif -%} +
{%- endif -%}
@@ -282,18 +330,33 @@ "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label", "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info" }, + { + "type": "select", + "id": "filter_type", + "options": [ + { + "value": "horizontal", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label" + }, + { + "value": "vertical", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label" + }, + { + "value": "drawer", + "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label" + } + ], + "default": "horizontal", + "label": "t:sections.main-collection-product-grid.settings.filter_type.label", + "info": "t:sections.main-collection-product-grid.settings.filter_type.info" + }, { "type": "checkbox", "id": "enable_sorting", "default": true, "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label" }, - { - "type": "checkbox", - "id": "collapse_on_larger_devices", - "default": false, - "label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label" - }, { "type": "header", "content": "t:sections.main-search.settings.header__2.content" From 6a17fa440cf52085ce457965abd445304409e7c9 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 11:39:33 -0400 Subject: [PATCH 058/176] fix bug --- snippets/facets.liquid | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 1104cb7f1a8..8080d081b0a 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -264,8 +264,8 @@ {% endif %} - {%- if enable_sorting -%} -
+ {%- if enable_sorting and filter_type != 'vertical' -%} +

@@ -309,6 +309,29 @@ {%- endif -%} + + {%- if enable_sorting and filter_type == 'vertical' -%} +
+
+

+ +

+
+ {%- assign sort_by = results.sort_by | default: results.default_sort_by -%} + + {% render 'icon-caret' %} +
+
+ + +
+ {%- endif -%} {%- endif -%} From 632e22c87bbafbf721b927e6fa05b5a87844709e Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Tue, 22 Mar 2022 17:00:45 +0000 Subject: [PATCH 059/176] Update 1 translation file --- locales/de.schema.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/locales/de.schema.json b/locales/de.schema.json index c53a1bb61a6..b864a9fdf55 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -1297,6 +1297,19 @@ "options__2": { "label": "2 Spalten" } + }, + "filter_type": { + "label": "Desktopfilterlayout", + "options__1": { + "label": "Horizontal" + }, + "options__2": { + "label": "Vertikal" + }, + "options__3": { + "label": "Einschub" + }, + "info": "Das Standardlayout für Mobilgeräte ist \"Einschub\"." } } }, From fe48f5184148f1fe134056c9078accc2920c6a51 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 13:03:51 -0400 Subject: [PATCH 060/176] fix h2 --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 8080d081b0a..a2c9fadc23c 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -43,7 +43,7 @@
{%- unless results.filters == empty -%} -

{{ 'products.facets.filter_by_label' | t }}

+

{{ 'products.facets.filter_by_label' | t }}

{%- endunless -%} From 842f9f5f158a3369398b2047d45c1f7c3909ca45 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 13:16:04 -0400 Subject: [PATCH 061/176] remove aria live --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index a2c9fadc23c..8124dcdeb87 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -140,7 +140,7 @@ {%- endfor -%} {%- if filter.values.size > 10 and filter_type == 'vertical' -%} - From f8552d6e2e4404585e0b1cd9e29fb942b9e30993 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 15:05:00 -0400 Subject: [PATCH 062/176] Fix a tag ay11 --- assets/facets.js | 13 +++++++++---- snippets/facets.liquid | 34 +++++++++++++++++----------------- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index f1381b929a9..9c34de34f27 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -234,12 +234,17 @@ customElements.define('price-range', PriceRange); class FacetRemove extends HTMLElement { constructor() { super(); - this.querySelector('a').addEventListener('click', (event) => { - event.preventDefault(); - const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form'); - form.onActiveFilterClick(event); + this.querySelector('a').addEventListener('click', this.closeFilter.bind(this)); + this.querySelector('a').addEventListener('keydown', (event) => { + if (event.code == 'Space') this.closeFilter(event); }); } + + closeFilter(event) { + event.preventDefault(); + const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form'); + form.onActiveFilterClick(event); + } } customElements.define('facet-remove', FacetRemove); diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 8124dcdeb87..3a35e2bf015 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -46,7 +46,7 @@

{{ 'products.facets.filter_by_label' | t }}

{%- endunless -%} - + {{ 'products.facets.clear_all' | t }} @@ -54,7 +54,7 @@ {%- for filter in results.filters -%} {%- for value in filter.active_values -%} - + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} @@ -66,7 +66,7 @@ {% if filter.type == "price_range" %} {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} {% render 'icon-close-small' %} @@ -96,7 +96,7 @@
{{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} - + {{ 'products.facets.reset' | t }} @@ -170,7 +170,7 @@ {{ "products.facets.max_price" | t: price: max_price_amount }} {%- if filter_type != 'vertical' -%} - + {{ 'products.facets.reset' | t }} @@ -228,7 +228,7 @@ {%- for filter in results.filters -%} {%- for value in filter.active_values -%} - + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} @@ -240,7 +240,7 @@ {% if filter.type == "price_range" %} {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} {% render 'icon-close-small' %} @@ -252,7 +252,7 @@ {% endif %} {%- endfor -%} - + {{ 'products.facets.clear_all' | t }} @@ -431,7 +431,7 @@
- + {{ 'products.facets.clear' | t }} @@ -499,7 +499,7 @@
- {{ 'products.facets.clear' | t }} + {{ 'products.facets.clear' | t }} @@ -529,7 +529,7 @@
- {{ 'products.facets.clear_all' | t }} + {{ 'products.facets.clear_all' | t }} @@ -554,7 +554,7 @@ {%- for filter in results.filters -%} {%- for value in filter.active_values -%} - + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} @@ -567,7 +567,7 @@ {%- if filter.type == "price_range" -%} {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} {% render 'icon-close-small' %} @@ -579,7 +579,7 @@ {%- endif -%} {%- endfor -%} - + {{ 'products.facets.clear_all' | t }} @@ -636,7 +636,7 @@ {%- for filter in results.filters -%} {%- for value in filter.active_values -%} - + {{ filter.label }}: {{ value.label | escape }} {% render 'icon-close-small' %} @@ -649,7 +649,7 @@ {%- if filter.type == "price_range" -%} {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} - + {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%} {% render 'icon-close-small' %} @@ -661,7 +661,7 @@ {%- endif -%} {%- endfor -%} - + {{ 'products.facets.clear_all' | t }} From 48b06f52dc8b71161732b17706903ec39740e08b Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 16:06:35 -0400 Subject: [PATCH 063/176] fix checkbox --- assets/facets.js | 6 ++++++ snippets/facets.liquid | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index 9c34de34f27..2706a6daf4f 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -8,6 +8,12 @@ class FacetFiltersForm extends HTMLElement { }, 500); this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this)); + this.querySelector('form').addEventListener('keydown', (event) => { + if (event.target.tagName == 'LI' && event.code == 'Space') { + event.preventDefault(); + event.target.querySelector('input').click(); + } + }); const facetWrapper = this.querySelector('#FacetsWrapperDesktop'); if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape); diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 3a35e2bf015..1beb2425394 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -106,9 +106,10 @@

{% when 'price_range' %} From 16b237b953724e9a32ae1554f51b686faaefa01d Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 16:53:17 -0400 Subject: [PATCH 067/176] fix padding --- assets/component-facets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 9387e6c7939..cb1bb35dcd7 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -988,7 +988,7 @@ input.mobile-facets__checkbox { } .facets-vertical .facets__display { - margin-bottom: 1.7rem; + padding-bottom: 1.7rem; } .facets-vertical .facets__header { From a57150e787218c9fcad3148327a54cb95b26dc69 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 16:57:45 -0400 Subject: [PATCH 068/176] fix typo --- assets/component-facets.css | 2 +- snippets/facets.liquid | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index cb1bb35dcd7..e54bb7d06ba 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1016,7 +1016,7 @@ input.mobile-facets__checkbox { margin-top: 1.3rem; } - .facets-wrap.facets-wrap-show-more + .button-show-more .label-show-less { + .facets-wrap-show-more + .button-show-more .label-show-less { display: none; } diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 8a098dec2ce..28e019a9642 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -143,7 +143,7 @@ {%- if filter.values.size > 10 and filter_type == 'vertical' -%} - From 618f85f18f2fdbb68612a21f4d43fc01ee3b3f3c Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 22 Mar 2022 17:01:10 -0400 Subject: [PATCH 069/176] fix padding --- assets/component-facets.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/component-facets.css b/assets/component-facets.css index e54bb7d06ba..7ad0594fbac 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -947,6 +947,8 @@ input.mobile-facets__checkbox { border: none; max-height: none; width: 26rem; + padding-left: 2rem; + margin-left: -2rem; } .facets-vertical .facets__form { From 8ce7219cffaec2e4b13b113f09e49c4f7ab2a490 Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Wed, 23 Mar 2022 05:07:00 +0000 Subject: [PATCH 070/176] Update 4 translation files --- locales/de.json | 9 ++++++--- locales/el.json | 9 ++++++--- locales/fr.json | 9 ++++++--- locales/ro-RO.json | 9 ++++++--- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/locales/de.json b/locales/de.json index c7a38b9f044..19449759f52 100644 --- a/locales/de.json +++ b/locales/de.json @@ -156,7 +156,7 @@ "facets": { "apply": "Anwenden", "clear": "Löschen", - "clear_all": "Alles löschen", + "clear_all": "Alle entfernen", "from": "Von", "filter_and_sort": "Filtern und sortieren", "filter_by_label": "Filter:", @@ -178,7 +178,10 @@ "sort_button": "Sortieren", "sort_by_label": "Sortieren nach:", "to": "Bis", - "clear_filter": "Filter löschen" + "clear_filter": "Filter entfernen", + "filter_selected_accessibility": "{{ type }} ({{ count }} Filter ausgewählt)", + "show_more": "Mehr anzeigen", + "show_less": "Weniger anzeigen" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Kategorie", "empty": "Keine Produkte gefunden", - "use_fewer_filters_html": "Verwende weniger Filter oder lösche alle" + "use_fewer_filters_html": "Verwende weniger Filter oder entferne alle" }, "video": { "load_video": "Video laden: {{ description }}" diff --git a/locales/el.json b/locales/el.json index edf53c5bad5..2c34a8cdc60 100644 --- a/locales/el.json +++ b/locales/el.json @@ -156,7 +156,7 @@ "facets": { "apply": "Εφαρμογή", "clear": "Διαγραφή", - "clear_all": "Διαγραφή όλων", + "clear_all": "Κατάργηση όλων", "from": "Από", "filter_and_sort": "Φιλτράρισμα και ταξινόμηση", "filter_by_label": "Φιλτράρισμα:", @@ -178,7 +178,10 @@ "sort_button": "Ταξινόμηση", "sort_by_label": "Ταξινόμηση κατά:", "to": "Έως", - "clear_filter": "Διαγραφή φίλτρου" + "clear_filter": "Κατάργηση φίλτρου", + "filter_selected_accessibility": "{{ type }} (επιλέχθηκαν {{ count }} φίλτρα)", + "show_more": "Εμφάνιση περισσότερων", + "show_less": "Εμφάνιση λιγότερων" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Συλλογή", "empty": "Δεν βρέθηκαν προϊόντα", - "use_fewer_filters_html": "Χρησιμοποιήστε λιγότερα φίλτρα ή διαγράψτε τα όλα" + "use_fewer_filters_html": "Χρησιμοποιήστε λιγότερα φίλτρα ή καταργήστε τα όλα" }, "video": { "load_video": "Φόρτωση βίντεο: {{ description }}" diff --git a/locales/fr.json b/locales/fr.json index e286553a9a0..2f1215ab46c 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -156,7 +156,7 @@ "facets": { "apply": "Appliquer", "clear": "Effacer", - "clear_all": "Tout effacer", + "clear_all": "Tout supprimer", "from": "De", "filter_and_sort": "Filtrer et trier", "filter_by_label": "Filtre :", @@ -178,7 +178,10 @@ "sort_button": "Trier", "sort_by_label": "Trier par :", "to": "À", - "clear_filter": "Effacer le filtre" + "clear_filter": "Supprimer le filtre", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtres sélectionnés)", + "show_more": "Afficher plus", + "show_less": "Afficher moins" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Collection", "empty": "Aucun produit trouvé", - "use_fewer_filters_html": "Utiliser moins de filtres ou tout effacer" + "use_fewer_filters_html": "Utiliser moins de filtres ou tout supprimer" }, "video": { "load_video": "Charger la vidéo : {{ description }}" diff --git a/locales/ro-RO.json b/locales/ro-RO.json index 0a3ea2d302a..01c6ba60a84 100644 --- a/locales/ro-RO.json +++ b/locales/ro-RO.json @@ -157,7 +157,7 @@ "facets": { "apply": "Aplică", "clear": "Golește", - "clear_all": "Golește tot", + "clear_all": "Elimină tot", "from": "De la", "filter_and_sort": "Filtrează și sortează", "filter_by_label": "Filtrează:", @@ -182,7 +182,10 @@ "other": "{{ count }} produse", "few": "{{ count }} produse" }, - "clear_filter": "Elimină filtrul" + "clear_filter": "Elimină filtrul", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtre selectate)", + "show_more": "Afișează mai mult", + "show_less": "Afișează mai puțin" } }, "templates": { @@ -278,7 +281,7 @@ "collection_template": { "title": "Colecție", "empty": "Nu s-au găsit produse", - "use_fewer_filters_html": "Utilizați mai puține filtre sau goliți tot" + "use_fewer_filters_html": "Folosește mai puține filtre sau elimină-le pe toate" }, "video": { "load_video": "Încarcă clipul video: {{ description }}" From 4795707e3f21724dfa32076b40076ff8b96467a0 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:33:17 -0400 Subject: [PATCH 071/176] Feedback Co-authored-by: Kai --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 28e019a9642..6c51ff53cd0 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -84,7 +84,7 @@ {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%} {% case filter.type %} {% when 'boolean' or 'list' %} -
+
{{ filter.label | escape }}{%- if filter_type == 'vertical' -%} ({{ filter.active_values.size }}){% endif %} From a0688f41d8bdf8c07148a29368eb63305d170e6a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:33:54 -0400 Subject: [PATCH 072/176] Feedback Co-authored-by: Kai --- assets/component-facets.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 7ad0594fbac..bf3d5762a44 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1014,7 +1014,8 @@ input.mobile-facets__checkbox { justify-content: flex-start; } - .facets-vertical .button-show-more, .facets-vertical .button-show-less { + .facets-vertical .button-show-more, + .facets-vertical .button-show-less { margin-top: 1.3rem; } From 2c78c1074bb044ae7dc547a03f52915ffe7d6ce9 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:34:58 -0400 Subject: [PATCH 073/176] feedback --- assets/facets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index 2706a6daf4f..16b9db54809 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -9,7 +9,7 @@ class FacetFiltersForm extends HTMLElement { this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this)); this.querySelector('form').addEventListener('keydown', (event) => { - if (event.target.tagName == 'LI' && event.code == 'Space') { + if (event.target.tagName === 'LI' && event.code === 'Space') { event.preventDefault(); event.target.querySelector('input').click(); } From a61a1280d3aa4d903d2da449aaa3c8da7de14eac Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:42:12 -0400 Subject: [PATCH 074/176] feedback css --- assets/component-facets.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index bf3d5762a44..3974190e858 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1019,10 +1019,7 @@ input.mobile-facets__checkbox { margin-top: 1.3rem; } - .facets-wrap-show-more + .button-show-more .label-show-less { - display: none; - } - + .facets-wrap-show-more + .button-show-more .label-show-less, .facets-wrap:not(.facets-wrap-show-more) + .button-show-more .label-show-more { display: none; } From 670330b5a4341dfe4423e519126249c69c66515c Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:43:34 -0400 Subject: [PATCH 075/176] feedback js --- assets/facets.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 16b9db54809..92a79002377 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -178,11 +178,7 @@ class FacetFiltersForm extends HTMLElement { } else { const forms = []; sortFilterForms.forEach((form) => { - if (form.id == 'FacetSortForm' || form.id == 'FacetFiltersForm') { - const searchParams = this.createSearchParams(form) - forms.push(searchParams) - } - }) + if (form.id == 'FacetSortForm' || form.id == 'FacetFiltersForm') forms.push(this.createSearchParams(form))}) this.onSubmitForm(forms.join('&'), event) } } From 9b7a98822f93457ff3479fbb3806570e2f27cbe6 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 08:45:16 -0400 Subject: [PATCH 076/176] feedback js --- assets/facets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index 92a79002377..a2b374e8ccd 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -236,7 +236,7 @@ customElements.define('price-range', PriceRange); class FacetRemove extends HTMLElement { constructor() { super(); - this.querySelector('a').addEventListener('click', this.closeFilter.bind(this)); + this.querySelector('a').addEventListener('click', this.closeFilter); this.querySelector('a').addEventListener('keydown', (event) => { if (event.code == 'Space') this.closeFilter(event); }); From f85efa65cdeb73664ffa495e74fa741223bf58e3 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 10:35:16 -0400 Subject: [PATCH 077/176] clean up --- assets/facets.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index a2b374e8ccd..29a3d02b775 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -7,8 +7,9 @@ class FacetFiltersForm extends HTMLElement { this.onSubmitHandler(event); }, 500); - this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this)); - this.querySelector('form').addEventListener('keydown', (event) => { + const facetForm = this.querySelector('form'); + facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this)); + facetForm.addEventListener('keydown', (event) => { if (event.target.tagName === 'LI' && event.code === 'Space') { event.preventDefault(); event.target.querySelector('input').click(); From 4bb05ef9e41ae15286927b9a0a5fe48f1c589448 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 11:41:17 -0400 Subject: [PATCH 078/176] remove page width --- assets/component-facets.css | 8 +++++--- sections/main-collection-product-grid.liquid | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 3974190e858..2911964cf97 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -936,6 +936,8 @@ input.mobile-facets__checkbox { @media screen and (min-width: 750px) { .facets-vertical { display: flex; + max-width: var(--page-width); + margin: 0 auto; } .facets-vertical .disclosure-has-popup[open] > summary::before { @@ -947,8 +949,6 @@ input.mobile-facets__checkbox { border: none; max-height: none; width: 26rem; - padding-left: 2rem; - margin-left: -2rem; } .facets-vertical .facets__form { @@ -1003,10 +1003,12 @@ input.mobile-facets__checkbox { .facets-vertical .facets-wrapper { padding-right: 3rem; + padding-left: 5rem; } - .product-grid-container { + .facets-vertical .product-grid-container { width: 100%; + padding-right: 5rem; } .facets-vertical .button-show-more { diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index a814487a76c..7261a0ce15e 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -74,7 +74,7 @@ {%- endif -%} {%- endif -%} -
+
{{ 'component-facets.css' | asset_url | stylesheet_tag }} {%- if section.settings.enable_filtering -%} From ff6f2ea46fc28b0ffb3f1bc90dc998719c0b32ea Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 11:57:10 -0400 Subject: [PATCH 079/176] feedback --- assets/component-facets.css | 5 ++--- snippets/facets.liquid | 3 +-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 2911964cf97..6e13c04b113 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -199,8 +199,7 @@ .facets__summary { color: rgba(var(--color-foreground), 0.75); font-size: 1.4rem; - margin-bottom: 1.5rem; - padding: 0 1.75rem 0 0; + padding: 0 1.75rem 1.5rem 0; } .facets__disclosure fieldset { @@ -969,7 +968,7 @@ input.mobile-facets__checkbox { } .facets-vertical .facets__summary { - margin-top: 1.5rem; + padding-top: 1.5rem; } .facets-vertical .facets__heading { diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 6c51ff53cd0..3cafd4eac39 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -106,10 +106,9 @@
    {%- for value in filter.values -%} -
  • +
{%- if filter.values.size > 10 and filter_type == 'vertical' -%} - From a794b5388fad41ac343c0158b8b5eb135469eb5a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 12:20:03 -0400 Subject: [PATCH 081/176] fix z index --- assets/component-facets.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 6e13c04b113..380044119f1 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -199,7 +199,8 @@ .facets__summary { color: rgba(var(--color-foreground), 0.75); font-size: 1.4rem; - padding: 0 1.75rem 1.5rem 0; + padding: 0 1.75rem 0 0; + margin-bottom: 1.5rem; } .facets__disclosure fieldset { @@ -969,6 +970,8 @@ input.mobile-facets__checkbox { .facets-vertical .facets__summary { padding-top: 1.5rem; + margin-bottom: 0; + padding-bottom: 1.5rem; } .facets-vertical .facets__heading { @@ -1072,6 +1075,10 @@ input.mobile-facets__checkbox { .facets-vertical .facet-filters.sorting.no-js { padding-left: 0; } + + .facets-vertical .facet-checkbox input[type='checkbox'] { + z-index: 0; + } } @media screen and (max-width: 998px) { From 081e566ad78dca32dc86d667cbc071e76f07eb46 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 12:44:12 -0400 Subject: [PATCH 082/176] clean focus --- assets/facets.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 762b11a887b..a21eb71505a 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -19,13 +19,18 @@ class FacetFiltersForm extends HTMLElement { const showMore = this.querySelector('.button-show-more'); if (showMore) { showMore.addEventListener('click', (event) => { - console.log('fd', event.target.className) - if (event.target.className === 'label-show-more') { - this.querySelectorAll(".facets__item-show-more")[0].focus(); - } + event.preventDefault(); showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) }) + showMore.addEventListener('keydown', (event) => { + if (event.target.className === 'button-show-more link underlined-link' && event.code === 'Space') { + event.preventDefault(); + showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); + showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) + this.querySelectorAll(".facets__item-show-more")[0].focus(); + } + }) } const facetWrapper = this.querySelector('#FacetsWrapperDesktop'); From 2b212db623415619baffd2452c347d1ae31204b2 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 13:06:04 -0400 Subject: [PATCH 083/176] Add timeout --- assets/facets.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index a21eb71505a..a7a3619d212 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -19,7 +19,6 @@ class FacetFiltersForm extends HTMLElement { const showMore = this.querySelector('.button-show-more'); if (showMore) { showMore.addEventListener('click', (event) => { - event.preventDefault(); showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) }) @@ -28,7 +27,10 @@ class FacetFiltersForm extends HTMLElement { event.preventDefault(); showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) - this.querySelectorAll(".facets__item-show-more")[0].focus(); + const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] + if (!nextElementToFocus.classList.contains('.hidden')) { + setTimeout(nextElementToFocus.focus(), 5000); + } } }) } From 470b2348086477bc71fc72b87f215e862426d260 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 14:24:21 -0400 Subject: [PATCH 084/176] revert --- assets/component-facets.css | 4 ---- sections/main-collection-product-grid.liquid | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 380044119f1..afc87a766ef 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -936,8 +936,6 @@ input.mobile-facets__checkbox { @media screen and (min-width: 750px) { .facets-vertical { display: flex; - max-width: var(--page-width); - margin: 0 auto; } .facets-vertical .disclosure-has-popup[open] > summary::before { @@ -1005,12 +1003,10 @@ input.mobile-facets__checkbox { .facets-vertical .facets-wrapper { padding-right: 3rem; - padding-left: 5rem; } .facets-vertical .product-grid-container { width: 100%; - padding-right: 5rem; } .facets-vertical .button-show-more { diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 7261a0ce15e..a814487a76c 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -74,7 +74,7 @@ {%- endif -%} {%- endif -%} -
+
{{ 'component-facets.css' | asset_url | stylesheet_tag }} {%- if section.settings.enable_filtering -%} From 472c411341d81651dd6cfb01f1b38f1dbc9324d8 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 14:33:12 -0400 Subject: [PATCH 085/176] fix overflow --- assets/component-facets.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/component-facets.css b/assets/component-facets.css index afc87a766ef..cc6a2205e37 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -947,6 +947,7 @@ input.mobile-facets__checkbox { border: none; max-height: none; width: 26rem; + overflow: visible; } .facets-vertical .facets__form { From d8221fdc7fc67f7cadf0717e9f1a49ef3d18bb41 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 14:34:01 -0400 Subject: [PATCH 086/176] feedback Co-authored-by: Andrew Etchen --- assets/facets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index a7a3619d212..0d5e609875e 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -257,7 +257,7 @@ class FacetRemove extends HTMLElement { constructor() { super(); this.querySelector('a').addEventListener('click', this.closeFilter); - this.querySelector('a').addEventListener('keydown', (event) => { + this.querySelector('a').addEventListener('keydown', (event) => { if (event.code == 'Space') this.closeFilter(event); }); } From a7fbd081efced6fe1d5f1e06566bf339af229c1b Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 14:34:24 -0400 Subject: [PATCH 087/176] Remove spacing Co-authored-by: Andrew Etchen --- assets/facets.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 0d5e609875e..91d045a254e 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -9,7 +9,7 @@ class FacetFiltersForm extends HTMLElement { const facetForm = this.querySelector('form'); facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this)); - facetForm.addEventListener('keydown', (event) => { + facetForm.addEventListener('keydown', (event) => { if (event.target.tagName === 'LI' && event.code === 'Space') { event.preventDefault(); event.target.querySelector('input').click(); @@ -19,13 +19,13 @@ class FacetFiltersForm extends HTMLElement { const showMore = this.querySelector('.button-show-more'); if (showMore) { showMore.addEventListener('click', (event) => { - showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); + showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) }) showMore.addEventListener('keydown', (event) => { if (event.target.className === 'button-show-more link underlined-link' && event.code === 'Space') { event.preventDefault(); - showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); + showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] if (!nextElementToFocus.classList.contains('.hidden')) { From 51c7364b247e7c115a53437797b7f926c6831c69 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 14:35:24 -0400 Subject: [PATCH 088/176] clean up --- snippets/facets.liquid | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 5022716b41e..d841ab7e68b 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -33,10 +33,8 @@ {% if enable_filtering %}
- {%- if filter_type != 'vertical' -%} - {%- unless results.filters == empty -%} -

{{ 'products.facets.filter_by_label' | t }}

- {%- endunless -%} + {%- if filter_type != 'vertical' and results.filters != empty -%} +

{{ 'products.facets.filter_by_label' | t }}

{%- endif -%} {%- if filter_type == 'vertical' -%} From 43106990dd0ec556da9a068bfcdb6f8c3afce0c7 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 15:05:39 -0400 Subject: [PATCH 089/176] fix focus --- assets/facets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/facets.js b/assets/facets.js index 91d045a254e..a22ffad63fe 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -29,7 +29,7 @@ class FacetFiltersForm extends HTMLElement { showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] if (!nextElementToFocus.classList.contains('.hidden')) { - setTimeout(nextElementToFocus.focus(), 5000); + nextElementToFocus.querySelector('input').focus() } } }) From 9a22f9441fbe392cc0df8bd51de692f8d016f6cc Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 15:08:19 -0400 Subject: [PATCH 090/176] clean up --- assets/facets.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index a22ffad63fe..7bc60643a7f 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -10,7 +10,7 @@ class FacetFiltersForm extends HTMLElement { const facetForm = this.querySelector('form'); facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this)); facetForm.addEventListener('keydown', (event) => { - if (event.target.tagName === 'LI' && event.code === 'Space') { + if (event.target.tagName === 'LI' && (event.code === 'Space' || event.code === 'Enter' )) { event.preventDefault(); event.target.querySelector('input').click(); } @@ -18,15 +18,13 @@ class FacetFiltersForm extends HTMLElement { const showMore = this.querySelector('.button-show-more'); if (showMore) { - showMore.addEventListener('click', (event) => { - showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); - showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) + showMore.addEventListener('click', () => { + this.expandShowMore(); }) showMore.addEventListener('keydown', (event) => { - if (event.target.className === 'button-show-more link underlined-link' && event.code === 'Space') { + if (event.target.className === 'button-show-more link underlined-link' && (event.code === 'Space' || event.code === 'Enter' )) { event.preventDefault(); - showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); - showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) + this.expandShowMore(); const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] if (!nextElementToFocus.classList.contains('.hidden')) { nextElementToFocus.querySelector('input').focus() @@ -39,6 +37,11 @@ class FacetFiltersForm extends HTMLElement { if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape); } + expandShowMore() { + showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); + showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) + } + static setListeners() { const onHistoryChange = (event) => { const searchParams = event.state ? event.state.searchParams : FacetFiltersForm.searchParamsInitial; From 6a1d0a7581de0d5f1ee0ce2fa854abdfb9564c9a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 15:11:37 -0400 Subject: [PATCH 091/176] fix typo --- assets/facets.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 7bc60643a7f..0e01246f1ea 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -19,12 +19,12 @@ class FacetFiltersForm extends HTMLElement { const showMore = this.querySelector('.button-show-more'); if (showMore) { showMore.addEventListener('click', () => { - this.expandShowMore(); + this.expandShowMore(showMore); }) showMore.addEventListener('keydown', (event) => { if (event.target.className === 'button-show-more link underlined-link' && (event.code === 'Space' || event.code === 'Enter' )) { event.preventDefault(); - this.expandShowMore(); + this.expandShowMore(showMore); const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] if (!nextElementToFocus.classList.contains('.hidden')) { nextElementToFocus.querySelector('input').focus() @@ -37,7 +37,7 @@ class FacetFiltersForm extends HTMLElement { if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape); } - expandShowMore() { + expandShowMore(showMore) { showMore.closest('.facets__display').querySelector('.facets-wrap').classList.toggle('facets-wrap-show-more', !showMore.closest('.facets__display').querySelector('.facets-wrap').classList.contains('facets-wrap-show-more')); showMore.closest('.facets__display').querySelectorAll('.facets__item.facets__item-show-more').forEach(item => item.classList.toggle('hidden', !item.classList.contains('hidden'))) } From 3f6fd39ebe3f87e766bc06ba3d654d073fcd03d6 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 15:33:40 -0400 Subject: [PATCH 092/176] clean up --- assets/component-facets.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index cc6a2205e37..7d3c735707e 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -990,8 +990,13 @@ input.mobile-facets__checkbox { padding-left: 0; } + .facets-vertical .facets__list { + padding-top: 0; + padding-bottom: 0; + } + .facets-vertical .facets__display { - padding-bottom: 1.7rem; + padding-bottom: 1.5rem; } .facets-vertical .facets__header { @@ -1017,7 +1022,7 @@ input.mobile-facets__checkbox { .facets-vertical .button-show-more, .facets-vertical .button-show-less { - margin-top: 1.3rem; + margin-top: 1.5rem; } .facets-wrap-show-more + .button-show-more .label-show-less, @@ -1049,7 +1054,7 @@ input.mobile-facets__checkbox { } .facets-vertical .facets__price { - padding: 1rem 0.5rem 1.2rem 0; + padding: 0.5rem 0.5rem 0.5rem 0; } .facets-vertical .facets__price .field:last-of-type { From 89bc1c5a017a1a07fd251636c6299eacc27e7f1b Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Wed, 23 Mar 2022 19:41:27 +0000 Subject: [PATCH 093/176] Update 18 translation files --- locales/bg-BG.json | 9 ++++++--- locales/da.json | 9 ++++++--- locales/es.json | 9 ++++++--- locales/fi.json | 9 ++++++--- locales/hu.json | 9 ++++++--- locales/id.json | 5 ++++- locales/it.json | 9 ++++++--- locales/ja.json | 9 ++++++--- locales/lt-LT.json | 9 ++++++--- locales/pl.json | 9 ++++++--- locales/pt-BR.json | 9 ++++++--- locales/sk-SK.json | 9 ++++++--- locales/sl-SI.json | 9 ++++++--- locales/sv.json | 9 ++++++--- locales/th.json | 9 ++++++--- locales/tr.json | 9 ++++++--- locales/zh-CN.json | 9 ++++++--- locales/zh-TW.json | 9 ++++++--- 18 files changed, 106 insertions(+), 52 deletions(-) diff --git a/locales/bg-BG.json b/locales/bg-BG.json index 7a8e0c9c28c..8c11e965fa9 100644 --- a/locales/bg-BG.json +++ b/locales/bg-BG.json @@ -156,7 +156,7 @@ "facets": { "apply": "Приложи", "clear": "Изчисти", - "clear_all": "Изчисти всички", + "clear_all": "Премахване на всички", "from": "От", "filter_and_sort": "Филтриране и сортиране", "filter_by_label": "Филтър:", @@ -178,7 +178,10 @@ "sort_button": "Сортиране", "sort_by_label": "Сортиране по:", "to": "Към", - "clear_filter": "Изчисти филтъра" + "clear_filter": "Премахване на филтъра", + "filter_selected_accessibility": "{{ type }} ({{ count }} избрани филтъра)", + "show_more": "Покажи повече", + "show_less": "Покажи по-малко" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Колекция", "empty": "Не са открити продукти", - "use_fewer_filters_html": "Използвайте по-малко филтри или изчистете всички" + "use_fewer_filters_html": "Използвайте по-малко филтри или премахнете всички" }, "video": { "load_video": "Зареждане на видео: {{ description }}" diff --git a/locales/da.json b/locales/da.json index a7fdbd3ffe6..22aef54c692 100644 --- a/locales/da.json +++ b/locales/da.json @@ -156,7 +156,7 @@ "facets": { "apply": "Anvend", "clear": "Ryd", - "clear_all": "Ryd alt", + "clear_all": "Fjern alle", "from": "Fra", "filter_and_sort": "Filtrer og sortér", "filter_by_label": "Filter:", @@ -178,7 +178,10 @@ "sort_button": "Sortér", "sort_by_label": "Sortér efter:", "to": "Til", - "clear_filter": "Ryd filter" + "clear_filter": "Fjern filter", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtre er valgt)", + "show_more": "Vis mere", + "show_less": "Vis mindre" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Kollektion", "empty": "Der blev ikke fundet nogen produkter", - "use_fewer_filters_html": "Brug færre filtre, eller ryd alt" + "use_fewer_filters_html": "Brug færre filtre, eller fjern alle" }, "video": { "load_video": "Indlæs video: {{ description }}" diff --git a/locales/es.json b/locales/es.json index 502e8678ac6..40af7af5d22 100644 --- a/locales/es.json +++ b/locales/es.json @@ -156,7 +156,7 @@ "facets": { "apply": "Aplicar", "clear": "Borrar", - "clear_all": "Borrar todo", + "clear_all": "Eliminar todos", "from": "De", "filter_and_sort": "Filtrar y ordenar", "filter_by_label": "Filtrar:", @@ -178,7 +178,10 @@ "sort_button": "Ordenar", "sort_by_label": "Ordenar por:", "to": "Para", - "clear_filter": "Borrar filtro" + "clear_filter": "Eliminar filtro", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtros seleccionados)", + "show_more": "Mostrar más", + "show_less": "Mostrar menos" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Colección", "empty": "No se encontró ningún producto", - "use_fewer_filters_html": "Usa menos filtros o borra todo" + "use_fewer_filters_html": "Usa menos filtros o elimínalos todos" }, "video": { "load_video": "Cargar video: {{ description }}" diff --git a/locales/fi.json b/locales/fi.json index 4e7a1362bc3..0416ef05d0c 100644 --- a/locales/fi.json +++ b/locales/fi.json @@ -156,7 +156,7 @@ "facets": { "apply": "Käytä", "clear": "Tyhjennä", - "clear_all": "Tyhjennä kaikki", + "clear_all": "Poista kaikki", "from": "Alkaen", "filter_and_sort": "Suodatus ja lajittelu", "filter_by_label": "Suodatin:", @@ -178,7 +178,10 @@ "sort_button": "Lajittele", "sort_by_label": "Lajittelu:", "to": "Asti", - "clear_filter": "Tyhjennä suodatin" + "clear_filter": "Poista suodatin", + "filter_selected_accessibility": "{{ type }} ({{ count }} suodatinta valittu)", + "show_more": "Näytä enemmän", + "show_less": "Näytä vähemmän" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Kokoelma", "empty": "Tuotteita ei löytynyt", - "use_fewer_filters_html": "Käytä vähemmän suodattimia tai tyhjennä kaikki" + "use_fewer_filters_html": "Käytä vähemmän suodattimia tai poista kaikki" }, "video": { "load_video": "Lataa video: {{ description }}" diff --git a/locales/hu.json b/locales/hu.json index 2b7db288f21..c9db46ad2ec 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -156,7 +156,7 @@ "facets": { "apply": "Alkalmaz", "clear": "Törlés", - "clear_all": "Az összes törlése", + "clear_all": "Az összes eltávolítása", "from": "Ettől:", "filter_and_sort": "Szűrés és rendezés", "filter_by_label": "Szűrés:", @@ -178,7 +178,10 @@ "sort_button": "Rendezés", "sort_by_label": "Rendezési szempont:", "to": "Eddig:", - "clear_filter": "Szűrő kikapcsolása" + "clear_filter": "Szűrő eltávolítása", + "filter_selected_accessibility": "{{ type }} ({{ count }} szűrő kiválasztva)", + "show_more": "Több részlet", + "show_less": "Kevesebb részlet" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Kollekció", "empty": "Nincs találat", - "use_fewer_filters_html": "Használj kevesebb szűrőt, vagy töröld az összeset." + "use_fewer_filters_html": "Használj kevesebb szűrőt, vagy távolítsd el az összeset." }, "video": { "load_video": "Videó betöltése: {{ description }}" diff --git a/locales/id.json b/locales/id.json index bf35d615623..72706e30578 100644 --- a/locales/id.json +++ b/locales/id.json @@ -178,7 +178,10 @@ "sort_button": "Urutkan", "sort_by_label": "Urutkan berdasarkan:", "to": "Sampai", - "clear_filter": "Hapus filter" + "clear_filter": "Hapus filter", + "filter_selected_accessibility": "{{ type }} ({{ count }} filter dipilih)", + "show_more": "Selengkapnya", + "show_less": "Sembunyikan lainnya" } }, "templates": { diff --git a/locales/it.json b/locales/it.json index 8115b9b3ca5..bd5c340146a 100644 --- a/locales/it.json +++ b/locales/it.json @@ -156,7 +156,7 @@ "facets": { "apply": "Applica", "clear": "Cancella", - "clear_all": "Cancella tutto", + "clear_all": "Rimuovi tutto", "from": "Da", "filter_and_sort": "Filtra e ordina", "filter_by_label": "Filtra:", @@ -178,7 +178,10 @@ "sort_button": "Ordina", "sort_by_label": "Ordina per:", "to": "A", - "clear_filter": "Rimuovi filtro" + "clear_filter": "Rimuovi filtri", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtri selezionati)", + "show_more": "Mostra di più", + "show_less": "Mostra di meno" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Collezione", "empty": "Nessun prodotto trovato", - "use_fewer_filters_html": "Utilizza meno filtri o cancella tutto" + "use_fewer_filters_html": "Utilizza meno filtri o rimuovi tutto" }, "video": { "load_video": "Carica il video: {{ description }}" diff --git a/locales/ja.json b/locales/ja.json index 2aa510fef59..0ae857bbb2c 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -156,7 +156,7 @@ "facets": { "apply": "適用", "clear": "クリア", - "clear_all": "すべてクリア", + "clear_all": "すべてを削除する", "from": "差出人", "filter_and_sort": "絞り込みと並び替え", "filter_by_label": "絞り込み:", @@ -178,7 +178,10 @@ "sort_button": "並び替え", "sort_by_label": "並び替え: ", "to": "受取人", - "clear_filter": "絞り込みをクリア" + "clear_filter": "絞り込みを削除する", + "filter_selected_accessibility": "{{ type }} ({{ count }}件のフィルターを選択済み)", + "show_more": "さらに表示する", + "show_less": "表示を減らす" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "コレクション", "empty": "商品が見つかりません", - "use_fewer_filters_html": "絞り込みの数を減らす、またはすべてクリア" + "use_fewer_filters_html": "絞り込みの数を減らす、またはすべて削除する" }, "video": { "load_video": "動画を読み込む: {{ description }}" diff --git a/locales/lt-LT.json b/locales/lt-LT.json index 629cff799b7..5f71cc7e794 100644 --- a/locales/lt-LT.json +++ b/locales/lt-LT.json @@ -158,7 +158,7 @@ "facets": { "apply": "Taikyti", "clear": "Išvalyti", - "clear_all": "Išvalyti viską", + "clear_all": "Pašalinti viską", "from": "Nuo", "filter_and_sort": "Filtruoti ir rūšiuoti", "filter_by_label": "Filtruoti:", @@ -186,7 +186,10 @@ "few": "{{ count }} gaminiai (-ių)", "many": "{{ count }} gaminiai (-ių)" }, - "clear_filter": "Išvalyti filtrą" + "clear_filter": "Pašalinti filtrą", + "filter_selected_accessibility": "{{ type }} (pasirinkta filtrų: {{ count }})", + "show_more": "Rodyti daugiau", + "show_less": "Rodyti mažiau" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Kolekcija", "empty": "Nerasta jokių gaminių", - "use_fewer_filters_html": "Naudoti mažiau filtrų arba išvalyti viską" + "use_fewer_filters_html": "Naudoti mažiau filtrų arba pašalinti viską" }, "video": { "load_video": "Įkelti vaizdo įrašą „{{ description }}“" diff --git a/locales/pl.json b/locales/pl.json index 7133c971f02..18a72984bdb 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -158,7 +158,7 @@ "facets": { "apply": "Zastosuj", "clear": "Wyczyść", - "clear_all": "Wyczyść wszystko", + "clear_all": "Usuń wszystko", "from": "Od", "filter_and_sort": "Filtrowanie i sortowanie", "filter_by_label": "Filtr:", @@ -186,7 +186,10 @@ "few": "{{ count }} produkty(-ów)", "many": "{{ count }} produkty(-ów)" }, - "clear_filter": "Wyczyść filtr" + "clear_filter": "Usuń filtr", + "filter_selected_accessibility": "{{ type }} (wybrano {{ count }} fitry(-ów))", + "show_more": "Pokaż więcej", + "show_less": "Pokaż mniej" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Kolekcja", "empty": "Nie znaleziono produktów", - "use_fewer_filters_html": "Użyj mniejszej ilości filtrów lub Wyczyść wszystko" + "use_fewer_filters_html": "Użyj mniejszej ilości filtrów lub usuń wszystko" }, "video": { "load_video": "Załaduj film: {{ description }}" diff --git a/locales/pt-BR.json b/locales/pt-BR.json index d6584f2952c..968e235ae36 100644 --- a/locales/pt-BR.json +++ b/locales/pt-BR.json @@ -156,7 +156,7 @@ "facets": { "apply": "Aplicar", "clear": "Limpar", - "clear_all": "Limpar tudo", + "clear_all": "Remover tudo", "from": "De", "filter_and_sort": "Filtrar e organizar", "filter_by_label": "Filtrar:", @@ -178,7 +178,10 @@ "sort_button": "Organizar", "sort_by_label": "Ordenar por:", "to": "Para", - "clear_filter": "Limpar filtro" + "clear_filter": "Remover filtro", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)", + "show_more": "Exibir mais", + "show_less": "Exibir menos" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Coleção", "empty": "Nenhum produto encontrado", - "use_fewer_filters_html": "Usar menos filtros ou limpar tudo" + "use_fewer_filters_html": "Usar menos filtros ou remover tudo" }, "video": { "load_video": "Carregar vídeo: {{ description }}" diff --git a/locales/sk-SK.json b/locales/sk-SK.json index 35d7aa22c62..3f6eaba6265 100644 --- a/locales/sk-SK.json +++ b/locales/sk-SK.json @@ -158,7 +158,7 @@ "facets": { "apply": "Použiť", "clear": "Vymazať", - "clear_all": "Vymazať všetko", + "clear_all": "Odstrániť všetky", "from": "Od", "filter_and_sort": "Filtrovať a zoradiť", "filter_by_label": "Filtrovať:", @@ -186,7 +186,10 @@ "few": "Počet produktov: {{ count }}", "many": "Počet produktov: {{ count }}" }, - "clear_filter": "Vymazať filter" + "clear_filter": "Odstrániť filter", + "filter_selected_accessibility": "{{ type }} (vybrané filtre: {{ count }})", + "show_more": "Zobraziť viac", + "show_less": "Zobraziť menej" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Kolekcia", "empty": "Nenašli sa žiadne produkty", - "use_fewer_filters_html": "Použiť menej filtrov alebo vymazať všetko" + "use_fewer_filters_html": "Použite menej filtrov alebo všetky odstráňte" }, "video": { "load_video": "Načítať video: {{ description }}" diff --git a/locales/sl-SI.json b/locales/sl-SI.json index 6be9bf32b5c..72239d12b9c 100644 --- a/locales/sl-SI.json +++ b/locales/sl-SI.json @@ -158,7 +158,7 @@ "facets": { "apply": "Uporabi", "clear": "Počisti", - "clear_all": "Počisti vse", + "clear_all": "Odstrani vse", "from": "Od", "filter_and_sort": "Filtriranje in razvrščanje", "filter_by_label": "Filtriraj:", @@ -186,7 +186,10 @@ "few": "Št. izdelkov: {{ count }}", "two": "Št. izdelkov: {{ count }}" }, - "clear_filter": "Počisti filter" + "clear_filter": "Odstrani filter", + "filter_selected_accessibility": "{{ type }} (št. izbranih filtrov: {{ count }})", + "show_more": "Prikaži več", + "show_less": "Prikaži manj" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Zbirka", "empty": "Ni najdenih izdelkov", - "use_fewer_filters_html": "Uporabite manj filtrov ali počistite vse" + "use_fewer_filters_html": "Uporabite manj filtrov ali odstranite vse" }, "video": { "load_video": "Naloži videoposnetek: {{ description }}" diff --git a/locales/sv.json b/locales/sv.json index 56501c63a6a..70baf7ad7ee 100644 --- a/locales/sv.json +++ b/locales/sv.json @@ -156,7 +156,7 @@ "facets": { "apply": "Tillämpa", "clear": "Rensa", - "clear_all": "Rensa alla", + "clear_all": "Ta bort alla", "from": "Från", "filter_and_sort": "Filtrera och sortera", "filter_by_label": "Filter:", @@ -178,7 +178,10 @@ "sort_button": "Sortera", "sort_by_label": "Sortera efter:", "to": "Till", - "clear_filter": "Rensa filter" + "clear_filter": "Ta bort filter", + "filter_selected_accessibility": "{{ type }} ({{ count }}) filter valda", + "show_more": "Visa mer", + "show_less": "Visa mindre" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Produktserie", "empty": "Inga produkter hittades", - "use_fewer_filters_html": "Använd färre filter eller rensa alla" + "use_fewer_filters_html": "Använd färre filter eller ta bort alla" }, "video": { "load_video": "Ladda video: {{ description }}" diff --git a/locales/th.json b/locales/th.json index 2457d0d6d92..583348b449d 100644 --- a/locales/th.json +++ b/locales/th.json @@ -156,7 +156,7 @@ "facets": { "apply": "นำไปใช้", "clear": "ล้าง", - "clear_all": "ล้างทั้งหมด", + "clear_all": "ลบออกทั้งหมด", "from": "จาก", "filter_and_sort": "กรองและจัดเรียง", "filter_by_label": "ตัวกรอง:", @@ -178,7 +178,10 @@ "sort_button": "จัดเรียง", "sort_by_label": "เรียงตาม:", "to": "ไปยัง", - "clear_filter": "ล้างตัวกรอง" + "clear_filter": "ลบตัวกรองออก", + "filter_selected_accessibility": "{{ type }} (เลือกตัวกรองแล้ว {{ count }} รายการ)", + "show_more": "แสดงมากขึ้น", + "show_less": "แสดงน้อยลง" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "คอลเลกชัน", "empty": "ไม่พบสินค้า", - "use_fewer_filters_html": "ใช้ตัวกรองให้น้อยลง หรือล้างทั้งหมด" + "use_fewer_filters_html": "ใช้ตัวกรองให้น้อยลง หรือลบทั้งหมด" }, "video": { "load_video": "โหลดวิดีโอ: {{ description }}" diff --git a/locales/tr.json b/locales/tr.json index 16f51e93e39..0a34134cd0f 100644 --- a/locales/tr.json +++ b/locales/tr.json @@ -156,7 +156,7 @@ "facets": { "apply": "Uygula", "clear": "Temizle", - "clear_all": "Tümünü temizle", + "clear_all": "Tümünü kaldır", "from": "En düşük", "filter_and_sort": "Filtrele ve sırala", "filter_by_label": "Filtre:", @@ -178,7 +178,10 @@ "sort_button": "Sırala", "sort_by_label": "Sıralama ölçütü:", "to": "En yüksek", - "clear_filter": "Filtreyi temizle" + "clear_filter": "Filtreyi kaldır", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtre seçildi)", + "show_more": "Daha fazla göster", + "show_less": "Daha az göster" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Koleksiyon", "empty": "Ürün bulunamadı", - "use_fewer_filters_html": "Daha az filtre kullan veya tümünü temizle" + "use_fewer_filters_html": "Daha az filtre kullan veya tümünü kaldır" }, "video": { "load_video": "Videoyu yükle: {{ description }}" diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 5defd107581..767a3552987 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -156,7 +156,7 @@ "facets": { "apply": "应用", "clear": "清除", - "clear_all": "清除所有内容", + "clear_all": "全部删除", "from": "从", "filter_and_sort": "筛选和排序", "filter_by_label": "筛选条件：", @@ -178,7 +178,10 @@ "sort_button": "排序", "sort_by_label": "排序依据：", "to": "到", - "clear_filter": "清除筛选条件" + "clear_filter": "删除筛选条件", + "filter_selected_accessibility": "{{ type }}（已选择 {{ count }} 个筛选条件）", + "show_more": "显示更多内容", + "show_less": "隐藏部分内容" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "收藏", "empty": "未找到产品", - "use_fewer_filters_html": "减少使用的筛选条件数量或清除所有内容" + "use_fewer_filters_html": "减少使用的筛选条件数量或删除所有筛选条件" }, "video": { "load_video": "加载视频：{{ description }}" diff --git a/locales/zh-TW.json b/locales/zh-TW.json index de0f50ff9de..eabdbc99ff5 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -156,7 +156,7 @@ "facets": { "apply": "套用", "clear": "清除", - "clear_all": "清除全部", + "clear_all": "全部移除", "from": "寄件人", "filter_and_sort": "篩選與排序", "filter_by_label": "篩選條件：", @@ -178,7 +178,10 @@ "sort_button": "排序", "sort_by_label": "排序依據：", "to": "給", - "clear_filter": "清除篩選條件" + "clear_filter": "移除篩選條件", + "filter_selected_accessibility": "{{ type }} (已選取 {{ count }} 個篩選條件)", + "show_more": "顯示更多內容", + "show_less": "顯示較少內容" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "商品系列", "empty": "找不到任何產品", - "use_fewer_filters_html": "使用較少篩選條件或清除全部" + "use_fewer_filters_html": "使用較少篩選條件或全部移除" }, "video": { "load_video": "載入影片：{{ description }}" From ee4d245b870c79a23da4d89ada29d0a2f7a6de6a Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 23 Mar 2022 16:58:19 -0400 Subject: [PATCH 094/176] fix multiple buttons --- assets/facets.js | 29 +++++++++++++++++------------ snippets/facets.liquid | 2 +- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index 0e01246f1ea..fdb1ea2af79 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -16,20 +16,25 @@ class FacetFiltersForm extends HTMLElement { } }); - const showMore = this.querySelector('.button-show-more'); - if (showMore) { - showMore.addEventListener('click', () => { - this.expandShowMore(showMore); - }) - showMore.addEventListener('keydown', (event) => { - if (event.target.className === 'button-show-more link underlined-link' && (event.code === 'Space' || event.code === 'Enter' )) { + const showMoreButtons = this.querySelectorAll('[id^="Show-More-"]'); + if (showMoreButtons) { + showMoreButtons.forEach((element) => { + element.addEventListener('click', (event) => { event.preventDefault(); - this.expandShowMore(showMore); - const nextElementToFocus = this.querySelectorAll(".facets__item-show-more")[0] - if (!nextElementToFocus.classList.contains('.hidden')) { - nextElementToFocus.querySelector('input').focus() + this.expandShowMore(event.target.parentNode); + }) + }) + showMoreButtons.forEach((element) => { + element.addEventListener('keydown', (event) => { + if (event.target.className === 'button-show-more link underlined-link' && (event.code === 'Space' || event.code === 'Enter' )) { + event.preventDefault(); + this.expandShowMore(element); + const nextElementToFocus = element.parentNode.querySelectorAll(".facets__item-show-more")[0] + if (!nextElementToFocus.classList.contains('.hidden')) { + nextElementToFocus.querySelector('input').focus() + } } - } + }) }) } diff --git a/snippets/facets.liquid b/snippets/facets.liquid index d841ab7e68b..2723b1054f2 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -140,7 +140,7 @@ {%- if filter.values.size > 10 and filter_type == 'vertical' -%} - From 1d273ce6ab44efad738b2c7d2be6c5b01c228413 Mon Sep 17 00:00:00 2001 From: "translation-platform[bot]" <34770790+translation-platform[bot]@users.noreply.github.com> Date: Thu, 24 Mar 2022 05:02:35 +0000 Subject: [PATCH 095/176] Update 5 translation files --- locales/ko.json | 9 ++++++--- locales/nb.json | 7 +++++-- locales/pt-PT.json | 9 ++++++--- locales/ru.json | 7 +++++-- locales/vi.json | 5 ++++- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/locales/ko.json b/locales/ko.json index e3fc98817f9..99f2a70dc65 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -156,7 +156,7 @@ "facets": { "apply": "적용", "clear": "지우기", - "clear_all": "모두 지우기", + "clear_all": "모두 제거", "from": "최저가", "filter_and_sort": "필터 및 정렬", "filter_by_label": "필터:", @@ -178,7 +178,10 @@ "sort_button": "정렬", "sort_by_label": "정렬 기준:", "to": "최고가", - "clear_filter": "필터 지우기" + "clear_filter": "필터 제거", + "filter_selected_accessibility": "{{ type }}({{ count }}개 필터 선택됨)", + "show_more": "자세히 표시", + "show_less": "간단히 표시" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "컬렉션", "empty": "제품을 찾을 수 없음", - "use_fewer_filters_html": "더 적은 수의 필터를 사용하거나 모두 지우기" + "use_fewer_filters_html": "더 적은 수의 필터를 사용하거나 모두 제거하기" }, "video": { "load_video": "동영상 로드: {{ description }}" diff --git a/locales/nb.json b/locales/nb.json index c533f85321f..372ae3334e6 100644 --- a/locales/nb.json +++ b/locales/nb.json @@ -178,7 +178,10 @@ "sort_button": "Sorter", "sort_by_label": "Sorter etter:", "to": "Til", - "clear_filter": "Fjern filter" + "clear_filter": "Fjern filter", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtre valgt)", + "show_more": "Vis mer", + "show_less": "Vis færre" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Samling", "empty": "Ingen produkter funnet", - "use_fewer_filters_html": "Bruk færre filtre eller tøm alle" + "use_fewer_filters_html": "Bruk færre filtre eller fjern alle" }, "video": { "load_video": "Last inn video: {{ description }}" diff --git a/locales/pt-PT.json b/locales/pt-PT.json index 7c3a7b8ec04..f52e682471b 100644 --- a/locales/pt-PT.json +++ b/locales/pt-PT.json @@ -156,7 +156,7 @@ "facets": { "apply": "Aplicar", "clear": "Limpar", - "clear_all": "Limpar tudo", + "clear_all": "Remover tudo", "from": "De", "filter_and_sort": "Filtrar e ordenar", "filter_by_label": "Filtrar:", @@ -178,7 +178,10 @@ "sort_button": "Ordenar", "sort_by_label": "Ordenar por:", "to": "Para", - "clear_filter": "Limpar filtro" + "clear_filter": "Remover filtro", + "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)", + "show_more": "Mostrar mais", + "show_less": "Mostrar menos" } }, "templates": { @@ -271,7 +274,7 @@ "collection_template": { "title": "Coleção", "empty": "Nenhum produto encontrado", - "use_fewer_filters_html": "Usar menos filtros ou limpar tudo" + "use_fewer_filters_html": "Utilizar menos filtros ou remover tudo" }, "video": { "load_video": "Carregar vídeo: {{ description }}" diff --git a/locales/ru.json b/locales/ru.json index c92ef7ea250..c9c0151fc88 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -186,7 +186,10 @@ "few": "Продуктов: {{ count }}", "many": "Продуктов: {{ count }}" }, - "clear_filter": "Удалить фильтр" + "clear_filter": "Снять фильтр", + "filter_selected_accessibility": "{{ type }} (установлены фильтры: {{ count }})", + "show_more": "Показать больше", + "show_less": "Показать меньше" } }, "templates": { @@ -285,7 +288,7 @@ "collection_template": { "title": "Коллекция", "empty": "Продукты не найдены", - "use_fewer_filters_html": "Используйте меньше фильтров или удалите фильтры" + "use_fewer_filters_html": "Используйте меньше фильтров или удалите все" }, "video": { "load_video": "Загрузить видео: {{ description }}" diff --git a/locales/vi.json b/locales/vi.json index b80dea0bcf9..b8c6c6c6c7e 100644 --- a/locales/vi.json +++ b/locales/vi.json @@ -178,7 +178,10 @@ "sort_button": "Sắp xếp", "sort_by_label": "Sắp xếp theo:", "to": "Đến", - "clear_filter": "Xóa bộ lọc" + "clear_filter": "Xóa bộ lọc", + "filter_selected_accessibility": "{{ type }} (Đã chọn {{ count }} bộ lọc)", + "show_more": "Hiển thị thêm", + "show_less": "Rút gọn" } }, "templates": { From b2fccd9e7c330242db81be464944bf19c60d6109 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 24 Mar 2022 11:44:50 -0400 Subject: [PATCH 096/176] feedback --- assets/facets.js | 1 + sections/main-collection-product-grid.liquid | 82 ++++++++++---------- 2 files changed, 41 insertions(+), 42 deletions(-) diff --git a/assets/facets.js b/assets/facets.js index fdb1ea2af79..3805340512c 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -17,6 +17,7 @@ class FacetFiltersForm extends HTMLElement { }); const showMoreButtons = this.querySelectorAll('[id^="Show-More-"]'); + console.log(showMoreButtons, 'hehhehe') if (showMoreButtons) { showMoreButtons.forEach((element) => { element.addEventListener('click', (event) => { diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index a814487a76c..d2406d50bf5 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -27,51 +27,49 @@ {%- endstyle -%}
- {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} - {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} - -
-
-
-

- -

-
- {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} - - {% render 'icon-caret' %} -
+ {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} + + +
+
+

+ +

+
+ {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} + + {% render 'icon-caret' %}
-
+ +
-
-

- - {%- if collection.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }} - {%- elsif collection.products_count == collection.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: collection.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }} - {%- endif -%} - -

- -
- - - {%- endif -%} +
+

+ + {%- if collection.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }} + {%- elsif collection.products_count == collection.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: collection.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }} + {%- endif -%} + +

+ +
+ + {%- endif -%}
From 59d2618b1e0adc0d7af7a76184173d666ae0d733 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 24 Mar 2022 11:46:45 -0400 Subject: [PATCH 097/176] feedback --- sections/main-search.liquid | 84 ++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/sections/main-search.liquid b/sections/main-search.liquid index e26f8d5da21..52d0a0136a4 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -132,51 +132,49 @@ {%- endif -%}
{%- if search.performed -%} - {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} - {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} - -
-
-
-

- -

-
- {%- assign sort_by = search.sort_by | default: search.default_sort_by -%} - - {% render 'icon-caret' %} -
-
- -
- -
-

- - {%- if search.results_count -%} - {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }} - {%- elsif search.products_count == search.all_products_count -%} - {{ 'products.facets.product_count_simple' | t: count: search.products_count }} - {%- else -%} - {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }} - {%- endif -%} - + {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%} + + +
+
+

+

- - - - {%- endif -%} +
+ +
+ +
+

+ + {%- if search.results_count -%} + {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }} + {%- elsif search.products_count == search.all_products_count -%} + {{ 'products.facets.product_count_simple' | t: count: search.products_count }} + {%- else -%} + {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }} + {%- endif -%} + +

+ +
+ + {%- endif -%}
{%- if search.filters != empty -%} From 5ef267f59d794bba1c2da706cb4cb069c6f4dbae Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 24 Mar 2022 11:51:41 -0400 Subject: [PATCH 098/176] Feedback Co-authored-by: Andrew Etchen --- sections/main-search.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sections/main-search.liquid b/sections/main-search.liquid index 52d0a0136a4..eb0af7a7a7c 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -176,7 +176,7 @@ {%- endif -%} -
+ {%- if search.filters != empty -%} {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}

-
+
{%- if filter_type != 'vertical' -%}
{{ 'products.facets.filters_selected' | t: count: filter.active_values.size }} @@ -103,11 +103,11 @@
{%- endif -%} -
+
    {%- for value in filter.values -%} -
  • +
{%- endif -%} -
+
    {%- for value in filter.values -%} @@ -184,8 +184,8 @@ {%- if filter.values.size > 10 and filter_type == 'vertical' -%} {%- endif %} From 90e301c56a329b5898081b80f6ff06c9bf5e8400 Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Tue, 29 Mar 2022 09:12:05 -0400 Subject: [PATCH 164/176] Fix page width --- sections/main-collection-product-grid.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 86166be5a08..e2eb447d451 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -95,7 +95,7 @@
{%- else -%} -
+
+ + {% if results.current_vendor or results.current_type %} + + {% endif %} + + {%- if results.terms -%} + + + {%- endif -%} {%- endif -%} From 0aa06bfedfe3c0bb71fbe74461964b75695b461f Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 30 Mar 2022 11:59:28 -0400 Subject: [PATCH 175/176] Fix gradient --- assets/component-facets.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/component-facets.css b/assets/component-facets.css index babd06fbce9..980f12a36b8 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -857,6 +857,7 @@ input.mobile-facets__checkbox { z-index: 2; margin-top: auto; background-color:rgb(var(--color-background)); + background: var(--gradient-background); } .mobile-facets__footer > * + * { From fe295a03058ef2bf23fc0cf86faa0208bcc4a9ce Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Wed, 30 Mar 2022 15:01:05 -0400 Subject: [PATCH 176/176] Fix checkmark not showing hor filter --- assets/component-facets.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/component-facets.css b/assets/component-facets.css index 980f12a36b8..085013fdc2e 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -302,6 +302,10 @@ -webkit-appearance: none; } +.no-js .facet-checkbox input[type='checkbox'] { + z-index: 0; +} + .facet-checkbox > svg { background-color: rgb(var(--color-background)); margin-right: 1.2rem;