显示产品变体元字段答案

【问题标题】：Display Product Variant Metafields显示产品变体元字段
【发布时间】：2018-03-13 19:21:26
【问题描述】：

我需要根据产品页面上选择的变体显示元字段。我希望它们在单击变体时进行更改。我可能需要一些 jquery 帮助，但我不确定如何使用液体。以下是我的代码，非常感谢任何帮助！

{% for variant in product.variants %}
<div id="tab{{ forloop.index0 }}" class="zr-tabs-panel {% if forloop.first == true %}js-active{% endif %}">
  <div class="table-responsive>">
    <table class="table table-striped">
      <tbody>
        {% for field in current_variant.metafields.var_meta %}
        <tr>
          <td>{{ field | first }}</td>
          <td>{{ field | last }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endfor %}

【问题讨论】：

简短的回答是，您需要 (a)：以某种方式将您的元字段公开给您网站的 javascript，然后 (b)：更新您的变体更改代码，同时根据您的元字段更新该部分。您是否碰巧知道更改变体的 javascript 函数在哪里？在许多主题中，这是一个名为 selectCallback 的函数，尽管并非所有主题都如此。如果您需要帮助并愿意分享您的网站地址，我应该能够通过检查前端为您找到它:)
嘿，谢谢 Dave B。我能够找到变体更改脚本并将元字段添加到其中。感谢您的反馈！
别担心！很高兴能够为您指明正确的方向！
把我的评论翻译成答案，这样你就可以证明这个问题已经解决了:)

标签： javascript jquery shopify liquid

【解决方案1】：

简短的回答是，您需要 (a)：以某种方式将您的元字段公开给您网站的 javascript，然后 (b)：更新您的变体更改代码，同时根据您的元字段更新该部分。

在许多主题中，变体更改代码包含在名为 selectCallback 的函数中（尽管并非所有主题都如此 - 如果您无法找到此代码，您可以尝试与主题的开发人员联系以获取主题- 具体建议）。

每当您使用 Liquid 代码将值放入 Javascript 代码时，我强烈建议您使用 json 过滤器 - Liquid 的魔法过滤器，可确保您的输出始终是 Javascript 合法的。（引号和换行符将被正确转义，空值将打印为null等）

【讨论】：