Shopify - Debut 主题 - 根据选定的变体下拉选项显示和隐藏包含变体元字段的其他文本框

Question

正如标题所示，我希望更新我的 Shopify Debut 主题，以根据所选的变体下拉选项显示和隐藏包含变体元字段的附加文本框。

这是 HTML 选择下拉菜单：

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
    <option value="Option no 1" selected="selected">This is option 1</option>
    <option value="Option no 2">This is option 2</option>
    <option value="Option no 3">This is option 3</option>  
</select>

在 Shopify product.liquid 模板中，它看起来像这样 - 我已将 id="{{variant.id}}" 添加到选项中，但它没有在测试时填充它，我希望这是一种方法将选择选项和 div 匹配在一起。

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

然后我想根据产品的选定变量显示选定的产品变体元字段（option.description）。我目前正在使用以下代码（这是一个 shopify 液体参考）来提取所有准备显示和隐藏的变体元字段：

{% for variant in product.variants %}               
    <div class="variantoption" id="{{variant.id}}">
        {% if current_variant.id %}
        {{ variant.metafields.option.description }}
        {% else %}
        {% endif %}
        </div>
{% endfor %}  

我知道我需要在选择中添加一些 onchange javascript，或者连接到 Shopify 主题 js 以显示/隐藏所选变体的元字段选项。这可能基于 ID，但我正在努力将它们拉到选择框上的页面中，加上我遇到的所有教程都引用了“selectCallback”函数，但这在 Debut 主题中不存在 - 它是基于石板的 Shopify 主题。

非常感谢您根据所选选项完成此动态显示/隐藏变体元字段的帮助！

/* 更新 */

我已经通过代码进入了这个阶段：

_updateMetaDescription: function(evt) {

  var variant = evt.variant;
  var urlvariant = GetURLParameter('variant'); // finds variant parameter in URL
  var currentvar = $('.variantoption' + '#' + urlvariant); // looks for div with class MetaDescription & ID with the same variant as in the URL

    if (currentvar) {
      // The variant exists, remove hide class.            

      $(this.selectors.metaDescription).removeClass('hide');
       }

  else {
    $(this.selectors.metaDescription).addClass('hide');
  }
},

问题是它正在删除所有 id 的“隐藏”类。不知何故，它无法识别与 DIV 关联的正确 ID。

Answer 1

我有点困惑你到底在看什么，但如果我明白这就是你所拥有的。

您有一个使用option_selection.js 定位的默认选择，并且您希望拥有基于该选择的其他内容。如果这确实是正确的，您可以执行以下操作：

$('#product-select').on('change', function() {
  var $this = $(this);
  var thisId = $this.val();
  $('#' + thisId).show().siblings().hide();
})

至于您的代码：

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
    {% if option.selected_value == value %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% else %}
    <option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endif %}

{% endfor %}
</select>

您在此处无权访问variant.id，因此<option> id 现在应该为空。