Question

我正在尝试在shopify中的产品页面上显示特定变体元字段的数据。如果选择了变体，我想显示具有相应id的div。我在互联网上搜索过，无法找到有效的解决方案。任何帮助将不胜感激。

shopify创建的选项：

    <select id="product-selectors" name="id" style="display:none">                    
                <option selected="selected" value="7991232067">Black / Small</option>
                <option value="7991232515">Black / Medium</option>                    
                <option value="7991232387">Black / Large</option>                    
                <option value="7991232323">Black / Extra Large</option>                    
                <option value="7991232259">Orange / Small</option>                    
                <option value="7991232451">Orange / Medium</option>                    
                <option value="7991232131">Orange / Large</option>                    
                <option value="7991232195">Orange / Extra Large</option>                    
              </select>

这样：

    {% for variant in product.variants %}               
    <div class="variant-weight" id="{{variant.id}}"><label>Estimated Weight:</label><span class="estimated-weight"> {% if variant.metafields.bikebuilder.weight %}{{ variant.metafields.bikebuilder.weight }}{% else %}n/a{% endif %}</span></div>
    {% endfor %}

创建这些div，每个变体一个：

    <div class="variant-weight" id="7991232067"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232515"><label>Estimated Weight:</label><span class="estimated-weight"> n/a</span></div>
    <div class="variant-weight" id="7991232387"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232323"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232259"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232451"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232131"><label>Estimated Weight:</label><span class="estimated-weight"> 25898</span></div>
    <div class="variant-weight" id="7991232195"><label>Estimated Weight:</label><span class="estimated-weight"> 2948</span></div>

以及不起作用的代码：

    if (variant) {
    $('select[name="id"]').change(function() {
    var targetId = $(variant).find('select[name="id"] option:selected').val();
    $('#' + targetId).show();
    });
    }

jsfiddle

Answer 1

这项工作：

var variant = true;
if (variant) {
  $('select[name="id"]').change(function() {
      var targetId = $(this).find(' option:selected').val();
      $('.variant-weight').hide();
      $('#' + targetId).show();
  });
}

jsfiddle.net

Answer 2

结果是有一个隐藏的输入来控制变化。这有效：

    $(document).ready(function(){
    var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
});
    $('.swatch input').on('change', function(){
var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
    $(targetId).hide();
    });

在Shopify中显示/隐藏产品页面上的变体Metafield数据

2 个答案: