相关产品按变体使用元字段为 Shopify 液体

我正在尝试在Caroline的解决方案的基础上构建带有元字段的相关产品，以构建相关的产品变体。即，当您单击桌子的白色变体时，您将看到椅子的白色变体作为相关产品。(与将办公桌产品链接到椅子产品相反，无论变体如何。Caroline的解决方案在这里：https://gist.github.com/carolineschnapp/1003334 下面是我的代码。现在，它将相同的产品放在页面上加载两次，并且当选择不同的vairant时，没有任何反应。我格式化每个变体的元字段值的方法是输入">

相关产品句柄-1、变体 id-1、相关产品句柄-2、变体 id-2、相关产品句柄-3、变体 id-3"，而不仅仅是产品句柄。

{% assign image_size = 'compact' %}
{% assign heading = 'Related Products' %}
{% if product.selected_or_first_available_variant.metafields.recommendations.productHandles %}
<h3>{{ heading }}</h3>
<ul class="related-products"></ul>
{% endif %}
<script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><'/script>')</script>
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">  
$(document).ready(function(){
setTimeout(function() {
    var dd = $('.single-option-selector#product-select-option-0');
      var vId = location.search.substring(9);
      switchRelated(vId);
    dd.on('change', function() {
      $('ul.related-products').empty();
      var vId = location.search.substring(9);
      switchRelated(vId);  
    });
    function switchRelated(vId) {
      var list = $('ul.related-products');
      var vIdd = parseInt(vId);
      {% for variant in product.variants %}
        {% if variantId == vIdd %}
          {% if variant.metafields.recommendations.productHandles %}
            recommendations = jQuery.trim({{ variant.metafields.recommendations.productHandles | json }}).split(/['s,;]+/);
            for (var i=0; i < (recommendations.length); i+=2 ) {
              var j = (i + 1);
              if (recommendations.length && recommendations[i] && recommendations[j] !== '') {
                jQuery.getJSON('/products/' + recommendations[i] + '.js', function(product) {
                  product.variants.forEach(function(variant) {
                    if (variant.id == parseInt(recommendations[j])) {
                      list.append('<li><div class="image"><a href="' + product.url + '?variant=' + recommendations[j] +'"><img src="' + variant.featured_image.src + '" /></a></div><h4><a href="' + product.url + '?variant=' + recommendations[j] + '">' + product.title + '</a></h4></li>'); 
                    }
                  });
                });
              }
            } 
          {% endif %}   
        {% endif %}
      {% endfor %}
    }    
  }, 1);
});
</script>

答案编辑：一旦我对语法错误进行了一些更正和一些简短的补充，第一个就非常有用。这是我为任何可能需要它的人编辑的答案版本：

产品.液体：

 {% for variant in product.variants %}
                {% capture metafield_data %}{% endcapture %}
                {% assign related_products = variant.metafields.recommendations.productHandles | split: '|' %}
                {% for related_product in related_products %}
                  {% assign metafield_items = related_product | split: ',' %}
                  {% assign r_p = metafield_items[0] %}
                  {% assign r_v = metafield_items[1] | plus: 0 %} 
                  {% assign r_n = all_products[r_p].title %}
                  {% for related_variant in all_products[r_p].variants %}
                    {% if related_variant.id == r_v %} 
                      {% assign r_i = related_variant.image.src | img_url: 'small' %}
                    {% endif %}
                  {% endfor %}
                  {% capture metafield_data %}{{metafield_data}}{{ r_p }},{{ r_v }},{{ r_i }},{{ r_n }}{% unless forloop.last %}|{% endunless %}{% endcapture %}
                {% endfor %}
                <option id="{{ variant.id }}" data-metafield="{{ metafield_data }}" {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}- {{ related_products.size }}</option>
              {% endfor %}

和相关变体 JavaScript 片段：

$(document).ready(function(){
  setTimeout(function() {
    var dd = $('.single-option-selector#product-select-option-0');
    if(location.search.substring(9) != ''){
      var vId = location.search.substring(9);
     }
     else {
      var vId = {{ product.selected_or_first_available_variant.id }};
     }
    switchRelated(vId);

    $('#product-select option').each(function(index, element){
      $(".single-option-selector#product-select-option-0 option:eq(" + index + ")").attr('id', element.id);
      $('.single-option-selector#product-select-option-0 option:eq(' + index + ')').attr('data-metafield', $(element).attr("data-metafield"));
      $('#product-select option:eq(' + index + ')').attr('id', '');

    });

    dd.on('change', function() {
      var list = $('ul.related-products');
      $(list).children().remove();
       $(list).empty();
      if(location.search.substring(9) != ''){
        var vId = location.search.substring(9);
      }
      else {
       var vId = {{ product.selected_or_first_available_variant.id }};
      }
      switchRelated(vId);  
    });
    function switchRelated(vId) {
      var list = $('ul.related-products');
      $(list).children().remove();
      $(list).empty();
      var vIdd = parseInt(vId);
      console.log(vIdd)
      var variant_matches = $('#' + vId).attr('data-metafield').split('|');
      for (var i=0; i < variant_matches.length; i++) {
          var items = variant_matches[i].split(','); 
          list.append('<li><div class="image"><a href="/products/'+items[0]+'/?variant='+items[1]+'"><img src="'+items[2]+'" /></a></div><h4><a href="/products/' + items[0] + '?variant=' + items[2] + '">' + items[3].replace('_','') + '</a></h4></li>');
      }
    }   
  }, 1);
});

我

唯一紧张的是，我正在将数据从"产品选择"下拉菜单复制到"单选项选择器"下拉列表中。我这样做是因为没有用于呈现单选项选择器的模板，它似乎是通过 javascript 添加的。如果有人对在液体中操作单选项选择器有任何见解，请告诉我。谢谢！！

{% for variant in product.variants %}
    {% assign related_products = variant.metafields.recommendations.productHandles | split: '|' %}
    {% for related_product in related_products %}
      {% assign metafield_items = related_product | split: ',' %}
      {% assign r_p = metafield_items[0] %}
      {% assign r_v = metafield_items[1] | plus: 0 %} {% comment %} converting string to number {% endcomment %}
      {% assign r_n = all_products[r_p].title | replace: ' ','_' %}
      {% for related_variant in all_products[r_p].variants %}
        {% if related_variant.id == r_v %} {% comment %} fails if r_v is a string {% endcomment %}
          {% assign r_i = related_variant.image.src }}
        {% endif %}
      {% endfor %}
      {% capture metafield_data %}{{metafield_data}}{{ r_p }},{{ r_v }},{{ r_i }},{{ r_n }}{% unless forloop.last %}|{% endunless %}{% endcapture %}
    {% endfor %}
    <option id="{{ variant.id }}" metafield-data={{ metafield_data }}{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}

function switchRelated(vId) {
    var list = $('ul.related-products');
    var vIdd = parseInt(vId);
    list.children().remove()
    var variant_matches = $('#vId').attr('metafield-data').split('|')
    for (var i=0; i < variant_matches.length; i++) {
        var items = variant_matches[i].split(',')
        list.append('<li><div class="image"><a href="/products/'+items[0]+'/?variant='+items[1]+'"><img src="'+items[2]+'" /></a></div><h4><a href="/products/'+items[0]+'?variant='item[2]'">'+items[3].replace('_','')+'</a></h4></li>'); 
    }
}