如何在Shopify购物车页面添加支持折扣组合的折扣输入框

直接用/discount/YOUR_CODE的表单提交折扣码，Shopify默认是替换已应用的折扣而非叠加，这就是你遇到问题的根源。要实现多折扣码叠加（前提是你的折扣规则本身支持组合），得改用Shopify的Cart AJAX API来处理，具体方案如下：

替换原有折扣表单 #

把你之前的表单换成下面的结构，更灵活可控：

<div class="discount-input-group">
  <input type="text" id="discount-code-input" placeholder="输入折扣码">
  <button id="apply-discount-btn">应用折扣</button>
  <div id="discount-feedback" class="discount-feedback"></div>
</div>

添加JavaScript处理逻辑 #

用AJAX调用Shopify的折扣添加接口，实现叠加而非替换：

document.getElementById('apply-discount-btn').addEventListener('click', function() {
  const code = document.getElementById('discount-code-input').value.trim();
  if (!code) return;

  fetch('/cart/add_discount.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({ discount: code })
  })
  .then(res => res.json())
  .then(data => {
    const feedbackEl = document.getElementById('discount-feedback');
    if (data.status === 'success') {
      feedbackEl.textContent = `折扣码「${code}」已成功应用！`;
      feedbackEl.style.color = '#2ecc71';
      // 可选：局部刷新购物车区域，不用整页重载
      fetch('/cart.js')
        .then(res => res.json())
        .then(cart => {
          // 这里更新页面上的购物车总价、折扣金额等元素
          document.querySelector('.cart-total').textContent = cart.total_price;
        });
    } else {
      feedbackEl.textContent = data.message || '这个折扣码无法使用，请检查后重试';
      feedbackEl.style.color = '#e74c3c';
    }
  })
  .catch(err => {
    document.getElementById('discount-feedback').textContent = '网络出错了，请稍后再试';
  });
});

核心说明 #

• cart/add_discount.js这个端点是Shopify专门用来叠加折扣的，只要你的折扣规则允许组合（比如一个百分比折扣+一个固定金额折扣），就能成功叠加；如果折扣本身不能组合，API会返回明确的错误提示。
• 相比直接跳转/discount/路径，这种AJAX方式不会刷新整个页面，体验更好，还能实时给用户反馈。

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