add collection filter snippet

mitchuman · Sep 22, 2021 · 5096523 · 5096523
1 parent 78e268a
commit 5096523
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 16 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -7,21 +7,13 @@
       "label": "shopify switch human-dev",
       "type": "shell",
       "command": "shopify switch --store=human-dev.myshopify.com",
-      "presentation": {
-        "close": true,
-        "reveal": "never",
-      },
-      // "runOptions": {
-      //   "runOn": "folderOpen"
-      // },
-      "problemMatcher": []
+      "problemMatcher": [],
     },
-
     {
       "label": "minify current JS file",
       "type": "shell",
       "command": "npx esbuild --minify ${relativeFile} --outfile=${relativeFileDirname}/${fileBasenameNoExtension}.min.js",
       "problemMatcher": []
-    },
+    }
   ]
 }
diff --git a/assets/theme.css b/assets/theme.css
@@ -57,6 +57,7 @@ img {
   margin-inline: auto;
 }
 
+.padding { padding: var(--padding-y) var(--padding-x); }
 .padding-y { padding-block: var(--padding-y); }
 .padding-x { padding-inline: var(--padding-x); }
 

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "Danshari",
-    "theme_version": "0.4.4",
+    "theme_version": "0.5.0",
     "theme_author": "mitchuman",
     "theme_documentation_url": "https:\/\/github.com\/mitchuman\/danshari",
     "theme_support_url": "https:\/\/github.com\/mitchuman\/danshari"

diff --git a/sections/collection.liquid b/sections/collection.liquid
@@ -1,10 +1,6 @@
 <h1 class="h1">{{ collection.title }}</h1>
 
-{%- unless collection.filters == empty -%}
-  {%- for filter in collection.filters -%}
-
-  {%- endfor -%}
-{%- endunless -%}
+{% render 'collection-filter' %}
 
 <ul>
   {%- for product in collection.products -%}

diff --git a/snippets/collection-filter.liquid b/snippets/collection-filter.liquid
@@ -0,0 +1,103 @@
+{%- assign total_active_filters = 0 -%}
+
+{%- unless collection.filters == empty -%}
+  <form>
+    {%- for filter in collection.filters -%}
+      {%- assign total_active_filters = total_active_filters | plus: filter.active_values.size -%}
+
+      <details>
+        <summary>
+          {{ filter.label }}
+          {%- if filter.active_values.size > 0 -%}
+            ({{ filter.active_values.size }})
+          {%- endif -%}
+        </summary>
+
+        <div>
+          {%- case filter.type -%}
+            {%- when 'list' -%}
+              {{ filter.active_values.size }} selected
+
+              <ul>
+                {%- for value in filter.values -%}
+                  <li>
+                    <label>
+                      <input
+                        name="{{ value.param_name }}"
+                        value="{{ value.value }}"
+                        {% if value.active %}checked{% endif %}
+                        {% if value.count == 0 and value.active == false %}disabled{% endif %}
+                        type="checkbox"
+                      />
+                      {{ value.label }} ({{ value.count }})
+                    </label>
+                  </li>
+                {%- endfor -%}
+              </ul>
+
+            {%- when 'price_range' -%}
+              <label>
+                {{ cart.currency.symbol }}
+                <input
+                  name="{{ filter.min_value.param_name }}"
+                  {% if filter.min_value.value %}
+                    value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
+                  {% endif %}
+                  type="number"
+                  size="4"
+                  placeholder="0"
+                  min="0"
+                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
+                />
+              </label>
+              to
+              <label>
+                {{ cart.currency.symbol }}
+                <input
+                  name="{{ filter.max_value.param_name }}"
+                  {% if filter.max_value.value %}
+                    value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
+                  {% endif %}
+                  type="number"
+                  size="4"
+                  placeholder="0"
+                  min="0"
+                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
+                />
+              </label>
+          {%- endcase -%}
+
+          <button class="button">Apply</button>
+          {%- if filter.active_values.size > 0 -%}
+            <a href="{{ filter.url_to_remove }}" class="button">Clear</a>
+          {%- endif -%}
+        </div>
+      </details>
+    {%- endfor -%}
+
+    {%- if total_active_filters > 0 -%}
+      <div>
+        Filters:
+        <a href="{{ collection.url }}" class="button">Clear all</a>
+        {%- for filter in collection.filters -%}
+          {%- case filter.type -%}
+            {%- when 'price_range' -%}
+              {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
+                <a href="{{ filter.url_to_remove }}" class="button">
+                  ✕
+                  {{ filter.min_value.value | default: 0 | money }} - {{ filter.max_value.value | default: filter.range_max | money }}
+                </a>
+              {%- endif -%}
+
+            {%- else -%}
+              {%- for value in filter.active_values -%}
+                <a href="{{ value.url_to_remove }}" class="button">
+                  ✕ {{ value.label }}
+                </a>
+              {%- endfor -%}
+          {%- endcase -%}
+        {%- endfor -%}
+      </div>
+    {%- endif -%}
+  </form>
+{%- endunless -%}