Ruby Shopify隐藏不可用选项变体

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

网上有人指出了theme.js和下面的代码，但我不确定要更改什么

谢谢

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

---

}

我花了一天的大部分时间在这上面，并提出了以下建议，在我正在开发的网站上似乎效果不错

我的答案是编辑assets/theme.js文件。目前，下面的代码通过对照可用的变量组合检查，禁用了与之无关的选择选项，但您可以轻松地调整下面的代码以隐藏它们，然后用CSS显示它们

资产/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...
}

---

我花了一天的大部分时间在这上面，并提出了以下建议，在我正在开发的网站上，这些建议似乎很有效

我的答案是编辑assets/theme.js文件。目前，下面的代码通过对照可用的变量组合检查，禁用了与之无关的选择选项，但您可以轻松地调整下面的代码以隐藏它们，然后用CSS显示它们

资产/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...
}

---

我认为这不仅仅是一个js问题，而是一个流质代码，您可能需要更改产品模板中的流质代码。但这样的改变将是相当复杂的，因为如果Blue的尺寸是9,11，我相信你仍然会看到选项9,11，RedI认为这是一个流动代码而不是js问题，你可能想在产品模板中改变流动代码。但这样的改变将是相当复杂的，因为如果蓝色有9号，11号，我相信你仍然会看到选项9号，11号和红色