Painted Edge Business Cards

.gdm-matrix-configurator { max-width: 980px; margin: 0 auto; font-family: inherit; }
.gdm-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.gdm-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; }
.gdm-field select { width: 100%; padding: 10px; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 1em; }
.gdm-field select:disabled { background: #f5f5f5; color: #999; }
#gdm-cardtype-row .gdm-field select { font-weight: 600; border-color: #0073aa; }

.gdm-grid-wrapper h4, .gdm-extra-options h4 { margin: 24px 0 10px; }
.gdm-qty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.gdm-grid-placeholder { grid-column: 1 / -1; color: #888; font-style: italic; }
.gdm-qty-card { border: 2px solid #e0e0e0; border-radius: 6px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all .15s ease; }
.gdm-qty-card:hover { border-color: #999; }
.gdm-qty-card.gdm-selected { border-color: #0073aa; background: #f0f8ff; }
.gdm-qty-card .gdm-qty-num { display: block; font-weight: 700; font-size: 1.1em; }
.gdm-qty-card .gdm-qty-price { display: block; color: #0073aa; font-weight: 600; margin-top: 4px; }

.gdm-extra-options { border-top: 1px solid #eee; padding-top: 16px; margin-top: 20px; }
.gdm-option-field { margin-bottom: 14px; }
.gdm-option-field textarea { width: 100%; max-width: 480px; padding: 8px; border: 1px solid #d0d0d0; border-radius: 4px; }

.gdm-price-summary { margin-top: 20px; padding: 16px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0; }
.gdm-price-line { display: flex; justify-content: space-between; padding: 4px 0; }
.gdm-price-total { font-size: 1.2em; }

/* GDM_PRICING_MASTER, inline pricing matrix, 21 card types / 627 rows */
/* GDM_PRICING_MASTER (locked to Painted Edge), 8 SKU rows */
window.GDM_PRICING_MASTER = {“Painted Edge”: [{“size”: “2×3.5 US”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Front Only (4/0)”, “foil”: “Ship with a Brown Box”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-4-0-BOX”, “prices”: {“250”: 288.01, “500”: 373.18, “1000”: 583.42}}, {“size”: “2.125×3.375 EU”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Front Only (4/0)”, “foil”: “Ship with a Brown Box”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-4-0-BOX”, “prices”: {“250”: 288.01, “500”: 373.18, “1000”: 583.42}}, {“size”: “2×3.5 US”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Front Only (4/0)”, “foil”: “Insert in a Clear Case”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-4-0-CASE”, “prices”: {“250”: 306.39, “500”: 399.03, “1000”: 630.72}}, {“size”: “2.125×3.375 EU”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Front Only (4/0)”, “foil”: “Insert in a Clear Case”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-4-0-CASE”, “prices”: {“250”: 306.39, “500”: 399.03, “1000”: 630.72}}, {“size”: “2×3.5 US”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Both Sides (4/1 or 4/4)”, “foil”: “Ship with a Brown Box”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-BOTH-BOX”, “prices”: {“250”: 371.33, “500”: 413.83, “1000”: 614.51}}, {“size”: “2.125×3.375 EU”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Both Sides (4/1 or 4/4)”, “foil”: “Ship with a Brown Box”, “sku_base”: “PRN-BCD-32PTUNC-NC-VARIOUS-RECT-BOTH-BOX”, “prices”: {“250”: 371.33, “500”: 413.83, “1000”: 614.51}}, {“size”: “2×3.5 US”, “shape”: “Rectangle”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Both Sides (4/1 or 4/4)”, “foil”: “Insert in a Clear Case”, “sku_base”: “PRN-BCD-32PTUNC-NC-2X3.5US-RECT-BOTH-CASE”, “prices”: {“250”: 389.71, “500”: 439.69, “1000”: 661.81}}, {“size”: “2.5×2.5”, “shape”: “Square”, “radius”: “”, “stock”: “32PT Uncoated”, “coating”: “”, “sides”: “Both Sides (4/4)”, “foil”: “Standard”, “sku_base”: “PRN-BCD-32PTUNC-NC-2.5X2.5-SQ”, “prices”: {“250”: 408.51, “500”: 455.24, “1000”: 614.51}}]};

(function () {
var MASTER = window.GDM_PRICING_MASTER || {};
var FIELD_ORDER = [‘size’, ‘shape’, ‘radius’, ‘stock’, ‘coating’, ‘sides’, ‘foil’];
var FIELD_LABELS = {
size: ‘Size’, shape: ‘Shape’, radius: ‘Corner Radius’, stock: ‘Paper Stock’,
coating: ‘Coating’, sides: ‘Print Sides’, foil: ‘Foil / Finish Option’
};

var cardTypeEl = document.getElementById(‘gdm-cardtype’);
var dynamicFieldsEl = document.getElementById(‘gdm-dynamic-fields’);
var gridEl = document.getElementById(‘gdm-qty-grid’);
var notesEl = document.getElementById(‘gdm-notes’);
var summaryEl = document.getElementById(‘gdm-price-summary’);
var priceTotalEl = document.getElementById(‘gdm-price-total’);

var hidPrice = document.getElementById(‘gdm-hidden-price’);
var hidQty = document.getElementById(‘gdm-hidden-qty’);
var hidSku = document.getElementById(‘gdm-hidden-sku’);
var hidSpec = document.getElementById(‘gdm-hidden-spec’);
var hidNotes = document.getElementById(‘gdm-hidden-notes’);

var currentData = []; // rows for the selected card type
var selections = {}; // { field: value } for fields resolved so far (incl. auto-picked)
var fieldEls = {}; // { field: } for fields currently rendered
var selectedRow = null;
var selectedQty = null;

function uniq(arr) { return Array.from(new Set(arr)); }

function sortValues(field, values) {
if (field === ‘size’) {
return values.sort(function (a, b) {
var pa = a.split(/[x×]/i).map(parseFloat), pb = b.split(/[x×]/i).map(parseFloat);
if (!isNaN(pa[0]) && !isNaN(pb[0]) && pa[0] !== pb[0]) return pa[0], pb[0];
if (!isNaN(pa[1]) && !isNaN(pb[1]) && pa[1] !== pb[1]) return pa[1], pb[1];
return a.localeCompare(b);
});
}
return values.sort();
}

function rowMatches(row, uptoIdx) {
for (var i = 0; i < uptoIdx; i++) {
var f = FIELD_ORDER[i];
if (selections[f] && row[f] !== selections[f]) return false;
}
return true;
}

// Removes any rendered dropdowns for fields at or after `idx`, then figures
// out the next real decision point (skipping fields with 0 or 1 real
// values for the current filtered data) and either renders a dropdown for
// it or, once every field is resolved, renders the qty grid.
function renderFrom(idx) {
for (var i = idx; i = FIELD_ORDER.length) { renderGrid(); return; }

var field = FIELD_ORDER[idx];
var filtered = currentData.filter(function (r) { return rowMatches(r, idx); });
var values = uniq(filtered.map(function (r) { return r[field]; }).filter(function (v) { return v; }));

if (values.length === 0) {
// This field isn’t a real dimension for this card type, skip it.
renderFrom(idx + 1);
return;
}
if (values.length === 1) {
selections[field] = values[0];
renderFrom(idx + 1);
return;
}

values = sortValues(field, values);
var wrap = document.createElement(‘div’);
wrap.className = ‘gdm-field’;
var label = document.createElement(‘label’);
label.textContent = FIELD_LABELS[field] || field;
label.setAttribute(‘for’, ‘gdm-field-‘ + field);
var select = document.createElement(‘select’);
select.id = ‘gdm-field-‘ + field;
var placeholderOpt = document.createElement(‘option’);
placeholderOpt.value = ”;
placeholderOpt.textContent = ‘Choose ‘ + (FIELD_LABELS[field] || field).toLowerCase() + ‘…’;
select.appendChild(placeholderOpt);
values.forEach(function (v) {
var o = document.createElement(‘option’);
o.value = v; o.textContent = v;
select.appendChild(o);
});
select.addEventListener(‘change’, function () {
selections[field] = select.value;
if (select.value) { renderFrom(idx + 1); }
else { renderFrom(idx + 1); } // clears downstream + shows placeholder grid
});
wrap.appendChild(label);
wrap.appendChild(select);
dynamicFieldsEl.appendChild(wrap);
fieldEls[field] = select;

renderGrid(); // nothing resolvable yet at/after this level
}

function findRow() {
if (Object.keys(selections).length === 0) return null;
for (var i = 0; i < FIELD_ORDER.length; i++) {
var f = FIELD_ORDER[i];
// every field that has a rendered dropdown must have a real (non-empty) selection
if (fieldEls[f] && !selections[f]) return null;
}
var match = currentData.filter(function (r) { return rowMatches(r, FIELD_ORDER.length); });
return match.length ? match[0] : null;
}

function renderGrid() {
gridEl.innerHTML = '';
selectedRow = findRow();
if (!selectedRow) {
gridEl.innerHTML = '

Finish the options above to see pricing.

‘;
selectedQty = null;
updateSummary();
return;
}
var qtys = Object.keys(selectedRow.prices).map(Number).sort(function (a, b) { return a, b; });
qtys.forEach(function (qty) {
var price = selectedRow.prices[qty];
var card = document.createElement(‘div’);
card.className = ‘gdm-qty-card’;
card.innerHTML = ‘‘ + qty.toLocaleString() + ‘‘ +
‘$’ + price.toFixed(2) + ‘‘;
card.addEventListener(‘click’, function () {
document.querySelectorAll(‘.gdm-qty-card’).forEach(function (c) { c.classList.remove(‘gdm-selected’); });
card.classList.add(‘gdm-selected’);
selectedQty = qty;
updateSummary();
});
gridEl.appendChild(card);
});
selectedQty = null;
updateSummary();
}

function updateSummary() {
if (!selectedRow || !selectedQty) {
summaryEl.hidden = true;
hidPrice.value = ”; hidQty.value = ”; hidSku.value = ”; hidSpec.value = ”;
return;
}
var total = selectedRow.prices[selectedQty];
priceTotalEl.textContent = ‘$’ + total.toFixed(2);
summaryEl.hidden = false;

hidPrice.value = total.toFixed(2);
hidQty.value = selectedQty;
hidSku.value = selectedRow.sku_base + ‘-‘ + selectedQty;

var specParts = [cardTypeEl.value];
FIELD_ORDER.forEach(function (f) {
var v = selectedRow[f];
if (v) specParts.push(v);
});
hidSpec.value = specParts.join(‘ / ‘);

var wcPriceEl = document.querySelector(‘.summary .price .woocommerce-Price-amount, .summary .price ins .woocommerce-Price-amount’);
if (wcPriceEl) wcPriceEl.innerHTML = ‘$’ + total.toFixed(2);
}

cardTypeEl.addEventListener(‘change’, function () {
currentData = MASTER[cardTypeEl.value] || [];
selections = {};
renderFrom(0);
});
notesEl.addEventListener(‘input’, function () { hidNotes.value = notesEl.value; });

// Populate the Card Type dropdown (Standard first, then alphabetical)
var types = Object.keys(MASTER);
types.sort(function (a, b) {
if (a === ‘Standard’) return -1;
if (b === ‘Standard’) return 1;
return a.localeCompare(b);
});
types.forEach(function (t) {
var o = document.createElement(‘option’);
o.value = t; o.textContent = t + ‘ Business Cards’;
cardTypeEl.appendChild(o);
});

//, Locked single-line mode: this page is dedicated to one card type,
// so the Card Type field is hidden and auto-selected on load instead of
// requiring the shopper to pick it. Same tested cascade code underneath.
if (types.length === 1) {
cardTypeEl.value = types[0];
var ctRow = document.getElementById(‘gdm-cardtype-row’);
if (ctRow) ctRow.style.display = ‘none’;
cardTypeEl.dispatchEvent(new Event(‘change’));
}
})();