`product-specs.liquid`

64 lines
{%- comment -%}
  DW product right-column: Product Class badge + Specifications panel.
  Drop into the product template's right/info column (e.g. main-product.liquid,
  inside the product info <div>, near the price/description block).

  Data sources:
    - custom.product_class  (Wallcovering | Fabric | Other)  -- the new 3-way class
    - global.* legacy spec metafields  (Width, Repeat, Content, Durability, ...)
  Rows render ONLY when the metafield has a value, so blanks never show.
{%- endcomment -%}

{%- assign pc = product.metafields.custom.product_class.value -%}

<div class="dw-specs">
  {%- if pc != blank -%}
    <span class="dw-class-badge dw-class-{{ pc | downcase }}">{{ pc }}</span>
  {%- endif -%}

  <h3 class="dw-specs__title">Specifications</h3>
  <dl class="dw-specs__list">
    {%- comment -%} label | global metafield key {%- endcomment -%}
    {%- assign rows = "Pattern|Pattern,Collection|Collection,Brand|Brand,Width|Width,Vertical Repeat|Vert. Repeat,Horizontal Repeat|Horz. Repeat,Match|Match,Content|Content,Durability|Durability,Cleaning Code|Clean Code,Use|Use,Direction|Direction,Country of Origin|Country of Origin,Weight|Weight,Prop 65|Prop 65,CA TB117|CA TB117" | split: "," -%}
    {%- for row in rows -%}
      {%- assign pair = row | split: "|" -%}
      {%- assign label = pair[0] -%}
      {%- assign key = pair[1] -%}
      {%- assign val = product.metafields.global[key].value -%}
      {%- if val != blank -%}
        <div class="dw-specs__row">
          <dt>{{ label }}</dt>
          <dd>
            {{ val }}
            {%- if key == "Width" and product.metafields.global["Width UOM"].value != blank %} {{ product.metafields.global["Width UOM"].value | downcase }}{% endif -%}
            {%- if key == "Weight" and product.metafields.global["Weight UOM"].value != blank %} {{ product.metafields.global["Weight UOM"].value | downcase }}{% endif -%}
          </dd>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </dl>
</div>

<style>
  .dw-specs { margin-top: 1.25rem; }
  .dw-class-badge {
    display: inline-block; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; padding: .28em .8em; border-radius: 2px;
    border: 1px solid currentColor; margin-bottom: 1rem;
  }
  .dw-class-wallcovering { color: #7a5c1e; }
  .dw-class-fabric       { color: #6a2540; }
  .dw-class-other        { color: #555; }
  .dw-specs__title {
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    margin: 0 0 .6rem; color: #666;
  }
  .dw-specs__list { margin: 0; }
  .dw-specs__row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; border-bottom: 1px solid #ececec; font-size: .9rem;
  }
  .dw-specs__row dt { color: #888; margin: 0; }
  .dw-specs__row dd { margin: 0; text-align: right; color: #222; }
</style>