`mailers/_glitter_gen.js`

163 lines
'use strict';
// Generates glitter-sparkle-launch.html — 12 products as UNIFORM CIRCLES,
// reusing the color-coordinate-launch header / BRANDS tabs / SHOP BY CATEGORY /
// CAN-SPAM footer verbatim. All visible copy + alt use "Wallcovering" (never
// "Wallpaper") to pass the cc-client build validator.
const fs = require('fs');
const path = require('path');
const UTM = 'utm_source=email&utm_medium=mailer&utm_campaign=glitter-sparkle-2026-09';
const P = (h) => `https://www.designerwallcoverings.com/products/${h}?${UTM}`;
const C = (s) => `https://www.designerwallcoverings.com/collections/${s}?${UTM}`;
const IMG = (u) => `${u}?width=320&height=320&crop=center`;

// 12 SKUs — Glitter · Sequin · Metallic (Glitter Walls) + Glambeads (Glass Bead)
const items = [
  ['sexy-sequin-wallcovering-blue-dazzle-gls-106','https://cdn.shopify.com/s/files/1/0015/4117/7456/files/sexy-sequin-wallcovering--blue-dazzle_54cb4cb4-bf1e-4bbd-8142-fa2f1a6167c7.jpg','Sexy Sequin','Blue Dazzle'],
  ['hollywood-sequin-wallcoverings-hsw-51507','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/c1944e5964687b1542f3dc6f8e0708ae.jpg','Hollywood Sequin','Gold'],
  ['sting-ray-sequin-glm-53041','https://cdn.shopify.com/s/files/1/0015/4117/7456/files/sting-ray-sequin-glm-53041-clean.jpg','Sting Ray Sequin','Bronze Multi'],
  ['hollywood-sequin-wallcoverings-hsw-51510','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/19235740651b3832a926e3473c7527c5.jpg','Hollywood Sequin','Silver'],
  ['hollywood-sequin-wallcoverings-hsw-51505','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/b45513e11ba9868087337988e2e7a809.jpg','Hollywood Sequin','Bronze'],
  ['sexy-sequin-wallcovering-atlantic-blue-gls-109','https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gls-1494847651952-cropped.jpg','Sexy Sequin','Atlantic Blue'],
  ['leopard-glitter-wallcovering-silver-blue','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/IMG_04592.heic','Leopard Glitter','Silver Blue'],
  ['leopard-glitter-wallcovering-silver-green','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/IMG_0461.heic','Leopard Glitter','Silver Green'],
  ['leopard-glitter-wallcovering-silver-pink','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/IMG_0462.heic','Leopard Glitter','Silver Pink'],
  ['gleaming-glambeads-silver-and-cream-glass-bead-wallpaper','https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gleaming-glambeads-silver-and-cream-glass-bead-wallpaper-14768314122291.jpg','Gleaming Glambeads','Silver & Cream'],
  ['copy-of-glambeads-glass-bead-stripe-wallpaper-cool-black-metallic','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-03-29at1.50.40PM.png','Glambeads Glass Bead Stripe','Cool Black'],
  ['glambeads-solid-black-glass-bead-wallpaper-gbs-19014','https://cdn.shopify.com/s/files/1/0015/4117/7456/products/TTN-0714_Item.jpg','Glambeads Solid','Black'],
];

function circle(it){
  const [h,img,name,color] = it;
  return `<td width="33%" valign="top" align="center" style="padding:0 6px 22px;">
  <a href="${P(h)}" target="_blank" style="text-decoration:none;">
    <img src="${IMG(img)}" alt="${name} ${color} glass-bead &amp; metallic wallcovering" width="160" height="160" style="width:160px;max-width:160px;height:160px;display:block;margin:0 auto;border-radius:50%;border:1px solid #e8e2d6;background:#f4f1ec;">
    <p style="font-family:Georgia,serif;font-size:12px;color:#1a1a1a;margin:11px 0 1px;line-height:15px;">${name}</p>
    <p style="font-family:Helvetica,Arial,sans-serif;font-size:9px;letter-spacing:1.2px;color:#8d8478;text-transform:uppercase;margin:0;">${color}</p>
  </a>
</td>`;
}

