Javascript 如何在保留选项_selection.js的同时在variant select下拉列表中包含variant price

我正在使用shopify，希望在变体选择器下拉列表中显示变体价格。Shopify使用名为

option_selection.js

的资产来实现变体选择功能。该资产是现场正常运行所必需的；但是，此资源将覆盖在

product.liquid

文件中创建的select标记

如果不包括

option\u selection.js

，您只需将变量价格添加到

product.liquid

文件中的每个选项中即可。大概是这样的：

{product.variants%中的变量为%0}
{{variant.title | escape}-{{variant.price | money}{%if variant.available==false%}-无股票{%endif%}
{%endfor%}

但是，如果启用了

option_selection.js

，则此选择下拉列表将替换为仅包含变体标题而不包含其他信息的其他下拉列表

经过一些尝试和错误，我发现我可以用下面的代码片段在直接放在

option\u selection.js

脚本标记后面的脚本标记中覆盖

Shopify.Product.prototype.optionValues

：

Shopify.Product.prototype.optionValues=函数（o）{
如果（！Shopify.isDefined（this.variants））返回null；
var t=Shopify.map（this.variants，函数（t）{
var e=“期权”+（o+1）；
if（t[e]==未定义）{
返回空
}否则{
var值=t[e]+“-”+Shopify.formatMoney（t.price）
如果（！t.available）值+=“-无库存”
返回值
}
});
返回null==t[0]？null:Shopify.uniq（t）
}

该代码段将覆盖以下代码段：

Shopify.Product.prototype.optionValues=函数（o）{
如果（！Shopify.isDefined（this.variants））返回null；
var t=Shopify.map（this.variants，函数（t）{
var e=“期权”+（o+1）；
返回t[e]==未定义？null:t[e]
});
返回null==t[0]？null:Shopify.uniq（t）
}

但是，这会导致

option_selection.js

中实现的其余功能完全停止工作。我不明白为什么这个更改会影响脚本的其余部分，但确实如此

要对此进行测试，您可以创建一个包含两个变体的项目，一个可用，一个不可用。选择可用项目应启用“添加到购物车”按钮，而选择不可用选项应禁用该按钮。这是由

option\u selection.js

实现的许多功能之一，一旦尝试实施此修复，这些功能就会失败

在保留选项_selection.js及其功能的同时，如何将变体价格包含在变体选择下拉列表中？

---

• 本问题涉及但不重复：
• shopify论坛上的这个问题与这里的问题非常相似，没有解决方案（或解决方案不足）：
• 这是shopify论坛上的另一个问题，同样的问题是大量代码转储而没有答案：
• 这是shopify论坛上的另一个问题，要求回答相同的问题，这里没有给出答案，但由于一些原因，答案不充分：
• 这是shopify论坛上的另一个问题，作者对

  option_selection.js

  文件做了一些初步的挖掘，但从未得到答案：

---

第二个尝试解决方案的问题出现在

option\u selection.js

中的以下片段中：

Shopify.SingleOptionSelector=函数（o、i、t、e）{
this.multiSelector=o，this.values=e，this.index=i，this.name=t，this.element=document.createElement（“选择”）；
对于（var r=0；r

在此代码段中，

.innerHTML

属性设置为与值相同。实际上，您不想更改该值，只想更改innerHTML。为了达到这个效果，我们必须在

option\u selection.js

中再做一些更改

复制shopify的

选项_selection.js

并制作我们自己的更容易。要实现这一点，您可以读取生成的页面源以查找脚本URL，然后使用文件名

选项\u选择

和扩展名

.js

将源复制到新资源。接下来，将源代码粘贴到新创建的资产中（使用代码美化器将使其更易于使用）。然后，您只需将shopify资产标签更改为常规资产标签，方法是将

shopify_资产

替换为

asset

在新资源中查找以下代码段：

Shopify.Product.prototype.optionValues=函数（o）{
如果（！Shopify.isDefined（this.variants））返回null；
var t=Shopify.map（this.variants，函数（t）{
var e=“期权”+（o+1）；
返回t[e]==未定义？null:t[e]
});
返回null==t[0]？null:Shopify.uniq（t）
}

然后在该代码段之后添加以下代码段：

Shopify.Product.prototype.optionTexts=函数（o）{
如果（！Shopify.isDefined（this.variants））返回null；
var t=Shopify.map（this.variants，函数（t）{
var e=“期权”+（o+1）；
if（t[e]==未定义）{
返回空
}否则{
var值=t[e]+“-”+Shopify.formatMoney（t.price）
如果（！t.available）值+=“-无库存”
返回值
}
});
返回n
var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t), this.product.optionTexts(t));