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

Question

我正在构建一个自定义＆＃34;订阅构建器＆＃34;客户选择选项，继续下一步，最后点击结账;他们的选项反映在所选的变体中。

我这样做的方法是隐藏shopify的选择器并使用$（）手动设置它们.val（）;这样可以准确地更改选择器（检查检查器），但Shopify由于某种原因无法识别这些更改，因此添加到购物车的产品是默认设置。我显然遗漏了一些东西 - 这甚至可能吗？

[无用的代码编辑]

谢谢！

Answer 1

基本上，

Shopify的option_selection.js控制它并具有“Product”和“OptionSelector”对象。

OptionSelector有一个函数selectVariant（id，selector），如果您拥有完整的变体标识符，它将正确设置它。

在你的product_form.liquid中，你会看到一个新的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更像是一种强大的方法。