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