Shopify使用Prestige主题如何强制用户选择有效商品变体后加购结账

前置操作 #

• 进入Shopify后台，依次点击「在线商店」→「主题」→ 找到当前使用的Prestige主题，点击「操作」→「编辑代码」

第一步：添加变体校验JS逻辑 #

在「Assets」文件夹中找到product-form.js文件，在文件末尾直接追加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const productForm = document.querySelector('form.product-form');
  if(!productForm) return;
  const addToCartBtn = productForm.querySelector('[type="submit"]');
  // 页面加载完成后默认禁用加购按钮
  addToCartBtn.disabled = true;
  addToCartBtn.classList.add('disabled');

  // 监听变体选择器变化
  productForm.addEventListener('change', function() {
    const selectedVariantId = productForm.querySelector('[name="id"]').value;
    // 校验选中变体是否有效：默认提示选项对应的变体ID一般为空/非数字占位值
    if(selectedVariantId && !isNaN(selectedVariantId) && parseInt(selectedVariantId) > 0) {
      addToCartBtn.disabled = false;
      addToCartBtn.classList.remove('disabled');
    } else {
      addToCartBtn.disabled = true;
      addToCartBtn.classList.add('disabled');
    }
  });
});

第二步：添加禁用状态样式（可选） #

如果需要让按钮禁用状态更符合主题视觉，在「Assets」文件夹中找到theme.css或base.css文件，末尾追加以下样式：

.product-form [type="submit"].disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

适配说明 #

• 如果你设置的默认提示选项绑定了自定义占位变体ID，可调整上述JS代码中的判断规则，匹配你的占位ID即可
• 修改代码前建议先备份原文件，避免操作失误影响站点运行
• 保存后清空站点缓存即可测试：停留在默认提示选项时加购按钮无法点击，选择有效尺码等变体后按钮自动恢复可用

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