fix: Item filters not working and resolve the filter name mismatch (#70)

* fix: resolve filter name mismatch and item filters issue * fix: reformat
square · Sep 19, 2024 · af3d4ef · af3d4ef
1 parent 66534cd
commit af3d4ef
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/theme/assets/js/components/store/filters/advanced.js b/theme/assets/js/components/store/filters/advanced.js
@@ -67,8 +67,8 @@ document.addEventListener('alpine:init', () => {
                     }
                 });
             }
-            if (this.currentValue.item_status?.length) {
-                const itemStatus = this.currentValue.item_status.split(',');
+            if (this.currentValue.status?.length) {
+                const itemStatus = this.currentValue.status.split(',');
                 itemStatus.forEach((status) => {
                     this.advancedFilterValues[status] = true;
                 });
@@ -290,7 +290,7 @@ document.addEventListener('alpine:init', () => {
             const selectedValues = [
                 this.currentValue.location_id,
                 ...[this.currentValue.fulfillments?.split(',') ?? []],
-                ...[this.currentValue.item_status?.split(',') ?? []],
+                ...[this.currentValue.status?.split(',') ?? []],
                 ...[this.currentValue.option_choices?.split(',') ?? []],
                 this.currentValue.price_min,
                 this.currentValue.price_max,

diff --git a/theme/assets/js/components/store/item-list.js b/theme/assets/js/components/store/item-list.js
@@ -111,8 +111,8 @@ document.addEventListener('alpine:init', () => {
             if (urlParams.location_id?.length) {
                 query.locationId = urlParams.location_id;
             }
-            if (urlParams.item_status?.length) {
-                const statuses = urlParams.item_status.split(',');
+            if (urlParams.status?.length) {
+                const statuses = urlParams.status.split(',');
                 query.isOnSale = statuses.includes('on_sale');
                 query.isInStock = statuses.includes('in_stock');
             }
@@ -174,7 +174,7 @@ document.addEventListener('alpine:init', () => {
                 statuses.push('in_stock');
             }
             if (statuses.length) {
-                query.set('item_status', statuses);
+                query.set('status', statuses);
             }
             if (categoryIds?.length) {
                 query.set('category_ids', categoryIds);

diff --git a/theme/components/sections/store/item-list.html.twig b/theme/components/sections/store/item-list.html.twig
@@ -8,29 +8,32 @@
 
 {% set collectionItems = [] %}
 {% set categoryOptions = [] %}
+{% set filters = {} %}
 
 {# Item list filtering #}
 {# Pluck item filters from query #}
 {% set queryFilters = ['price_min', 'price_max', 'location_id', 'has_discounts'] %}
 {% for filter in queryFilters %}
     {% if request.query[filter] %}
-        {% set items_options = items_options|merge({ (filter): request.query[filter] }) %}
+        {% set filters = filters|merge({ (filter): request.query[filter] }) %}
     {% endif %}
 {% endfor %}
 
 {# Pluck comma separated item filters from query and convert to array #}
-{% set commaQueryFilters = ['fulfillments', 'category_ids', 'item_status', 'option_choices'] %}
+{% set commaQueryFilters = ['fulfillments', 'category_ids', 'status', 'option_choices'] %}
 {% for filter in commaQueryFilters %}
     {% if request.query[filter] %}
         {% set value = request.query[filter]|split(',') %}
-        {% set items_options = items_options|merge({ (filter): value }) %}
+        {% set filters = filters|merge({ (filter): value }) %}
 
         {% if filter == 'category_ids' %}
-            {% set items_options = items_options|merge({ square_online_id: true }) %}
+            {% set filters = filters|merge({ square_online_id: true }) %}
         {% endif %}
     {% endif %}
 {% endfor %}
 
+{% set items_options = { filters: filters } %}
+
 {# Item pagination #}
 {% if request.query.limit %}
     {% set pageSize = 0 + request.query.limit %} {# Convert string to number #}