`greenland-cleanup-backups/dw-collection-hero-BACKUP-v2pre.liquid`

107 lines
{%- comment -%}
  DW Collection Hero — Steve standing rule (2026-06-23): every collection page
  must have a background "bg" hero image. Renders collection.image as a full-bleed
  cover background with the title + breadcrumbs + description on a SEMI-OPAQUE
  CONTRASTING PANEL (dark scrim panel) so the text stays legible over any image.
  Collections with no image fall back to a branded gradient so the page is never
  broken; audit-collection-hero-images.py lists which collections still need one.

  Also HIDES the Boost AI Search & Filter app's own collection banner (the
  duplicate lower banner) + any legacy theme breadcrumbs, so only this hero shows.

  Toggle by removing it from templates/collection.json "order".
{%- endcomment -%}
{%- liquid
  assign dw_has_hero = false
  if collection.image
    assign dw_has_hero = true
  endif
-%}
<div class="dw-collection-hero{% unless dw_has_hero %} dw-collection-hero--fallback{% endunless %}"
     {% if dw_has_hero %}style="background-image:url({{ collection.image | img_url: '2048x' }});"{% endif %}
     data-dw-collection-hero>
  <div class="dw-collection-hero__inner page-width">
    <div class="dw-collection-hero__panel">
      <nav class="dw-collection-hero__crumbs" aria-label="Breadcrumb">
        <a href="/">Home</a> <span aria-hidden="true">/</span>
        <a href="/collections">Collections</a> <span aria-hidden="true">/</span>
        <span aria-current="page">{{ collection.title }}</span>
      </nav>
      <h1 class="dw-collection-hero__title">{{ collection.title }}</h1>
      {%- assign aeo_cat = collection.metafields.custom.category | default: 'wallcovering' -%}
      <p class="dw-collection-hero__answer">Browse {{ collection.products_count }} luxury {{ aeo_cat }}{% if collection.products_count != 1 %}s{% endif %} in the {{ collection.title }} collection at Designer Wallcoverings.</p>
      {%- if section.settings.show_description and collection.description != blank -%}
        <div class="dw-collection-hero__desc">{{ collection.description | strip_html | truncatewords: 32 }}</div>
      {%- endif -%}
    </div>
  </div>
</div>
{%- assign aeo_faq = collection.metafields.custom.faq.value -%}
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"CollectionPage","name":{{ collection.title | json }},"description":{{ collection.description | strip_html | truncatewords: 40 | json }},"url":{{ request.origin | append: collection.url | json }},"isPartOf":{"@type":"WebSite","name":"Designer Wallcoverings","url":{{ request.origin | json }}}}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":{{ request.origin | json }}},{"@type":"ListItem","position":2,"name":"Collections","item":{{ request.origin | append: '/collections' | json }}},{"@type":"ListItem","position":3,"name":{{ collection.title | json }},"item":{{ request.origin | append: collection.url | json }}}]}
</script>
{%- if aeo_faq != blank and aeo_faq != empty -%}
<div class="dw-collection-faq"><h2>Frequently Asked Questions</h2>
{%- for item in aeo_faq -%}<h3>{{ item.q }}</h3><p>{{ item.a }}</p>{%- endfor -%}</div>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for item in aeo_faq -%}{"@type":"Question","name":{{ item.q | json }},"acceptedAnswer":{"@type":"Answer","text":{{ item.a | strip_html | json }}}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]}
</script>
{%- endif -%}
<style>
  .dw-collection-hero{position:relative;min-height:clamp(80px,10.7vw,140px);display:flex;
    align-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;
    margin:0 0 1.5rem;overflow:hidden;}
  .dw-collection-hero--fallback{background:linear-gradient(135deg,#1c1c1c 0%,#3a3a3a 55%,#2a2320 100%);}
  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:0.9rem 2.25rem;}
  /* Semi-opaque CONTRASTING panel behind the text — dark scrim over the light
     pattern so title/breadcrumbs/description read clearly without darkening the
     whole image. Constrained width, left-aligned. */
  .dw-collection-hero__panel{display:inline-block;max-width:min(640px,92%);
    background:rgba(22,18,16,0.66);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,0.14);border-radius:6px;
    padding:1.4rem 1.75rem;box-shadow:0 6px 30px rgba(0,0,0,.28);}
  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
    color:#fff;opacity:.92;margin:0 0 .45rem;}
  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}
  .dw-collection-hero__crumbs a:hover{text-decoration:underline;}
  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;
    letter-spacing:.5px;line-height:1.05;}
  .dw-collection-hero__desc{color:#fff;max-width:60ch;margin:.6rem 0 0;opacity:.96;
    font-size:.95rem;line-height:1.55;}

  /* Hide the duplicate LOWER banner drawn by the Boost AI Search & Filter app
     (its own collection header/banner) so only this hero shows. */
  .boost-sd__collection-header,
  .boost-sd__page-header,
  .boost-sd__collection-header-image,
  .boost-sd__collection-header-content,
  .boost-sd__collection-header-title,
  .boost-sd__collection-header-description,
  .boost-sd__collection-title,
  .boost-sd__collection-description{display:none !important;}
  /* hero now carries breadcrumbs: hide any legacy theme breadcrumbs on collection pages */
  .template-collection .breadcrumbs,
  .template-collection .breadcrumb{display:none;}
</style>

{% schema %}
{
  "name": "DW Collection Hero",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show collection description in hero",
      "default": true
    }
  ],
  "presets": [
    { "name": "DW Collection Hero" }
  ]
}
{% endschema %}