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

我正在构建一个定制的“订阅生成器”，客户在其中选择选项，继续下一步，最后单击“签出”；他们的选择反映在所选的变体中

我的方法是隐藏shopify的选择器，并使用$（）.val（）手动设置它们；这会准确地更改选择器（检入检查器），但由于某些原因，Shopify无法识别这些更改，因此添加到购物车中的产品是默认的。我显然错过了什么——这可能吗

[因无用而编辑的代码]

谢谢大家!

基本上

Shopify的option_selection.js控制着这一点，并有一个“产品”和“选项选择器”对象

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

在您的product_form.liquid中，您将看到一个不使用新选项选择器（args）的地方。您只需保存它返回的内容，即

selector = new OptionSelector(...); 

那你就可以了

selector.selectVariant("123456789", selector); 

这将正确设置签出按钮的变量。然后，您可以使用css/js隐藏“shopify”选择器，或者保留它们，或者通过从下载来修改选项_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是一种更稳健的方法

基本上

Shopify的option_selection.js控制着这一点，并有一个“产品”和“选项选择器”对象

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

在您的product_form.liquid中，您将看到一个不使用新选项选择器（args）的地方。您只需保存它返回的内容，即

selector = new OptionSelector(...); 

那你就可以了

selector.selectVariant("123456789", selector); 

这将正确设置签出按钮的变量。然后，您可以使用css/js隐藏“shopify”选择器，或者保留它们，或者通过从下载来修改选项_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是一种更稳健的方法

你能在这里发布页面代码吗？Shopify最有可能向服务器发送数据并获得回复。您还必须编辑后端代码。虽然它不发送请求或任何东西，但它确实使用javascript来构造“产品表单”。我发布了一个答案，详细说明了如何执行。使用原始代码，

$（element）.val（newValue）.trigger（'change'）

还应该触发正确更新所有内容所需的所有代码，但您找到的解决方案更好地利用了Shopify的功能。：）哦，太棒了！谢谢-我甚至没想过用这个。现在，我有了健壮的变体id查找器，它通过这种方式更加健壮！你能在这里发布页面代码吗？Shopify最有可能向服务器发送数据并获得回复。您还必须编辑后端代码。虽然它不发送请求或任何东西，但它确实使用javascript来构造“产品表单”。我发布了一个答案，详细说明了如何执行。使用原始代码，

$（element）.val（newValue）.trigger（'change'）

还应该触发正确更新所有内容所需的所有代码，但您找到的解决方案更好地利用了Shopify的功能。：）哦，太棒了！谢谢-我甚至没想过用这个。现在，我有了健壮的变体id查找器，它通过这种方式更加健壮！