Material pages restored + native filters (Material/Availability/Price panels); 48 products render, empty fixed

6b88e766d80990df4ecebde63942410ede9c0137 · 2026-07-22 13:26:19 -0700 · Steve
Files touched

M collection.material.liquid
Diff

commit 6b88e766d80990df4ecebde63942410ede9c0137
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Jul 22 13:26:19 2026 -0700

    Material pages restored + native filters (Material/Availability/Price panels); 48 products render, empty fixed
---
 collection.material.liquid | 95 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 67 insertions(+), 28 deletions(-)

diff --git a/collection.material.liquid b/collection.material.liquid
index 960137e..e61667d 100644
--- a/collection.material.liquid
+++ b/collection.material.liquid
@@ -1,36 +1,43 @@
 {% comment %}
   Native (non-Boost) collection template for the Material smart collections.
-  Renders straight from Shopify's collection data — ZERO Boost-index dependency,
-  so material collection pages populate instantly. Image-only cards + hover-reveal
-  of pattern name + sellable-variant DW SKU (mirrors dw-card-hover v6 look).
-  Assigned via template_suffix="material" on the material-* collections.
+  Renders straight from Shopify — no Boost-index dependency, so material pages
+  populate instantly. Left rail = Material selector (the 13 material collections)
+  + Shopify NATIVE storefront filters (collection.filters: Color/Style/Brand/Price
+  etc.) as COLLAPSED panels, server-side + paginated. Image-only cards + hover
+  reveal (name + sellable-variant SKU). Assigned via template_suffix="material".
 {% endcomment %}
 <style>
   .dw-mat-page{max-width:1500px;margin:0 auto;padding:26px 18px;display:flex;gap:30px;
     font-family:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
-  .dw-mat-rail{flex:0 0 190px;}
-  .dw-mat-rail h1{font-size:21px;font-weight:600;margin:0 0 3px;color:#1a1a1a;letter-spacing:.01em;}
-  .dw-mat-rail .cnt{font-size:12px;color:#8a8278;margin:0 0 20px;}
-  .dw-mat-rail h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;color:#1a1a1a;}
-  .dw-mat-rail ul{list-style:none;margin:0;padding:0;}
-  .dw-mat-rail li{margin:0 0 7px;}
-  .dw-mat-rail a{font-size:13px;color:#4a4640;text-decoration:none;transition:color .15s;}
-  .dw-mat-rail a:hover,.dw-mat-rail a.on{color:#8b7355;font-weight:700;}
-  .dw-mat-back{display:block;margin:18px 0 0;font-size:12px;color:#8a8278;text-decoration:none;}
+  .dw-mat-rail{flex:0 0 210px;}
+  .dw-mat-rail h1{font-size:21px;font-weight:600;margin:0 0 2px;color:#1a1a1a;}
+  .dw-mat-rail .cnt{font-size:12px;color:#8a8278;margin:0 0 18px;}
+  .dw-facet{border-bottom:1px solid #e6e2da;padding:11px 0;}
+  .dw-facet>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;
+    letter-spacing:.06em;text-transform:uppercase;color:#1a1a1a;display:flex;justify-content:space-between;align-items:center;}
+  .dw-facet>summary::-webkit-details-marker{display:none;}
+  .dw-facet>summary::after{content:"+";color:#8a8278;font-weight:400;}
+  .dw-facet[open]>summary::after{content:"\2013";}
+  .dw-facet ul{list-style:none;margin:10px 0 2px;padding:0;max-height:230px;overflow:auto;}
+  .dw-facet li{margin:0 0 6px;}
+  .dw-facet a{font-size:13px;color:#4a4640;text-decoration:none;display:flex;justify-content:space-between;gap:8px;}
+  .dw-facet a:hover{color:#8b7355;}
+  .dw-facet a.on{color:#8b7355;font-weight:700;}
+  .dw-facet a .c{color:#b3aa9c;font-size:11px;}
+  .dw-clear{display:inline-block;margin:10px 0 4px;font-size:11px;color:#8b7355;text-decoration:underline;}
   .dw-mat-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-content:start;}
   .dw-mat-card{position:relative;display:block;overflow:hidden;text-decoration:none;background:#f3f0ea;}
   .dw-mat-card img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;}
   .dw-mat-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 9px;opacity:0;transition:opacity .16s;
     background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,0) 100%);
-    color:#fff;font-size:12px;font-weight:600;line-height:1.2;text-align:center;
-    text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;}
+    color:#fff;font-size:12px;font-weight:600;line-height:1.2;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;}
   .dw-mat-card:hover .dw-mat-cap,.dw-mat-card:focus-within .dw-mat-cap{opacity:1;}
   .dw-mat-sku{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#e8e2d8;margin-top:2px;}
   @media (hover:none){.dw-mat-cap{opacity:1;}}
   .dw-mat-pager{grid-column:1/-1;text-align:center;padding:26px 0;}
   .dw-mat-pager a,.dw-mat-pager span{padding:6px 11px;font-size:13px;color:#4a4640;text-decoration:none;}
   .dw-mat-pager span[aria-current]{font-weight:700;color:#8b7355;}
-  @media (max-width:700px){.dw-mat-page{flex-direction:column;gap:16px;}.dw-mat-rail{flex:none;}}
+  @media (max-width:760px){.dw-mat-page{flex-direction:column;gap:16px;}.dw-mat-rail{flex:none;}}
 </style>
 {% assign mats = "material-grasscloth|Grasscloth,material-natural-fiber|Natural Fiber,material-paperweave|Paperweave,material-cork|Cork,material-silk|Silk,material-linen|Linen,material-non-woven|Non-Woven,material-vinyl-type-ii|Vinyl / Type II,material-metallic-foil|Metallic / Foil,material-glass-bead|Glass Bead,material-flock-velvet|Flock / Velvet,material-leather|Leather,material-wood-veneer|Wood Veneer" | split: "," %}
 {% paginate collection.products by 48 %}
@@ -38,22 +45,54 @@
   <aside class="dw-mat-rail">
     <h1>{{ collection.title | remove: " Wallcoverings" }}</h1>
     <p class="cnt">{{ collection.products_count }} designs</p>
-    <h3>Material</h3>
-    <ul>
-      {% for m in mats %}
-        {% assign parts = m | split: "|" %}
-        <li><a href="/collections/{{ parts[0] }}"{% if collection.handle == parts[0] %} class="on"{% endif %}>{{ parts[1] }}</a></li>
-      {% endfor %}
-    </ul>
-    <a class="dw-mat-back" href="/collections/new-arrivals?pf_t_product_type=Wallcovering">&larr; All New Arrivals</a>
+
+    <details class="dw-facet" open>
+      <summary>Material</summary>
+      <ul>
+        {% for m in mats %}{% assign parts = m | split: "|" %}
+          <li><a href="/collections/{{ parts[0] }}"{% if collection.handle == parts[0] %} class="on"{% endif %}>{{ parts[1] }}</a></li>
+        {% endfor %}
+      </ul>
+    </details>
+
+    {% comment %} Native Shopify storefront filters (Color/Style/Brand/Price…) — collapsed. {% endcomment %}
+    {% for filter in collection.filters %}
+      <details class="dw-facet">
+        <summary>{{ filter.label }}</summary>
+        {% case filter.type %}
+          {% when 'list' %}
+            <ul>
+              {% for value in filter.values %}
+                {% if value.count > 0 or value.active %}
+                <li><a href="{{ value.url_to_add }}" class="{% if value.active %}on{% endif %}">
+                  <span>{{ value.label }}</span><span class="c">{{ value.count }}</span></a></li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+          {% when 'price_range' %}
+            <ul>
+              <li style="font-size:12px;color:#8a8278;">${{ filter.min_value.value | default: 0 | money_without_currency }} – ${{ filter.max_value.value | default: filter.range_max | money_without_currency }}</li>
+              {% assign step = filter.range_max | divided_by: 4 %}
+              {% for i in (1..4) %}
+                {% assign hi = step | times: i %}
+                <li><a href="{{ collection.url }}?filter.v.price.lte={{ hi }}">Under ${{ hi | money_without_currency }}</a></li>
+              {% endfor %}
+            </ul>
+        {% endcase %}
+      </details>
+    {% endfor %}
+
+    {% if collection.current_type or collection.current_vendor or current_tags.size > 0 %}
+      <a class="dw-clear" href="{{ collection.url }}">Clear filters</a>
+    {% endif %}
+    <a class="dw-clear" href="/collections/new-arrivals?pf_t_product_type=Wallcovering">&larr; All New Arrivals</a>
   </aside>
+
   <div class="dw-mat-grid">
     {% for product in collection.products %}
       {%- if product.featured_image == blank -%}{%- continue -%}{%- endif -%}
       {%- assign sellsku = '' -%}
-      {%- for v in product.variants -%}
-        {%- if v.title != 'Sample' and sellsku == '' -%}{%- assign sellsku = v.sku -%}{%- endif -%}
-      {%- endfor -%}
+      {%- for v in product.variants -%}{%- if v.title != 'Sample' and sellsku == '' -%}{%- assign sellsku = v.sku -%}{%- endif -%}{%- endfor -%}
       {%- if sellsku == '' and product.variants.first -%}{%- assign sellsku = product.variants.first.sku -%}{%- endif -%}
       <a class="dw-mat-card" href="{{ product.url }}">
         <img src="{{ product.featured_image | image_url: width: 420 }}" alt="{{ product.title | escape }}" loading="lazy" width="420" height="420">
@@ -62,7 +101,7 @@
         </div>
       </a>
     {% else %}
-      <p style="grid-column:1/-1;color:#8a8278;">No products in this material yet.</p>
+      <p style="grid-column:1/-1;color:#8a8278;">No products match these filters.</p>
     {% endfor %}
     {% if paginate.pages > 1 %}
       <div class="dw-mat-pager">
← 20b2848 FIX infinite-scroll regression: scope card-hover observer to · back to Dw Material Reclassify · Material filters COMPLETE: installed Search & Discovery app d1bebd9 →