← back to Designer Wallcoverings
PDP: wire REQUEST SAMPLE (add Sample variant to cart) + SPEC SHEET + variant selection (active/id/price); unify black pills (round variant buttons, equal font+height)
7f21a275ca31d5343744484ec9c2c7ad10316485 · 2026-06-22 14:51:08 -0700 · Steve Abrams
Files touched
M shopify/theme-moq/sections-product.FIXED.liquid
Diff
commit 7f21a275ca31d5343744484ec9c2c7ad10316485
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 22 14:51:08 2026 -0700
PDP: wire REQUEST SAMPLE (add Sample variant to cart) + SPEC SHEET + variant selection (active/id/price); unify black pills (round variant buttons, equal font+height)
---
shopify/theme-moq/sections-product.FIXED.liquid | 77 +++++++++++++++++++++++--
1 file changed, 72 insertions(+), 5 deletions(-)
diff --git a/shopify/theme-moq/sections-product.FIXED.liquid b/shopify/theme-moq/sections-product.FIXED.liquid
index b5db0a4e..18521f34 100644
--- a/shopify/theme-moq/sections-product.FIXED.liquid
+++ b/shopify/theme-moq/sections-product.FIXED.liquid
@@ -50,7 +50,7 @@
{%- assign _vt = variant.title | downcase -%}
{%- assign _is_sample = 0 -%}
{%- if _vt contains 'sample' -%}{%- assign _is_sample = 1 -%}{%- endif -%}
- <button type="button" class="variant-btn {% if variant == product.selected_or_first_available_variant %}active{% endif %}" data-variant-id="{{ variant.id }}" data-is-sample="{{ _is_sample }}">
+ <button type="button" class="variant-btn {% if variant == product.selected_or_first_available_variant %}active{% endif %}" data-variant-id="{{ variant.id }}" data-is-sample="{{ _is_sample }}" data-price="{{ variant.price | money }}">
{{ variant.title }}
</button>
{% endfor %}
@@ -87,9 +87,22 @@
</div>
<!-- Buttons -->
+ {%- liquid
+ # Spec-sheet source: first non-blank metafield wins (file or url types both render a URL via append)
+ assign spec_url = product.metafields.custom.spec_sheet | append: ''
+ if spec_url == blank
+ assign spec_url = product.metafields.custom.spec_sheet_url | append: ''
+ endif
+ if spec_url == blank
+ assign spec_url = product.metafields.custom.tearsheet | append: ''
+ endif
+ if spec_url == blank
+ assign spec_url = product.metafields.global.spec_sheet | append: ''
+ endif
+ -%}
<div class="form-actions">
- <button type="button" class="btn btn-secondary">REQUEST SAMPLE</button>
- <button type="button" class="btn btn-secondary">SPEC SHEET</button>
+ <button type="button" class="btn btn-secondary" id="request-sample-btn">REQUEST SAMPLE</button>
+ <button type="button" class="btn btn-secondary" id="spec-sheet-btn"{% if spec_url != blank %} data-spec-url="{{ spec_url }}"{% endif %} data-vendor="{{ product.vendor | escape }}" data-sku="{{ product.selected_or_first_available_variant.sku | escape }}">SPEC SHEET</button>
</div>
<button type="submit" class="btn btn-primary" id="add-to-cart">ADD TO CART</button>
@@ -237,12 +250,16 @@
.variant-btn {
padding: 1rem;
border: 2px solid #333;
+ border-radius: 50px;
background: white;
color: #333;
+ font-family: inherit;
font-weight: 600;
+ font-size: 0.875rem;
+ line-height: 1;
+ text-align: center;
cursor: pointer;
transition: all 0.2s;
- font-size: 0.875rem;
}
.variant-btn.active {
@@ -283,10 +300,13 @@
.btn {
padding: 1rem;
- border: none;
+ border: 2px solid transparent;
border-radius: 50px;
+ font-family: inherit;
font-weight: 600;
font-size: 0.875rem;
+ line-height: 1;
+ text-align: center;
cursor: pointer;
transition: all 0.2s;
}
@@ -410,4 +430,51 @@
var form = document.getElementById('product-form');
if(form){ form.addEventListener('submit', clamp, true); }
})();
+
+/* DW PDP 2026-06-22: variant selection + REQUEST SAMPLE + SPEC SHEET wiring
+ (the form previously had NO handler for these — buttons were inert and the
+ hidden variant id never updated on size switch). */
+(function(){
+ var form = document.getElementById('product-form');
+ if(!form) return;
+ var idInput = form.querySelector('input[name="id"]');
+ var qty = form.querySelector('.qty-input');
+ var priceEl = document.querySelector('.product-meta .price');
+ var variantBtns = document.querySelectorAll('.variant-btn');
+
+ // Variant selection: set active state, sync hidden id + displayed price
+ Array.prototype.forEach.call(variantBtns, function(btn){
+ btn.addEventListener('click', function(){
+ Array.prototype.forEach.call(variantBtns, function(b){ b.classList.remove('active'); });
+ btn.classList.add('active');
+ if(idInput){ idInput.value = btn.getAttribute('data-variant-id'); }
+ var p = btn.getAttribute('data-price');
+ if(p && priceEl){ priceEl.innerHTML = '<strong>PRICE:</strong> ' + p; }
+ });
+ });
+
+ // REQUEST SAMPLE: select the Sample variant then add to cart
+ var sampleBtn = document.getElementById('request-sample-btn');
+ if(sampleBtn){
+ sampleBtn.addEventListener('click', function(){
+ var sv = document.querySelector('.variant-btn[data-is-sample="1"]');
+ if(!sv){ alert('No sample is available for this item.'); return; }
+ if(idInput){ idInput.value = sv.getAttribute('data-variant-id'); }
+ if(qty){ qty.value = 1; }
+ form.submit();
+ });
+ }
+
+ // SPEC SHEET: open the product spec PDF (metafield) if present, else search the vendor's spec
+ var specBtn = document.getElementById('spec-sheet-btn');
+ if(specBtn){
+ specBtn.addEventListener('click', function(){
+ var url = specBtn.getAttribute('data-spec-url');
+ if(url){ window.open(url, '_blank', 'noopener'); return; }
+ var vendor = specBtn.getAttribute('data-vendor') || '';
+ var sku = specBtn.getAttribute('data-sku') || '';
+ window.open('https://www.google.com/search?q=' + encodeURIComponent(vendor + ' ' + sku + ' spec sheet pdf'), '_blank', 'noopener');
+ });
+ }
+})();
</script>
← d9ff0a7c Add bucketB-land-175 one-shot lander (DW_ROLL_CAP=175, 00:01
·
back to Designer Wallcoverings
·
Add Coordonné full-page re-scrape runner (WooCommerce Store d0f585b8 →