Add filtering and search mockup

Shopify · Oct 25, 2023 · bd0ef2d · bd0ef2d
1 parent 49e01e6
commit bd0ef2d
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 5 deletions.
diff --git a/assets/quick-order-form.css b/assets/quick-order-form.css
@@ -6,6 +6,14 @@
   background-color: rgba(var(--color-foreground), 0.02);
 }
 
+.quick-order-form thead th:first-child {
+  padding-left: 1rem;
+}
+
+.quick-order-form thead th:last-child {
+  padding-right: 1rem;
+}
+
 .quick-order-form tr.empty-row {
   height: 1rem;
 }
@@ -62,15 +70,15 @@
 }
 
 .quick-order-form tr.product .variant-item__image-container {
-  width: 2.8rem;
+  width: 3.6rem;
   height: auto;
   margin-right: 0.8rem;
   border: 0;
 }
 
 .quick-order-form tr:not(.product) .variant-item__image-container {
-  width: 2rem;
-  height: 2rem;
+  width: 2.6rem;
+  height: 2.6rem;
   margin-right: 0.8rem;
   background-color: transparent;
   border: 0;
@@ -81,7 +89,7 @@
   flex-direction: column;
   justify-content: center;
   margin-right: 0.8rem;
-  width: 2rem;
+  width: 2.6rem;
   height: 4rem;
 }
 
@@ -90,6 +98,33 @@
   flex-direction: column;
   justify-content: center;
   margin-right: 0.8rem;
-  width: 2.8rem;
+  width: 3.6rem;
   height: auto;
 }
+
+.quick-order-form .field {
+  margin-bottom: 1.8rem;
+}
+
+.quick-order-form .field label {
+  opacity: 0.3;
+}
+
+.search--wrapper {
+  display: flex;
+}
+
+.total-items,
+.seach__filters {
+  white-space: nowrap;
+  line-height: calc(1 + .5 / var(--font-body-scale));
+  font-size: 1.4rem;
+  margin-left: 1.6rem;
+  margin-bottom: 1.8rem;
+  display: flex;
+  align-items: center;
+}
+
+.seach__filters span {
+  margin-left: 0.8rem;
+}
diff --git a/locales/en.default.json b/locales/en.default.json
@@ -359,6 +359,9 @@
       "remove_all_items_confirmation": "Remove all {{ quantity }} items from your cart?",
       "remove_all": "Remove all",
       "cancel": "Cancel"
