如何在保留option_selection.js的同时在变体选择下拉列表中包含变体价格

Question

我正在使用 shopify 并希望在变体选择器下拉列表中显示变体价格。Shopify 使用命名资产option_selection.js来实现变体选择功能。该资产是站点正常运行所必需的；但是，此资产会覆盖在product.liquid文件中创建的选择标记。

如果不option_selection.js包含，您可以简单地将变体价格添加到product.liquid文件中的每个选项。像这样的东西：

<div class="variants-wrapper clearfix {% if product.variants.size == 1 %}visuallyhidden{% endif %}"> 
    <select id="product-select" name="id">
        {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}{% if variant.available == false %} - No Stock{% endif %}</option>
        {% endfor %}
    </select>
</div>

但是，option_selection.js启用后，此选择下拉列表将替换为另一个仅包含变体标题而没有其他信息的下拉列表。

经过一些试验和错误，我发现我可以使用以下代码段Shopify.Product.prototype.optionValues在直接放置在option_selection.js脚本标签之后的脚本标签中覆盖：

Shopify.Product.prototype.optionValues = function(o) {
  if (!Shopify.isDefined(this.variants)) return null;
  var t = Shopify.map(this.variants, function(t) {
    var e = "option" + (o + 1);
    if(t[e] == undefined) {
      return null
    } else {
      var value = t[e] + " - " + Shopify.formatMoney(t.price)
      if(!t.available) value += " - No Stock"
      return value
    }
  });
  return null == t[0] ? null : Shopify.uniq(t)
}

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

Shopify.Product.prototype.optionValues = function(o) {
    if (!Shopify.isDefined(this.variants)) return null;
    var t = Shopify.map(this.variants, function(t) {
        var e = "option" + (o + 1);
        return t[e] == undefined ? null : t[e]
    });
    return null == t[0] ? null : Shopify.uniq(t)
}

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

要对此进行测试，您可以创建具有两种变体的商品，一种可用，一种不可用。选择可用项目应启用“添加到购物车”按钮，而选择不可用选项应禁用该按钮。这是实施option_selection.js此尝试修复后失败的众多功能之一。

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

---

• 此问题与以下内容相关但不重复：Shopify option_selection.js - 如何修改？
• shopify 论坛上的这个问题与这里的问题非常相似，没有解决方案（或分辨率不足）：在下拉框中显示变体定价
• 这是shopify 论坛上的另一个问题，要求使用大量代码转储但没有答案：变体价格未显示在下拉列表中
• 这是shopify 论坛上的另一个问题，要求同样的问题，但此处不建议给出相同的答案，但由于多种原因而不足：在下拉选择器上显示变体和价格
• 这是shopify 论坛上的另一个问题，要求作者对option_selection.js文件进行一些初步挖掘但从未收到答案：变体选项旁边的价格下降

Answer 1

事实证明，第二个尝试的解决方案的问题在于以下代码片段option_selection.js：

Shopify.SingleOptionSelector = function(o, i, t, e) {
    this.multiSelector = o, this.values = e, this.index = i, this.name = t, this.element = document.createElement("select");
    for (var r = 0; r < e.length; r++) {
        var n = document.createElement("option");
        n.value = e[r], n.innerHTML = e[r], this.element.appendChild(n)
    }
    return this.element.setAttribute("class", this.multiSelector.selectorClass), this.element.setAttribute("data-option", "option" + (i + 1)), this.element.id = o.domIdPrefix + "-option-" + i, this.element.onchange = function(t, e) {
        e = e || {}, o.updateSelectors(i, e)
    }, !0
}

在此代码片段中，.innerHTML属性设置为与值相同。您实际上不想更改该值，您只想更改innerHTML。为了达到这个效果，我们还需要改变一些东西option_selection.js。

复制 Shopify 的副本option_selection.js并制作我们自己的副本会更容易。要实现此目的，您可以读取生成的页面源代码以查找脚本 URL，然后将源代码复制到文件名option_selection和扩展名为的新资源中.js。接下来将源代码（使用代码美化器将使其更容易使用）粘贴到新创建的资产中。然后，您只需将 shopify 资产标签替换为常规资产标签shopify_asset即可asset。

在新资产中找到以下代码片段：

Shopify.Product.prototype.optionValues = function(o) {
    if (!Shopify.isDefined(this.variants)) return null;
    var t = Shopify.map(this.variants, function(t) {
        var e = "option" + (o + 1);
        return t[e] == undefined ? null : t[e]
    });
    return null == t[0] ? null : Shopify.uniq(t)
}

然后在该片段后面添加以下片段：

Shopify.Product.prototype.optionTexts = function(o) {
  if (!Shopify.isDefined(this.variants)) return null;
  var t = Shopify.map(this.variants, function(t) {
    var e = "option" + (o + 1);
    if(t[e] == undefined) {
      return null
    } else {
      var value = t[e] + " - " + Shopify.formatMoney(t.price)
      if(!t.available) value += " - No Stock"
      return value
    }
  });
  return null == t[0] ? null : Shopify.uniq(t)
}

请注意，此函数有一个新名称 ，.optionTexts因为此函数只会创建要插入到选项标记内的文本。

接下来找到以下行：

var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t));

然后将该行替换为以下行：

var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t), this.product.optionTexts(t));

在这里，我们调用新创建的文本函数并将结果与​​原始值函数一起传递。

接下来找到以下片段：

var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t), this.product.optionTexts(t));

然后将该片段替换为以下片段：

Shopify.SingleOptionSelector = function(o, i, t, e) {
    this.multiSelector = o, this.values = e, this.index = i, this.name = t, this.element = document.createElement("select");
    for (var r = 0; r < e.length; r++) {
        var n = document.createElement("option");
        n.value = e[r], n.innerHTML = e[r], this.element.appendChild(n)
    }
    return this.element.setAttribute("class", this.multiSelector.selectorClass), this.element.setAttribute("data-option", "option" + (i + 1)), this.element.id = o.domIdPrefix + "-option-" + i, this.element.onchange = function(t, e) {
        e = e || {}, o.updateSelectors(i, e)
    }, !0
}

在这里，我们接受先前传递的要插入选项标签中的文本列表，并插入该列表而不是值列表。

这样，值保持不变，文本将更改为您想要的任何内容。