显示产品变体元字段

Question

我需要根据在产品页面上选择的变体显示元字段。我希望它们在单击变体时发生变化。我可能需要一些 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 %}

Answer 1

简短的回答是您需要 (a)：以某种方式将您的元字段公开到您网站的 javascript，然后 (b)：更新您的 variant-changing 代码以同时更新该部分基于您的元字段。

在许多主题中，variant-changing 代码包含在名为 selectCallback 的函数中（尽管并非所有主题都如此 - 如果您找不到此代码，可以尝试联系您的主题的开发者 theme-specific 建议）。

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

显示产品变体元字段

Display Product Variant Metafields

javascript

jquery

liquid

shopify