+    },
+    "quick-order-form": {
+      "search": "Search by product, varinat or SKU"
     }
   },
   "localization": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2745,6 +2745,12 @@
     "quick-order-form": {
       "name": "Quick order form",
       "settings": {
+        "enable_search": {
+          "label": "Enable search"
+        },
+        "enable_filtering": {
+          "label": "Enable filtering"
+        },
         "show_variant_image": {
           "label": "Show variant images"
         },

diff --git a/sections/quick-order-form.liquid b/sections/quick-order-form.liquid
@@ -32,6 +32,48 @@
     class="quick-order-form page-width section-{{ section.id }}-padding"
     data-id="{{ section.id }}"
   >
+    {%- if section.settings.enable_search -%}
+      <div class="search--wrapper">
+        <div class="field">
+          <input
+            class="search__input field__input"
+            id="Search-In-Template"
+            type="search"
+            name="q"
+            value="{{ search.terms | escape }}"
+            placeholder="{{ 'sections.quick-order-form.search' | t }}"
+          >
+          <label class="field__label" for="Search-In-Template">{{ 'sections.quick-order-form.search' | t }}</label>
+          <input name="options[prefix]" type="hidden" value="last">
+
+          <button
+            type="reset"
+            class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
+            aria-label="{{ 'general.search.reset' | t }}"
+          >
+            <svg class="icon icon-close" aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-reset">
+            </svg>
+          </button>
+          <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
+            <svg class="icon icon-search" aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-search">
+            </svg>
+          </button>
+        </div>
+        {%- if section.settings.enable_filtering -%}
+          <div class="seach__filters">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M2.833 2.5C2.833 2.28109 2.87612 2.06432 2.95989 1.86207C3.04367 1.65982 3.16646 1.47605 3.32125 1.32125C3.47605 1.16646 3.65982 1.04367 3.86207 0.959893C4.06432 0.876118 4.28109 0.833 4.5 0.833C4.71891 0.833 4.93568 0.876118 5.13793 0.959893C5.34018 1.04367 5.52395 1.16646 5.67875 1.32125C5.83354 1.47605 5.95633 1.65982 6.04011 1.86207C6.12388 2.06432 6.167 2.28109 6.167 2.5C6.167 2.94212 5.99137 3.36612 5.67875 3.67875C5.36612 3.99137 4.94212 4.167 4.5 4.167C4.05788 4.167 3.63388 3.99137 3.32125 3.67875C3.00863 3.36612 2.833 2.94212 2.833 2.5ZM2.05 3H0.5C0.367392 3 0.240215 2.94732 0.146447 2.85355C0.0526785 2.75979 0 2.63261 0 2.5C0 2.36739 0.0526785 2.24021 0.146447 2.14645C0.240215 2.05268 0.367392 2 0.5 2H2.05C2.16476 1.43486 2.47136 0.926762 2.91787 0.561811C3.36438 0.196859 3.92332 -0.00250626 4.5 -0.00250626C5.07668 -0.00250626 5.63562 0.196859 6.08213 0.561811C6.52864 0.926762 6.83524 1.43486 6.95 2H15.5C15.6326 2 15.7598 2.05268 15.8536 2.14645C15.9473 2.24021 16 2.36739 16 2.5C16 2.63261 15.9473 2.75979 15.8536 2.85355C15.7598 2.94732 15.6326 3 15.5 3H6.95C6.83524 3.56514 6.52864 4.07324 6.08213 4.43819C5.63562 4.80314 5.07668 5.00251 4.5 5.00251C3.92332 5.00251 3.36438 4.80314 2.91787 4.43819C2.47136 4.07324 2.16476 3.56514 2.05 3ZM13.167 9.5C13.167 9.05788 12.9914 8.63388 12.6787 8.32125C12.3661 8.00863 11.9421 7.833 11.5 7.833C11.0579 7.833 10.6339 8.00863 10.3213 8.32125C10.0086 8.63388 9.833 9.05788 9.833 9.5C9.833 9.94212 10.0086 10.3661 10.3213 10.6787C10.6339 10.9914 11.0579 11.167 11.5 11.167C11.9421 11.167 12.3661 10.9914 12.6787 10.6787C12.9914 10.3661 13.167 9.94212 13.167 9.5ZM11.5 7C12.0763 6.99988 12.635 7.19889 13.0815 7.56335C13.5279 7.9278 13.8347 8.43532 13.95 9H15.5C15.6326 9 15.7598 9.05268 15.8536 9.14645C15.9473 9.24021 16 9.36739 16 9.5C16 9.63261 15.9473 9.75979 15.8536 9.85355C15.7598 9.94732 15.6326 10 15.5 10H13.95C13.8352 10.5651 13.5286 11.0732 13.0821 11.4382C12.6356 11.8031 12.0767 12.0025 11.5 12.0025C10.9233 12.0025 10.3644 11.8031 9.91787 11.4382C9.47136 11.0732 9.16476 10.5651 9.05 10H0.5C0.367392 10 0.240215 9.94732 0.146447 9.85355C0.0526785 9.75979 0 9.63261 0 9.5C0 9.36739 0.0526785 9.24021 0.146447 9.14645C0.240215 9.05268 0.367392 9 0.5 9H9.05C9.16527 8.43532 9.47209 7.9278 9.91855 7.56335C10.365 7.19889 10.9237 6.99988 11.5 7Z" fill="#121212" fill-opacity="0.85" style="fill:#121212;fill:color(display-p3 0.0706 0.0706 0.0706);fill-opacity:0.85;"/>
+            </svg>
+            <span>Filter</span>
+          </div>
+        {%- endif -%}
+        <div class="total-items">
+          <span>{{ section.settings.collection.products.first.variants.size }} items</span>
+        </div>
+      </div>
+    {%- endif -%}
     <form
       action="{{ routes.cart_update_url }}"
       class="quick-order-list__contents critical-hidden"
@@ -196,6 +238,18 @@
 {
   "name": "t:sections.quick-order-form.name",
   "settings": [
+    {
+      "type": "checkbox",
+      "id": "enable_search",
+      "default": false,
+      "label": "t:sections.quick-order-form.settings.enable_search.label"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_filtering",
+      "default": false,
+      "label": "t:sections.quick-order-form.settings.enable_filtering.label"
+    },
     {
       "type": "checkbox",
       "id": "show_image",