let grid = '';
for (let i=0;i<items.length;i+=3){
  grid += `      <tr>\n        ${circle(items[i])}\n        ${circle(items[i+1])}\n        ${circle(items[i+2])}\n      </tr>\n`;
}

const pill = (label,href,bg) => `<a href="${href}" target="_blank" style="display:inline-block;margin:5px 4px;padding:11px 22px;background-color:${bg};border:1px solid ${bg};border-radius:26px;color:#ffffff;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;">${label}</a>`;

// BRAND tabs (verbatim set from color-coordinate-launch, utm re-pointed)
const BRANDS = [
  ['Pierre Frey','https://www.designerwallcoverings.com/search?q=Pierre%20Frey&type=product&'+UTM],
  ['Phillipe Romano', C('phillipe-romano')],
  ['Rebel Walls', C('rebel-walls')],
  ['Thibaut','https://www.designerwallcoverings.com/search?q=Thibaut&type=product&'+UTM],
  ['Fentucci Naturals', C('fentucci-naturals')],
  ['Vahallan', C('vahallan')],
  ['Maharam','https://www.designerwallcoverings.com/search?q=Maharam&type=product&'+UTM],
  ['CMO Paris','https://www.designerwallcoverings.com/search?q=CMO%20Paris&type=product&'+UTM],
  ['Designtex','https://www.designerwallcoverings.com/search?q=Designtex&type=product&'+UTM],
  ['Romo', C('romo')],
  ['Jeffrey Stevens', C('jeffrey-stevens')],
].map(([l,h])=>pill(l,h,'#1c1816')).join('');

const CATS = [
  ['New Arrivals', C('new-arrivals'), '#7a6030'],
  ['Glitter Walls', C('glitter-walls'), '#1c1816'],
  ['Glambeads', C('glass-bead'), '#1c1816'],
  ['Metallics', C('mica'), '#1c1816'],
  ['Murals', C('murals'), '#1c1816'],
  ['Shop by Color','https://www.designerwallcoverings.com/pages/shop-by-color?'+UTM, '#1c1816'],
].map(([l,h,bg])=>pill(l,h,bg)).join('');

