feat: use system page properties (#52)

* feat(item): use item page properties * feat(item-list): add filtering logic * feat(category): use category page properties * feat(shop): use shop page properties * feat(search): use search page properties * fix(shop): fix shop route * fix(search): remove unneeded items schema * fix: add `square_online_id` Co-authored-by: Andrew Yee <[email protected]> * fix(item-list): use `square_online_id` with `category_ids` * fix(search): fix search term reference --------- Co-authored-by: Andrew Yee <[email protected]>
square · Mar 27, 2024 · b72d603 · b72d603
1 parent bca089a
commit b72d603
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 13 deletions.
diff --git a/site/pages/category.json b/site/pages/category.json
@@ -0,0 +1,15 @@
+{
+    "route": "shop/:name/:id",
+    "template": "templates/store/category",
+    "props": {
+        "category": {
+            "filters": {
+                "id": "request_data(path.id)",
+                "square_online_id": true
+            }
+        },
+        "categories": {
+            "filters": []
+        }
+    }
+}
diff --git a/site/pages/item.json b/site/pages/item.json
@@ -0,0 +1,12 @@
+{
+    "route": "product/:name/:id",
+    "template": "templates/store/item",
+    "props": {
+        "item": {
+            "filters": {
+                "id": "request_data(path.id)",
+                "square_online_id": true
+            }
+        }
+    }
+}
diff --git a/site/pages/search.json b/site/pages/search.json
@@ -0,0 +1,7 @@
+{
+    "route": "s/search",
+    "template": "templates/store/search",
+    "props": {
+        "search_term": "request_data(query.q)"
+    }
+}
diff --git a/site/pages/shop.json b/site/pages/shop.json
@@ -0,0 +1,12 @@
+{
+    "route": "s/shop",
+    "template": "templates/store/shop",
+    "props": {
+        "categories": {
+            "filters": []
+        },
+        "category_hierarchy": {
+            "filters": []
+        }
+    }
+}
diff --git a/theme/components/sections/store/item-list.html.twig b/theme/components/sections/store/item-list.html.twig
@@ -9,6 +9,49 @@
 {% set collectionItems = [] %}
 {% set categoryOptions = [] %}
 
+{# 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] }) %}
+    {% endif %}
+{% endfor %}
+
+{# Pluck comma separated item filters from query and convert to array #}
+{% set commaQueryFilters = ['fulfillments', 'category_ids', 'item_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 }) %}
+
+        {% if filter == 'category_ids' %}
+            {% set items_options = items_options|merge({ square_online_id: true }) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+{# Item pagination #}
+{% if request.query.limit %}
+    {% set pageSize = 0 + request.query.limit %} {# Convert string to number #}
+    {% set items_options = items_options|merge({ pagination: { page_query_param: 'page', page_size: pageSize } }) %}
+{% endif %}
+
+{# Item sorting #}
+{% if (request.query.sort_by or request.query.sort_order) %}
+    {% set sortConfig = items_options.sort|default({}) %}
+    {% if request.query.sort_by %}
+        {% set sortConfig = sortConfig|merge({ by: request.query.sort_by }) %}
+    {% endif %}
+    {% if request.query.sort_order %}
+        {% set sortConfig = sortConfig|merge({ order: request.query.sort_order }) %}
+    {% endif %}
+
+    {% set items_options = items_options|merge({ sort: sortConfig }) %}
+{% endif %}
+
+{% set items = item_list(items_options) %}
+
 {% paginate items %}
 
 {# Per page options #}

diff --git a/theme/templates/store/category.html.twig b/theme/templates/store/category.html.twig
@@ -27,6 +27,9 @@
         }) }}
     {% endif %}
 
+    {# Items options #}
+    {% set itemsOptions = { category_id: category.square_online_id, square_online_id: true } %}
+
     {# Sort options #}
     {% set sortOptions = [
         { label: 'templates.store.shop.sort_options.category_order'|localize, value: 'category_order' },
@@ -43,10 +46,10 @@
 
     {# Category items #}
     {{ include('components/sections/store/item-list', {
-        items,
         category,
         categories,
-        category_hierarchy: category_hierarchy(null, category.square_online_id),
+        category_hierarchy: category_hierarchy(null, category.square_online_id, true),
+        items_options: itemsOptions,
         sort_options: sortOptions,
         global_options: globalOptions,
     }) }}
@@ -59,9 +62,6 @@
     "category": {
         "type": "category"
     },
-    "items": {
-        "type": "item-list"
-    },
     "categories": {
         "type": "category-list"
     }

diff --git a/theme/templates/store/search.html.twig b/theme/templates/store/search.html.twig
@@ -17,6 +17,12 @@
         <h2 class="heading-2">{{ search_term }}</h2>
     </div>
 
+    {# Items options #}
+    {% set itemsOptions = {
+        filters: { search: search_term },
+        sort: { by: 'score' },
+    } %}
+
     {# Sort options #}
     {% set sortOptions = [
         { label: 'templates.store.shop.sort_options.score'|localize, value: 'score' },
@@ -29,16 +35,19 @@
     ] %}
 
     {# Search results #}
-    {{ include('components/sections/store/item-list', { items, categories: category_list([]), category_hierarchy: category_hierarchy(), sort_options: sortOptions, search_term }) }}
+    {{ include('components/sections/store/item-list', {
+        categories: category_list([]),
+        category_hierarchy: category_hierarchy(),
+        items_options: itemsOptions,
+        sort_options: sortOptions,
+        search_term,
+    }) }}
 </div>
 
 {% endblock %}
 
 {% schema %}
 {
-    "items": {
-        "type": "item-list"
-    },
     "search_term": {
         "type": "string"
     }

diff --git a/theme/templates/store/shop.html.twig b/theme/templates/store/shop.html.twig
@@ -20,6 +20,11 @@
         bannerAlt: 'templates.store.shop.headings.shop'|localize,
     }) }}
 
+    {# Items options #}
+    {% set itemsOptions = {
+        filters: {},
+    } %}
+
     {# Sort options #}
     {% set sortOptions = [
         { label: 'templates.store.shop.sort_options.popularity_score'|localize, value: 'popularity_score' },
@@ -31,16 +36,18 @@
     ] %}
 
     {# All items #}
-    {{ include('components/sections/store/item-list', { items, categories, category_hierarchy, sort_options: sortOptions }) }}
+    {{ include('components/sections/store/item-list', {
+        categories,
+        category_hierarchy,
+        items_options: itemsOptions,
+        sort_options: sortOptions,
+    }) }}
 </div>
 
 {% endblock %}
 
 {% schema %}
 {
-    "items": {
-        "type": "item-list"
-    },
     "categories": {
         "type": "category-list"
     },