`templates/page.commercial.liquid`

67 lines
{% comment %}
  page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
  Each tile pulls its background image LIVE from the linked collection at render
  time (collection.image -> first product image), so images can never rot when a
  CDN file is purged. Brands with no collection render as a clean text tile (never
  a broken image). Assign a Page to the "brands" template in Shopify admin.
  Scoped under #dwb-root so it can never collide with theme CSS.
{% endcomment %}
<div id="dwb-root">
<style>
  #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
  #dwb-root *{box-sizing:border-box}
  #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
  #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
  #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
  #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
  #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
  #dwb-root .dwb-search:focus{border-color:#b9892f}
  #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
  #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
  @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
  @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
  #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
    text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
  #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
  #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
  #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
  #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
  #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
  #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
  #dwb-root .dwb-card.dwb-noimg::after{display:none}
  #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
</style>
<div class="dwb-head"><h1>Commercial</h1><p>Contract-grade wallcoverings for every project.</p></div>
<div class="dwb-tools">
  <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
  <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
</div>
<div class="dwb-grid" id="dwbGrid">
{% assign brands = "Abstract::/collections/abstract-durable-vinyl~Acoustical::/collections/acoustical~Animal::/collections/faux-animal-skin~Commercial Specialty::/collections/commercial-specialty~Contemporary::/collections/hollywood-wallpaper-commercial-wallpaper~Crypton Fabric::/collections/crypton~Durable Vinyl::/collections/phillipe-romano-vinyls~Embossed Texture::/collections/embossed~Faux Grasscloth::/collections/faux-grasscloth-wallpaper-collection~Faux Leather::/collections/faux-leather~Faux Silk + Linen::/collections/faux-silk~Faux Suede::/collections/suede-faux-suede-fabric~Flocked Velvet::/collections/flocked-velvet-wallpaper-collection~Geometric::/collections/geometric-durable-vinyl~Metal Leaf::/collections/renaissance-metal-leaf~Metallic::/collections/metallic-wallpaper-collection~Metallic Mylar::/collections/shiny-mylar-mirror~Metallic Vinyl::/collections/metallic-vinyl~Shiny Mylar::/collections/shiny-mylar-3d-foils~Traditional::/collections/traditional-durable-vinyl~Type 2 Durable Vinyl::/collections/type-2-wallpaper-collection" | split: "~" %}
{% for b in brands %}
  {% assign parts = b | split: "::" %}
  {% assign title = parts[0] %}
  {% assign href = parts[1] %}
  {% assign chandle = href | remove: "/collections/" %}
  {% assign coll = collections[chandle] %}
  {% assign img = coll.image %}
  {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
  <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
    {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
    <span class="dwb-name">{{ title }}</span>
  </a>
{% endfor %}
</div>
</div>
<script>
(function(){
  var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
  var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
  var KEY='dwb-cols';
  function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
  try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
  r.addEventListener('input',function(){applyCols(this.value);});
  q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
    cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
})();
</script>