const html = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sparkle &amp; Shine — Glitter, Sequin, Metallic &amp; Glass-Bead Wallcoverings</title>
<style type="text/css">
  body,table,td,p,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
  body{margin:0!important;padding:0!important;width:100%!important;background:#f4f1ec;font-family:Georgia,'Times New Roman',serif;color:#2a2724;}
  table{border-collapse:collapse!important;} img{border:0;outline:none;text-decoration:none;display:block;-ms-interpolation-mode:bicubic;}
  a{color:#1a1a1a;text-decoration:none;}
  @media only screen and (max-width:620px){ .stack{display:block!important;width:100%!important;} }
</style></head>
<body style="margin:0;padding:0;background:#f4f1ec;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#f4f1ec;">
<tr><td align="center" style="padding:20px 0;">
  <table role="presentation" width="620" cellspacing="0" cellpadding="0" border="0" style="max-width:620px;background:#ffffff;">

    <!-- LOGO -->
    <tr><td align="center" style="padding:28px 0 14px;border-bottom:1px solid #e8e2d6;">
      <a href="https://www.designerwallcoverings.com/?${UTM}" target="_blank" style="text-decoration:none;color:#1a1a1a;">
        <div style="font-family:Georgia,serif;font-size:28px;letter-spacing:6px;color:#1a1a1a;text-transform:uppercase;">Designer Wallcoverings</div>
        <div style="font-family:Helvetica,Arial,sans-serif;font-size:9px;letter-spacing:4px;color:#8d8478;margin-top:4px;text-transform:uppercase;">est. 2003 &middot; to the trade</div>
      </a>
    </td></tr>

    <!-- ANNOUNCE -->
    <tr><td align="center" style="padding:34px 36px 6px;">
      <p style="font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7a6030;margin:0;">New &middot; The Sparkle Collections</p>
      <p style="font-family:Georgia,serif;font-size:30px;line-height:36px;letter-spacing:1px;color:#1a1a1a;margin:14px 0 0;">Sparkle &amp; Shine</p>
      <p style="font-family:Georgia,serif;font-size:15px;line-height:23px;color:#5a544c;margin:16px 24px 0;max-width:470px;">
        Glitter, sequin &amp; hand-set glass bead &mdash; three ways to make a wall catch the light. A dozen looks, below. Order any as a <strong style="color:#7a6030;">$4.25 sample</strong>.
      </p>
    </td></tr>

    <!-- PRIMARY CTAs -->
    <tr><td align="center" style="padding:22px 36px 8px;">
      <a href="${C('glitter-walls')}" target="_blank" style="display:inline-block;margin:5px;padding:13px 30px;background:transparent;color:#1a1a1a !important;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border-radius:2px;border:1px solid #1a1a1a;">Shop Glitter Walls</a>
      <a href="${C('glass-bead')}" target="_blank" style="display:inline-block;margin:5px;padding:13px 30px;background:transparent;color:#1a1a1a !important;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border-radius:2px;border:1px solid #1a1a1a;">Shop Glambeads</a>
    </td></tr>

    <!-- 12 UNIFORM CIRCLES -->
    <tr><td align="center" style="padding:26px 24px 4px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
${grid}      </table>
    </td></tr>

    <!-- CLOSING CTA -->
    <tr><td align="center" style="padding:14px 36px 6px;">
      <a href="${C('glitter-walls')}" target="_blank" style="display:inline-block;padding:13px 34px;background:#1c1816;color:#ffffff !important;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border-radius:2px;border:1px solid #1c1816;">See Every Sparkle Pattern</a>
      <p style="font-family:Georgia,serif;font-style:italic;font-size:13px;color:#8d8478;margin:14px 0 0;">Sold to the trade &mdash; swatches ship the same week.</p>
    </td></tr>

    <!-- BRANDS -->
    <tr><td align="center" style="padding:8px 18px 4px;background:#ffffff;border-top:1px solid #e8e2d6;">
      <div style="font-family:Helvetica,Arial,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8d8478;margin:26px 0 16px;">Shop by House</div>
      ${BRANDS}
    </td></tr>

    <!-- SHOP BY CATEGORY -->
    <tr><td align="center" style="padding:14px 18px 34px;background:#ffffff;">
      <div style="font-family:Helvetica,Arial,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8d8478;margin:14px 0 16px;">Shop by Category</div>
      ${CATS}
    </td></tr>

    <!-- WORDMARK -->
    <tr><td align="center" style="padding:40px 24px 28px;border-top:1px solid #e8e2d6;">
      <a href="https://www.designerwallcoverings.com/?${UTM}" target="_blank" style="text-decoration:none;">
        <div style="font-family:Georgia,serif;font-size:20px;letter-spacing:5px;color:#1a1a1a;text-transform:uppercase;">Designer Wallcoverings</div>
        <div style="font-family:Georgia,serif;font-style:italic;font-size:12px;color:#8d8478;margin-top:8px;">To the trade &mdash; Los Angeles, since 2003</div>
      </a>
    </td></tr>

    <!-- FOOTER -->
    <tr><td align="center" style="padding:32px 36px;background:#f4f1ec;border-top:1px solid #e8e2d6;">
      <p style="font-family:Helvetica,Arial,sans-serif;font-size:11px;line-height:18px;color:#8d8478;margin:0 0 8px;">
        <strong style="color:#5a544c;letter-spacing:1px;">DESIGNER WALLCOVERINGS</strong><br>
        15442 Ventura Bl &middot; Sherman Oaks, CA 91403 &middot; 1-888-373-4564<br>
        info@designerwallcoverings.com &middot; designerwallcoverings.com
      </p>
      <p style="font-family:Helvetica,Arial,sans-serif;font-size:10px;line-height:16px;color:#8d8478;margin:16px 0 0;">
        You&rsquo;re receiving this email because you&rsquo;ve shopped or registered with Designer Wallcoverings.<br>
        Unsubscribe and preference links appear below (added automatically by Constant Contact).
      </p>
    </td></tr>

  </table>
</td></tr></table>
</body></html>`;

const OUT = path.join(__dirname, 'glitter-sparkle-launch.html');
fs.writeFileSync(OUT, html);
console.log('wrote', OUT, html.length, 'bytes,', items.length, 'circles');