时间戳

首页 > 解决方案 > 如果未选择特定产品，请防止单击“添加到购物车”按钮 - Shopify

shopify - 如果未选择特定产品，请防止单击“添加到购物车”按钮 - Shopify

问题描述

嗨，专家们度过了愉快的一天，我在 Shopify 上有一个项目，当我在某些条件下选择特定产品时，我正在努力解决如何预防和发出警报。

我制作了一个产品模板，将集合 A 中的产品列表填充为第一组选择，将集合 B 填充为第二组选择。

这是一个产品页面，我可以从集合 A 中选择 1 个产品，也可以从集合 B 中选择 1 个产品（每个产品都有添加到购物车按钮）

条件是集合 A 需要从集合 B 中添加至少 1 个产品，而集合 B 不需要从集合 A 中添加产品。

这是我不想实现的：当单击集合 A 中的任一产品按钮时，它会发出警报，例如“需要从集合 B 中选择至少 1 个产品”

我将 cart.js 用于产品模板中的多个产品。这可能吗？还是有最简单的方法来实现这个？

谢谢

标签： shopify

解决方案

我无法谈论 的内部工作原理cart.js，但是您所要求的应该使用常规 Javascript 相当简单。

听起来你想做的是：

  • 提交表格 A；
  • 选择表格 B；
  • 检查表格 B 是否选择了变体；
  • 如果表单 B 中没有变体，则阻止添加到购物车操作

如果cart.js有一种简单的方法来插入验证函数，那么我将在其中插入代码。否则，我会将验证功能添加到表单提交或单击提交按钮，以更方便的方式cart.js发挥作用。

示例验证函数如下所示：

function validateFormA(evt){
  var formB = document.forms('product-form-b'); // document.forms can access any form on the page using the appropriate ID attribute

  if(!form){
    // Couldn't find form, should this pass or fail?
    return;
  }

  var variantIdField = form.id;  // To access the form control with the name 'id'
  var value = variantIdField.value;
  if(!value){
    evt.preventDefault();
    return false;
  }
  return true;
}

推荐阅读