`snippets/product-description-meta.liquid`

100 lines
<style>
.dw-specs { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 16px 0; }
.dw-specs-title { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.dw-spec-row { display: flex; padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 15px; line-height: 1.4; }
.dw-spec-row:last-child { border-bottom: none; }
.dw-spec-label { font-weight: 600; color: #333; width: 40%; min-width: 120px; flex-shrink: 0; }
.dw-spec-value { color: #555; flex: 1; }
</style>

{% comment %} DW Specs — canonical namespace: custom.* — falls back to specs.* then global.* for legacy products {% endcomment %}

{% assign has_specs = false %}
{% assign w = product.metafields.custom.width.value | default: product.metafields.specs.width.value | default: product.metafields.global.Width.value | default: product.metafields.global.width.value %}
{% assign mat = product.metafields.custom.material.value | default: product.metafields.specs.composition.value | default: product.metafields.global.Content.value | default: product.metafields.global.Contents.value | default: product.metafields.global.Construction.value %}
{% comment %} envelope-guard: unwrap a leaked raw metafield JSON wrapper e.g. {"type":"single_line_text_field","value":"Paper"} if one ever slips through, and prefer the canonical global.Material when the value is still an envelope {% endcomment %}
{% if mat contains '"single_line_text_field"' and mat contains '"value"' %}{% assign mat = mat | split: '"value": "' | last | split: '"}' | first | default: product.metafields.global.Material.value %}{% endif %}
{% assign col = product.metafields.custom.collection_name.value | default: product.metafields.specs.collection.value | default: product.metafields.global.Collection.value %}
{% assign rep = product.metafields.custom.pattern_repeat.value | default: product.metafields.global.repeat.value | default: product.metafields.global['Vert-Rpt'].value %}
{% assign fin = product.metafields.custom.finish.value | default: product.metafields.specs.finish.value | default: product.metafields.global.Finish.value | default: product.metafields.global.FINISH.value %}
{% assign care = product.metafields.custom.care.value | default: product.metafields.specs.care.value | default: product.metafields.global.Cleaning.value | default: product.metafields.global['Clean-Code'].value | default: product.metafields.global['Cleaning-Code'].value %}
{% assign fire = product.metafields.custom.fire_rating.value | default: product.metafields.specs.fire_rating.value | default: product.metafields.global.fire_rating.value | default: product.metafields.global.FLAMMABILITY.value %}
{% assign match = product.metafields.custom.match_type.value | default: product.metafields.specs.match_type.value | default: product.metafields.global.MATCH.value | default: product.metafields.global.Match.value %}
{% assign app = product.metafields.custom.application.value | default: product.metafields.specs.application.value | default: product.metafields.global.application.value %}
{% assign len = product.metafields.custom.length.value | default: product.metafields.global.length.value | default: product.metafields.global.Length.value %}
{% assign pkg = product.metafields.custom.packaging.value | default: product.metafields.global.packaged.value | default: product.metafields.global.Packaged.value %}
{% assign uom = product.metafields.custom.unit_of_measure.value | default: product.metafields.global.unit_of_measure.value %}
{% assign coo = product.metafields.custom.origin.value | default: product.metafields.global.Country.value | default: product.metafields.global['Country-of-Origin'].value %}
{% assign dur = product.metafields.custom.wyzenbeek.value | default: product.metafields.global['Wyzenbeek-#'].value %}
{% assign mart = product.metafields.custom.martindale.value | default: product.metafields.global['Martindale-#'].value %}
{% assign abr = product.metafields.custom.abrasion.value | default: product.metafields.specs.abrasion.value %}
{% assign bk = product.metafields.custom.backing.value | default: product.metafields.specs.backing.value | default: product.metafields.global.Substrate.value | default: product.metafields.global.substrate.value %}
{% assign brand = product.metafields.custom.brand.value | default: product.metafields.global.Brand.value %}
{% assign wt = product.metafields.custom.product_weight.value | default: product.metafields.global.Weight.value %}

{% if w != blank or mat != blank or col != blank %}{% assign has_specs = true %}{% endif %}

{% if has_specs %}
<div class="dw-specs">
  <div class="dw-specs-title">Specifications</div>
  {% if w != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Width</span><span class="dw-spec-value">{{ w }}</span></div>{% endif %}
  {% comment %} Double-roll lines (Thibaut/Malibu Wallpaper/Malibu Walls/York): explicit S/R + D/R
     length metafields (D/R = 2 x S/R) render directly so the theme never has to guess by halving
     global.length. Falls back to the plain Length row for everything else. (Steve 2026-07-08 "2 and 2") {% endcomment %}
  {% assign srlen = product.metafields.global.single_roll_length.value %}
  {% assign drlen = product.metafields.global.double_roll_length.value %}
  {% if srlen != blank and drlen != blank %}
    <div class="dw-spec-row"><span class="dw-spec-label">Length S/R</span><span class="dw-spec-value">{{ srlen }}</span></div>
    <div class="dw-spec-row"><span class="dw-spec-label">Length D/R</span><span class="dw-spec-value">{{ drlen }}</span></div>
  {% elsif len != blank %}<div class="dw-spec-row"><span class="dw-spec-label">{% if product.vendor == 'Designtex' %}Bolt size{% else %}Length{% endif %}</span><span class="dw-spec-value">{{ len }}</span></div>{% endif %}
  {% if rep != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Pattern Repeat</span><span class="dw-spec-value">{{ rep }}</span></div>{% endif %}
  {% if match != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Match</span><span class="dw-spec-value">{{ match }}</span></div>{% endif %}
  {% if mat != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Material</span><span class="dw-spec-value">{{ mat }}</span></div>{% endif %}
  {% if bk != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Backing</span><span class="dw-spec-value">{{ bk }}</span></div>{% endif %}
  {% if wt != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Weight</span><span class="dw-spec-value">{{ wt }}</span></div>{% endif %}
  {% if col != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Collection</span><span class="dw-spec-value">{{ col }}</span></div>{% endif %}
  {% if brand != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Designer</span><span class="dw-spec-value">{{ brand }}</span></div>{% endif %}
  {% if fin != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Finish</span><span class="dw-spec-value">{{ fin }}</span></div>{% endif %}
  {% if fire != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Fire Rating</span><span class="dw-spec-value">{{ fire }}</span></div>{% endif %}
  {% if care != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Care</span><span class="dw-spec-value">{{ care }}</span></div>{% endif %}
  {% if app != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Application</span><span class="dw-spec-value">{{ app }}</span></div>{% endif %}
  {% if pkg != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Packaged</span><span class="dw-spec-value">{{ pkg }}</span></div>{% endif %}
  {% if uom != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Unit</span><span class="dw-spec-value">{{ uom }}</span></div>{% endif %}
  {% if coo != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Origin</span><span class="dw-spec-value">{{ coo }}</span></div>{% endif %}
  {% if dur != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Wyzenbeek</span><span class="dw-spec-value">{{ dur }}</span></div>{% endif %}
  {% if mart != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Martindale</span><span class="dw-spec-value">{{ mart }}</span></div>{% endif %}
  {% if abr != blank %}<div class="dw-spec-row"><span class="dw-spec-label">Abrasion</span><span class="dw-spec-value">{{ abr }}</span></div>{% endif %}
  {% assign ai_note = product.metafields.specs.ai_rooms_note.value %}
  {% if ai_note != blank %}
  <div class="dw-spec-row" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
    <span class="dw-spec-label" style="color: #b45309; font-size: 13px;">AI Rooms</span>
    <span class="dw-spec-value" style="color: #92400e; font-size: 13px; font-style: italic;">{{ ai_note }}</span>
  </div>
  {% endif %}
</div>
{% endif %}

{% comment %}
Contact popup form
{% endcomment %}
<div id="custom-popup-overlay">
  <div class="custom-popup-main">
    <div class="custom-close">&times;</div>
    <div class="content-main">
      <div class="popup-content">
        <h2 style="text-align:center;">Send us a message</h2>
        {% form 'contact' %}
        {% if form.errors %}<div class="error-message" style="display:none;"><span>{{ 'general.contact.error' | t }}</span></div>{% endif %}
        {% if form.posted_successfully? %}<div class="success-message" style="display:none;">{{ 'general.contact.success' | t }}</div>{% endif %}
        <div class="field-wrap sku"><input type="text" value="{{ product.variants.last.sku }}" name="contact[SKU]" readonly="true"></div>
        <div class="field-wrap name"><input type="text" placeholder="Name" value="" name="contact2[name]" class="{% if form.errors contains 'author' %}error{% endif %}" required></div>
        <div class="field-wrap email"><input type="email" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="{% if form.errors contains 'email' %}input--error{% endif %}" placeholder="Email" required></div>
        <div class="field-wrap phone"><input type="text" placeholder="Phone number" value="" name="contact[phone number]" required></div>
        <div class="field-wrap message"><textarea name="contact[message]" placeholder="Message" rows="5" required></textarea></div>
        <input type="hidden" class="comment-check" value="" />
        <input style="background-color:#000;color:#fff;" type="submit" value="{{ 'general.contact.submit' | t }}">
        {% endform %}
      </div>
    </div>
  </div>
</div>