`snippets/spec-sheet-button.liquid`

264 lines
{% comment %}
  Spec Sheet Button — INLINE PDF download (no page navigation, no iframe).

  FIX HISTORY
  -----------
  v1 (broken): fetch('/pages/spec-sheet') + DOMParser + html2canvas. DOMParser
    never runs scripts, so #pdf-content was always the "Loading Product..."
    placeholder -> 0-dim canvas -> jsPDF threw -> "Error".

  v2 (broken on LIVE): hidden same-origin iframe -> /pages/spec-sheet -> call its
    downloadPDF(). DEAD ON ARRIVAL: the storefront sends `X-Frame-Options: DENY`
    + CSP `frame-ancestors 'none'` STORE-WIDE (verified 2026-06-23 on /, /pages/*,
    /collections/*, /products/*). DENY blocks ALL framing — including same-origin —
    so the iframe never renders and contentDocument is inaccessible.

  v3 (this version — works against live CSP):
    Build the spec-sheet DOM RIGHT HERE on the product page from Liquid-injected
    product data + metafields (no fetch, no iframe, no /pages/spec-sheet
    dependency). On click we lazy-load jsPDF + html2canvas from cdnjs (the live
    CSP has NO script-src/default-src directive, so cdnjs is allowed — verified),
    render the offscreen node with html2canvas (useCORS:true; the product image
    is on cdn.shopify.com which returns `access-control-allow-origin: *`, so the
    canvas does NOT taint), and jsPDF.save() it. One click, fully self-contained.

  The standalone /pages/spec-sheet page still works for a direct visit (it has
  {% layout none %} so it's a clean print page), but the BUTTON no longer needs it.
{% endcomment %}

{%- liquid
  assign p = product
  assign mf = product.metafields
  # ---- Color: real color name only (spreadsheet/metafield/variant option), never AI ----
  assign spec_color = ''
  if mf.custom.color != blank
    assign spec_color = mf.custom.color
  elsif mf.global.Color != blank
    assign spec_color = mf.global.Color
  elsif mf.dwc.color != blank
    assign spec_color = mf.dwc.color
  endif
  # ---- Mfr SKU ----
  assign mfr_sku = ''
  if mf.custom.manufacturer_sku != blank
    assign mfr_sku = mf.custom.manufacturer_sku
  elsif mf.dwc.manufacturer_sku != blank
    assign mfr_sku = mf.dwc.manufacturer_sku
  endif
  # ---- DW SKU (strip -Sample) ----
  assign dw_sku = p.selected_or_first_available_variant.sku | default: p.variants.first.sku
  assign dw_sku = dw_sku | replace: '-Sample', '' | replace: '-SAMPLE', '' | replace: '-sample', ''
-%}

<div class="spec-sheet-controls">
  <button type="button"
          class="spec-sheet-btn pdf-download-btn"
          data-dw-spec-trigger
          aria-label="Download spec sheet PDF for {{ p.title | escape }}">
    🖨️ Download PDF
  </button>
</div>

{%- comment %} Offscreen, fully-rendered spec sheet built from Liquid data {% endcomment -%}
<div id="dw-spec-sheet" aria-hidden="true"
     style="position:fixed;left:-10000px;top:0;width:816px;background:#fff;z-index:-1;">
  <div class="dw-spec-page">
    <div class="dw-spec-header">
      <img class="dw-spec-logo"
           crossorigin="anonymous"
           src="https://www.designerwallcoverings.com/cdn/shop/files/Screen_Shot_2019-02-06_at_12.08.24_PM_300x172.png?v=1613539653"
           alt="Designer Wallcoverings">
    </div>
    <div class="dw-spec-body">
      <h1 class="dw-spec-title">{{ p.title | escape }}</h1>
      {%- if p.featured_image -%}
        <img class="dw-spec-img" crossorigin="anonymous"
             src="{{ p.featured_image | image_url: width: 600 }}"
             alt="{{ p.title | escape }}">
      {%- endif -%}
      <div class="dw-spec-grid">
        <div class="dw-spec-item"><strong>DW SKU:</strong><span>{{ dw_sku | escape }}</span></div>
        {%- if spec_color != blank -%}<div class="dw-spec-item"><strong>Color:</strong><span>{{ spec_color | escape }}</span></div>{%- endif -%}
        {%- if p.vendor != blank -%}<div class="dw-spec-item"><strong>Brand:</strong><span>{{ p.vendor | escape }}</span></div>{%- endif -%}
        {%- assign coll = mf.custom.collection_name | default: mf.global.Collection -%}
        {%- if coll != blank -%}<div class="dw-spec-item"><strong>Collection:</strong><span>{{ coll | escape }}</span></div>{%- endif -%}
        {%- assign comp = mf.custom.material | default: mf.global.Content | default: mf.global.Contents -%}
        {%- if comp != blank -%}<div class="dw-spec-item"><strong>Composition:</strong><span>{{ comp | escape }}</span></div>{%- endif -%}
        {%- assign w = mf.custom.width | default: mf.global.width | default: mf.global.Width -%}
        {%- if w != blank -%}<div class="dw-spec-item"><strong>Width:</strong><span>{{ w | escape }}</span></div>{%- endif -%}
        {%- assign len = mf.custom.length | default: mf.global.length | default: mf.global.Length -%}
        {%- if len != blank -%}<div class="dw-spec-item"><strong>{% if product.vendor == 'Designtex' %}Bolt size:{% else %}Length:{% endif %}</strong><span>{{ len | escape }}</span></div>{%- endif -%}
        {%- assign rep = mf.custom.pattern_repeat | default: mf.global.repeat -%}
        {%- if rep != blank -%}<div class="dw-spec-item"><strong>Repeat:</strong><span>{{ rep | escape }}</span></div>{%- endif -%}
        {%- assign mt = mf.custom.match_type | default: mf.global.Match | default: mf.global.MATCH -%}
        {%- if mt != blank -%}<div class="dw-spec-item"><strong>Match:</strong><span>{{ mt | escape }}</span></div>{%- endif -%}
        {%- assign wt = mf.custom.product_weight | default: mf.global.Weight -%}
        {%- if wt != blank -%}<div class="dw-spec-item"><strong>Weight:</strong><span>{{ wt | escape }}</span></div>{%- endif -%}
        {%- assign fin = mf.custom.finish | default: mf.global.Finish | default: mf.global.FINISH -%}
        {%- if fin != blank -%}<div class="dw-spec-item"><strong>Finish:</strong><span>{{ fin | escape }}</span></div>{%- endif -%}
        {%- assign care = mf.custom.care | default: mf.global.Cleaning -%}
        {%- if care != blank -%}<div class="dw-spec-item"><strong>Care:</strong><span>{{ care | escape }}</span></div>{%- endif -%}
        {%- assign fire = mf.custom.fire_rating | default: mf.global.fire_rating | default: mf.global.FLAMMABILITY -%}
        {%- if fire != blank -%}<div class="dw-spec-item"><strong>Fire Rating:</strong><span>{{ fire | escape }}</span></div>{%- endif -%}
        {%- assign origin = mf.custom.origin | default: mf.global.Country -%}
        {%- if origin != blank -%}<div class="dw-spec-item"><strong>Country of Origin:</strong><span>{{ origin | escape }}</span></div>{%- endif -%}
        {%- assign uom = mf.custom.unit_of_measure | default: mf.global.unit_of_measure -%}
        {%- if uom != blank -%}<div class="dw-spec-item"><strong>Sold:</strong><span>{{ uom | escape }}</span></div>{%- endif -%}
        {%- if mfr_sku != blank -%}<div class="dw-spec-item"><strong>Extra Info:</strong><span>{{ mfr_sku | escape }}</span></div>{%- endif -%}
      </div>
    </div>
    <div class="dw-spec-footer">
      <div class="dw-spec-footer-line company">Designer Wallcoverings Purchasing Agency</div>
      <div class="dw-spec-footer-line">15442 Ventura Bl #102, Sherman Oaks, CA 91403</div>
      <div class="dw-spec-footer-line">Phone: (888) 373-4564 | info@designerwallcoverings.com | www.designerwallcoverings.com</div>
      <div class="dw-spec-footer-line italic">Purchasing Agency for the Wallcovering and Surface Material Industry</div>
      <div class="dw-spec-footer-line tiny">Spec sheet information valid only when purchased through Designer Wallcoverings Purchasing</div>
    </div>
  </div>
</div>

<script>
(function () {
  if (window.__dwSpecPdfInit) return;
  window.__dwSpecPdfInit = true;

  var JSPDF_SRC = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
  var H2C_SRC   = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';

  function loadScript(src) {
    return new Promise(function (resolve, reject) {
      var existing = document.querySelector('script[src="' + src + '"]');
      if (existing) {
        if (existing.dataset.loaded === '1') return resolve();
        existing.addEventListener('load', function () { resolve(); });
        existing.addEventListener('error', function () { reject(new Error('load fail ' + src)); });
        return;
      }
      var s = document.createElement('script');
      s.src = src;
      s.async = true;
      s.addEventListener('load', function () { s.dataset.loaded = '1'; resolve(); });
      s.addEventListener('error', function () { reject(new Error('load fail ' + src)); });
      document.head.appendChild(s);
    });
  }

  function ensureLibs() {
    var need = [];
    if (typeof window.html2canvas !== 'function') need.push(loadScript(H2C_SRC));
    if (!(window.jspdf && window.jspdf.jsPDF)) need.push(loadScript(JSPDF_SRC));
    return Promise.all(need);
  }

  // Decode the protocol-relative shopify logo to avoid a tainting surprise; the
  // product image + logo are both cdn.shopify.com (ACAO:*), so useCORS handles them.
  async function generate(btn) {
    var node = document.getElementById('dw-spec-sheet');
    if (!node) throw new Error('spec node missing');
    // Make it renderable (html2canvas needs layout; keep it offscreen, not display:none).
    node.style.zIndex = '-1';
    node.style.visibility = 'visible';

    await ensureLibs();

    var canvas = await window.html2canvas(node.querySelector('.dw-spec-page'), {
      scale: 2,
      useCORS: true,
      allowTaint: false,
      backgroundColor: '#ffffff',
      logging: false,
      windowWidth: 816
    });

    var jsPDF = window.jspdf.jsPDF;
    var imgData = canvas.toDataURL('image/png');
    var pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'letter' });
    var imgWidth = 216;
    var imgHeight = (canvas.height * imgWidth) / canvas.width;
    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);

    var sku = (node.querySelector('.dw-spec-item span') || {}).textContent || 'spec';
    pdf.save('Designer-Wallcoverings-Los-Angeles-' + sku.trim().replace(/[^A-Za-z0-9\-]+/g, '-') + '.pdf');
  }

  function onClick(e) {
    var btn = e.currentTarget;
    var orig = btn.textContent;
    btn.textContent = '⏳ Generating...';
    btn.disabled = true;
    generate(btn).then(function () {
      btn.textContent = '✓ Downloaded!';
      setTimeout(function () { btn.textContent = orig; btn.disabled = false; }, 2000);
    }).catch(function (err) {
      console.error('Spec PDF generation failed:', err);
      btn.textContent = '✗ Error - Try Again';
      setTimeout(function () { btn.textContent = orig; btn.disabled = false; }, 2500);
    });
  }

  function wire() {
    var btns = document.querySelectorAll('[data-dw-spec-trigger]');
    for (var i = 0; i < btns.length; i++) {
      if (btns[i].dataset.dwWired === '1') continue;
      btns[i].dataset.dwWired = '1';
      btns[i].addEventListener('click', onClick);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', wire);
  } else {
    wire();
  }
})();
</script>

<style>
.spec-sheet-controls {
  display: inline-block;
  margin: 0;
  /* nudge the Download-PDF button up to align with the REQUEST SAMPLE row (Steve 2026-06-24) */
  transform: translateY(-6px);
}
.spec-sheet-btn {
  display: inline-block;
  padding: 18px 24px;
  background: #2c5f7f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.spec-sheet-btn:hover {
  background: #1e4557;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.spec-sheet-btn:active { transform: translateY(0); }
.spec-sheet-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pdf-download-btn { vertical-align: top; }

/* Offscreen spec-sheet print styles (rendered by html2canvas, never shown to the user) */
#dw-spec-sheet * { margin: 0; padding: 0; box-sizing: border-box; }
#dw-spec-sheet .dw-spec-page { width: 816px; background: #fff; font-family: Arial, Helvetica, sans-serif; }
#dw-spec-sheet .dw-spec-header { padding: 30px 40px; text-align: center; border-bottom: 2px solid #2c5f7f; }
#dw-spec-sheet .dw-spec-logo { max-width: 200px; display: block; margin: 0 auto; }
#dw-spec-sheet .dw-spec-body { padding: 30px 40px; }
#dw-spec-sheet .dw-spec-title { font-size: 18px; color: #333; margin-bottom: 15px; font-weight: normal; text-align: center; text-transform: capitalize; }
#dw-spec-sheet .dw-spec-img { max-width: 500px; max-height: 500px; object-fit: contain; display: block; margin: 0 auto 20px; width: 100%; }
#dw-spec-sheet .dw-spec-grid { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 10px; }
#dw-spec-sheet .dw-spec-item { font-size: 14px; line-height: 1.6; display: flex; align-items: baseline; }
#dw-spec-sheet .dw-spec-item strong { color: #333; font-weight: bold; margin-right: 6px; white-space: nowrap; }
#dw-spec-sheet .dw-spec-item span { color: #555; flex: 1; }
#dw-spec-sheet .dw-spec-footer { padding: 20px 40px; text-align: center; border-top: 2px solid #2c5f7f; background: #f9f9f9; }
#dw-spec-sheet .dw-spec-footer-line { font-size: 10px; color: #666; margin: 3px 0; }
#dw-spec-sheet .dw-spec-footer-line.company { font-size: 12px; font-weight: bold; color: #333; margin-bottom: 6px; }
#dw-spec-sheet .dw-spec-footer-line.italic { font-style: italic; margin-top: 10px; }
#dw-spec-sheet .dw-spec-footer-line.tiny { font-size: 9px; margin-top: 8px; }
</style>