Question

正如标题所示，我正在寻求更新Shopify首次亮相主题，以显示和隐藏一个其他文本框，其中包含取决于所选变体下拉选项的变体元字段。

这是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}}”，但它并未在测试中填充，我希望这是一种方法将select选项和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 %}

我了解我需要向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现在应该为空。

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

1 个答案: