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

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>

然后我想根据产品的选定变量显示所选的产品变量metafield（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 %}  

我知道我需要在select中添加一些onchange javascript，或者挂钩到Shopify主题js以显示/隐藏所选变体的metafield选项。这可以基于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现在应该是空的。