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

Question

我正在使用 shopify 并希望在变体选择器下拉列表中显示变体价格。 Shopify 使用名为 option_selection.js 的 Assets 实现变体选择功能。该 Assets 对于网站的正常运营是必要的；但是，此 Assets 会覆盖在 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 - how to modify?

shopify 论坛上的这个问题与这里的问题非常相似，没有解决方案(或解决方案不足):Display variant pricing in dropdown box

这是 shopify 论坛上的另一个问题，要求使用大量代码转储但没有答案:Variant Price not showing in drop down

这是 shopify 论坛上的另一个问题，要求提供相同的答案，但这里没有建议，但由于多种原因是不充分的:Show variant and the PRICE on the drop down selector

这是 shopify 论坛上的另一个问题，要求与作者对 option_selection.js 进行初步挖掘的相同问题。文件但从未收到答复:Having prices next to variant options drop down

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 的新 Assets 中。和扩展名 .js .接下来将源代码(使用代码美化器将使其更容易使用)粘贴到新创建的 Assets 中。然后您只需通过替换 shopify_asset 将 shopify Assets 标签更改为常规 Assets 标签与 asset .

在新 Assets 中找到以下代码段:

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));

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

接下来找到以下代码段:

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
}

然后用以下代码段替换该代码段:

Shopify.SingleOptionSelector = function(o, i, t, e, texts) {
    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 = texts[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
}

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

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