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

Question

我试图在shopify的产品页面上显示特定变体metafield的数据。如果选择了一个变体，我想用相应的ID显示div。我在互联网上搜索过，找不到可行的解决方案。任何帮助，将不胜感激。

<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> 

和代码不工作：通过shopify创建

选项

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(); 
    });