`rolls-ar-deeplink/snippets/how-many-rolls.liquid`

49 lines
{%- comment -%}
  "How Many Rolls?" AR deep-link button  — Council idea #5 (2026-08-09)
  PATH B (ship-now): renders on WIDTH alone; the AR measure tool at
  nph.designerwallcoverings.com collects the pattern repeat + wall size in-tool.
  Progressive enhancement: if a numeric repeat metafield is present (Path A
  backfill), it is passed through so the tool can pre-fill and skip a step.

  Install: theme 144396058675 -> snippets/how-many-rolls.liquid, then
  {% render 'how-many-rolls' %} inside the product form (main-product section),
  below the Add-to-Cart / sample block.

  Hard rule (the idea's own reliability gate): if width is missing/non-numeric,
  render NOTHING — never a broken "0 rolls" flow.
{%- endcomment -%}

{%- liquid
  assign raw_width = product.metafields.custom.width | default: ''
  assign width_num = raw_width | replace: '"', '' | replace: 'Wide', '' | strip | times: 1.0
  assign vr = product.metafields.custom.pattern_repeat_number | default: product.metafields.custom.vertical_repeat_number | default: ''
  assign hr = product.metafields.custom.horizontal_repeat_number | default: ''
-%}

{%- if width_num > 0 -%}
  {%- assign qs = '?w=' | append: width_num -%}
  {%- assign vr_num = vr | times: 1.0 -%}
  {%- assign hr_num = hr | times: 1.0 -%}
  {%- if vr_num > 0 -%}{%- assign qs = qs | append: '&vr=' | append: vr_num -%}{%- endif -%}
  {%- if hr_num > 0 -%}{%- assign qs = qs | append: '&hr=' | append: hr_num -%}{%- endif -%}
  {%- assign qs = qs | append: '&sku=' | append: product.selected_or_first_available_variant.sku | append: '&mode=' -%}
  {%- if vr_num > 0 or hr_num > 0 -%}{%- assign qs = qs | append: 'full' -%}{%- else -%}{%- assign qs = qs | append: 'width' -%}{%- endif -%}

  <a class="dw-rolls-btn"
     href="https://nph.designerwallcoverings.com/measure{{ qs }}"
     target="_blank" rel="noopener"
     data-dw-rolls="1">
    <span class="dw-rolls-icon" aria-hidden="true">&#128207;</span>
    How many rolls do I need?
  </a>
  <style>
    .dw-rolls-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;
      padding:.7rem 1.1rem;border:1px solid #1a1a1a;border-radius:2px;
      font:600 14px/1 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;
      letter-spacing:.3px;text-decoration:none;color:#1a1a1a;background:#fff;
      transition:background .15s,color .15s}
    .dw-rolls-btn:hover{background:#1a1a1a;color:#fff}
    .dw-rolls-icon{font-size:16px}
  </style>
{%- endif -%}