javascript - 通过 javascript 设置 Shopify 选项选择器/更改所选变体的值

Question

我正在构建一个自定义的“订阅构建器”，客户可以在其中选择选项，继续下一步，最后单击结账；他们的选择反射(reflect)在所选的变体中。

我解决这个问题的方法是隐藏shopify的选择器并使用$().val();手动设置它们;这准确地更改了选择器(在检查器中检查)，但 Shopify 由于某种原因无法识别这些更改，因此添加到购物车的产品是默认产品。我显然错过了一些东西 - 这可能吗？

[代码因无用而被编辑]

谢谢!

Answer 1

基本上，

Shopify 的 option_selection.js 对此进行控制，并具有“Product”和“OptionSelector”对象。

OptionSelector 有一个函数 selectVariant(id, 选择器)，如果您有完整的变体标识符，它将正确设置它。

在你的product_form.liquid中你会看到一个执行new OptionSelector(args)的地方。您只需保存它返回的内容，即

selector = new OptionSelector(...); 

那么你可以这样做

selector.selectVariant("123456789", selector); 

这将正确设置结账按钮的变体。然后，您可以使用 css/js 隐藏“shopify”选择器，或者保留它们，或者通过从 here 下载来自行修改 option_selection.js 代码。

此外，我还发现了更多有用的事情:

selector.selectors[index].element.value {get; set;} //much cleaner method of accessing selector elements 
selector.product.getVariant(selector.selectedValues()).id // gets the variant id for you so you do not need to hardcore them in

编辑:戴夫善意地指出

$(element).val(newValue).trigger('change'); 

本来可以完成我想要的，但指出(并且我同意)使用 OptionSelector 是一种更强大的方法。