Question

使用Shopify中的首次亮相主题，我有一款产品具有不兼容的变体。目前，它们显示为不可用，但我想完全隐藏它们，以便仅显示有效的选项。例如，如果我有红色，蓝色，绿色的鞋子并且尺码为9,10,11。但是只能得到10号的红色鞋子。我不想看到9或11的选项。

在线有人指向theme.js和下面的代码，但是我不确定要更改什么。

谢谢

$(this.singleOptionSelector, this.$container).on(
  'change',
  this._onSelectChange.bind(this)
);

}

Answer 1

我整天都花了很多时间，并提出了以下建议，这些建议在我正在开发的网站上似乎工作得很好。

我想出的答案涉及到编辑assets / theme.js文件。目前，下面的代码通过与可用的变体组合进行检查来禁用与选择选项无关的选择，但是您可以轻松地将以下内容隐藏起来，然后使用CSS进行显示。

assets / theme.js

下面的_hideUnavailableOptions方法需要添加到Variants.prototype对象中。

然后您需要从两个不同的地方调用该方法，如下所示。

_hideUnavailableOptions: function() {
  const option1 = document.getElementById("SingleOptionSelector-0");
  const option2 = document.getElementById("SingleOptionSelector-1");
if (option2) {
  const secondOptions = option2.options;      
  const variants = this.product.variants;
  let possibles = [];
  variants.forEach((variant) => {
    if (variant.options.includes(option1.value)) {
    possibles.push(variant.options)
  }
 })
 for (let option of secondOptions) {
    const value = option.value;
    let flag = false;
    possibles.forEach((possible) => {
     if (possible.includes(value)) {
     flag = true;
    }
  })
  if (flag === false) {
    option.removeAttribute('selected');
    option.setAttribute('disabled', 'disabled');
  } else {
   option.removeAttribute('disabled');
  }
 } option2.querySelector(':not([disabled="disabled"])').setAttribute('selected', 'selected');
 }
},

调用方法如下：

function Variants(options) {

  //stuff before this, then...

  this.enableHistoryState = options.enableHistoryState;
  this._hideUnavailableOptions();  //N.B. this MUST be before the next line
  this.currentVariant = this._getVariantFromOptions(); 
}

...然后再次从Variants.prototype._onSelectChange（）中调用该方法-确保它是其中的第一行...

_onSelectChange: function() {
    let hideUnavailable = this._hideUnavailableOptions(); //N.B. this MUST be before the next line
    var variant = this._getVariantFromOptions();

    //lots more stuff follows...
}

Shopify隐藏不可用的选项变体

1 个答案: