如何使用SnipCart创建分层自定义属性选择框？

我完全懂你不想把同一件艺术品拆成多个产品列表的痛点——针对你销售艺术品的场景，我们可以通过改造Snipcart的自定义属性逻辑，实现格式选择联动尺寸和价格的双层动态下拉框，完美替代拆分产品的方案。

核心实现思路 #

• 先创建第一个下拉框（格式选择：Print/Framed/Canvas），第二个下拉框（尺寸）初始为空
• 用一个映射对象存储每种格式对应的尺寸选项和对应价格
• 监听格式选择的变化，动态更新第二个下拉框的选项，同时同步修改Add to Cart按钮的价格和自定义属性参数
• 处理页面初始化状态，确保加载完成后就有默认的格式和尺寸选项

完整代码示例 #

<!-- 格式选择下拉框 -->
<label>Art Format</label>
<select id="art-format">
  <option value="Print">Print</option>
  <option value="Framed">Framed</option>
  <option value="Canvas">Canvas</option>
</select>

<!-- 尺寸选择下拉框（初始为空） -->
<label>Size</label>
<select id="art-size"></select>

<!-- Snipcart 添加购物车按钮 -->
<button id="starry-night" class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="49.99" <!-- 默认价格（对应Print的Small尺寸） -->
  data-item-url="/paintings/starry-night"
  data-item-description="High-quality replica of The Starry Night by Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night"
  data-item-custom1-name="Art Format"
  data-item-custom1-options="Print|Framed|Canvas"
  data-item-custom2-name="Size">
  Add to Cart
</button>

<script>
// 定义格式与尺寸、价格的映射关系，方便后续维护
const formatSizeMap = {
  Print: [
    { label: "Small (12x16)", price: 49.99 },
    { label: "Medium (18x24)", price: 69.99 },
    { label: "Large (24x32)", price: 89.99 }
  ],
  Framed: [
    { label: "Small (16x20)", price: 79.99 },
    { label: "Medium (22x28)", price: 99.99 },
    { label: "Large (28x36)", price: 129.99 }
  ],
  Canvas: [
    { label: "Small (12x16)", price: 99.99 },
    { label: "Medium (18x24)", price: 149.99 },
    { label: "Large (24x32)", price: 199.99 }
  ]
};

// 获取DOM元素
const formatSelect = document.querySelector('#art-format');
const sizeSelect = document.querySelector('#art-size');
const addToCartBtn = document.querySelector('#starry-night');

// 初始化尺寸下拉框和默认值
function updateSizeOptions(selectedFormat) {
  // 清空现有尺寸选项
  sizeSelect.innerHTML = '';
  // 获取当前格式对应的尺寸列表
  const sizes = formatSizeMap[selectedFormat];
  // 生成新的尺寸选项
  sizes.forEach(size => {
    const option = document.createElement('option');
    option.value = size.label;
    option.textContent = `${size.label} - $${size.price.toFixed(2)}`;
    sizeSelect.appendChild(option);
  });
  
  // 更新Snipcart的自定义属性选项和默认价格
  addToCartBtn.setAttribute('data-item-custom2-options', sizes.map(s => s.label).join('|'));
  addToCartBtn.setAttribute('data-item-price', sizes[0].price);
  
  // 设置默认的尺寸值
  addToCartBtn.setAttribute('data-item-custom2-value', sizes[0].label);
}

// 监听格式选择变化
formatSelect.addEventListener('change', () => {
  const selectedFormat = formatSelect.value;
  // 更新尺寸选项
  updateSizeOptions(selectedFormat);
  // 更新格式的自定义属性值
  addToCartBtn.setAttribute('data-item-custom1-value', selectedFormat);
});

// 监听尺寸选择变化，更新价格
sizeSelect.addEventListener('change', () => {
  const selectedFormat = formatSelect.value;
  const selectedSizeLabel = sizeSelect.value;
  // 找到对应尺寸的价格
  const selectedSize = formatSizeMap[selectedFormat].find(s => s.label === selectedSizeLabel);
  if (selectedSize) {
    addToCartBtn.setAttribute('data-item-price', selectedSize.price);
    addToCartBtn.setAttribute('data-item-custom2-value', selectedSizeLabel);
  }
});

// 页面加载完成后初始化默认值
document.addEventListener('DOMContentLoaded', () => {
  const defaultFormat = formatSelect.value;
  updateSizeOptions(defaultFormat);
  addToCartBtn.setAttribute('data-item-custom1-value', defaultFormat);
});
</script>

关键细节说明 #

• 映射对象formatSizeMap：把每种格式对应的尺寸和价格集中管理，后续新增格式、调整价格或尺寸时，只需要修改这个对象，不用改其他逻辑，非常易维护
• 动态更新data-item-custom2-options：Snipcart会读取这个属性来生成购物车中的尺寸选项，所以每次切换格式时都要更新它
• 实时同步价格：选中不同尺寸时，立刻修改按钮的data-item-price，确保添加到购物车的价格是正确的
• 初始化处理：页面加载完成后自动设置默认的格式和尺寸，避免用户看到空的尺寸下拉框

内容的提问来源于stack exchange，提问作者Dustyn Altimus