Shopify「Add Sample」按钮功能实现咨询：用应用还是需定制开发？

一、可尝试的第三方应用 #

你之前排查过不少应用，但可以重点试试这几个专注自定义加购动作的工具：

• Bold Product Options：支持创建自定义按钮，直接绑定指定变体的1件加购动作，无需复杂配置，适配多数主题
• Product Customizer：能添加触发特定加购规则的按钮，可精准设置变体ID和固定数量（1件）
• Buttonizer：可视化自定义按钮，关联购物车加购API，适合不想编写代码的场景
  提示：安装前先试用，确认能否精准匹配「选中变体+1件加购」的需求，避免浪费时间

二、硬编码定制方案（无合适应用时的可靠选择） #

如果上述应用都不符合预期，硬编码是最灵活的解决方案，步骤如下：

1. 在产品模板中添加按钮 #

找到主题的产品模板文件（通常是product.liquid或sections/product-template.liquid），在变体选择区附近插入按钮代码：

<button class="add-sample-btn" data-variant-id="{{ selected_variant.id }}">Add Sample</button>

2. 编写JavaScript实现加购逻辑 #

在主题的theme.js或自定义JS文件中添加以下代码，实现点击按钮后将选中变体的1件商品加入购物车：

document.addEventListener('DOMContentLoaded', () => {
  // 绑定样本按钮点击事件
  document.querySelectorAll('.add-sample-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
      const variantId = this.dataset.variantId;
      try {
        const response = await fetch('/cart/add.js', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: JSON.stringify({ id: variantId, quantity: 1 })
        });
        const data = await response.json();
        // 加购成功后的提示或UI更新，可根据主题调整
        alert('样本已添加至购物车');
        // 调用主题自带的购物车更新方法（如果存在）
        typeof ShopifyAPI !== 'undefined' && ShopifyAPI.getCart();
      } catch (err) {
        console.error('加购失败:', err);
        alert('添加样本失败，请重试');
      }
    });
  });

  // 监听变体切换，同步更新按钮的变体ID
  const productSection = document.querySelector('[data-section-type="product"]');
  if (productSection) {
    productSection.addEventListener('change', e => {
      if (e.target.name === 'id') {
        document.querySelector('.add-sample-btn').dataset.variantId = e.target.value;
      }
    });
  }
});

3. 样式适配（可选） #

根据主题风格，给按钮添加CSS样式，让它和原有加购按钮视觉统一：

.add-sample-btn {
  background: #your-primary-color;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.add-sample-btn:hover {
  opacity: 0.9;
}

三、关键注意点 #

• 确保主题支持Shopify AJAX API（现代主题基本都兼容）
• 测试变体切换时，按钮的data-variant-id是否能同步更新
• 如果使用了第三方产品选项插件，可能需要调整JS逻辑来兼容变体选择逻辑

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