Metafields可以在Shopify中处理液态代码吗

Question

我有一个带元字段的Shopify产品。 元字段将有关产品的额外信息返回到产品页面。 特别是，它以制表符格式返回目录（产品功能）-请参见下面的示例图像。

我希望元字段也返回特定的产品图片，并在表格中对其进行格式化。

我要这样做的原因是，我想在产品图像上使用图像映射（https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap），以便当用户单击图像上的产品功能时，带有相关信息将突出显示。

下面是我的意思的一个例子。

“详细信息”标签是从此具有2列的元字段中获取信息的-根据下面的代码。

左列（1）应该返回特定的产品图片，而右列（2）是包含相关信息的表格-因此，当用户单击图片编号（3）时，相关表格行会突出显示（3 ）。

我的代码在元字段中如下所示。 但是，它仅呈现液体代码，而不是图像。 元字段从元字段传递后，元字段可以处理临时代码还是Shopify可以处理临时代码？ 或最好的方法是什么？

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-6"><!-- Image column START -->
        {% for image in product.images offset:9 limit:1 %}<!-- Show specific image START -->
            <img src="{{ image.src | product_img_url: 'master' }}">
        {% endfor %}<!-- Show specific image END -->
    </div><!-- Image column END -->

    <div class="col-sm-12 col-md-12 col-lg-6"><!-- Details column START -->
        <table id="product-table">
            <tr>
                <td>Rear view mirror</td>
            </tr>
            <tr>
                <td>ABS Brakes</td>
            </tr>
            <tr>
                <td>6 Speed Transmission</td>
            </tr>
            <tr>
                <td>Lowerd Seat Height</td>
            </tr>
        </table>
    </div><!-- Details column START -->
</div>

Answer 1

您的问题有点尴尬，但我会尽力为您做出明确的答案。

元字段只是您分配给另一个资源的资源。因此，在您的情况下，将为产品分配一些资源。它们可以是字符串，整数或JSON。因此，这意味着您的元字段可以为您提供许多额外的数据。图像可能不是Metafields的理想选择。您有产品图片和变体图片。迷上其他图像只是在要求硬编码的麻烦。您可以做到，但是将图像组织为文件资产并正确使用它们是很多责任。不好玩。不容易。

因此，当Shopify在模板中解析Liquid时，它将产生一个巨大的HTML字符串。巨大的HTML字符串就是您的Shopify商店，它可以发送到客户的Web浏览器。因此，在Shopify将product.liquid转换为HTML的同时，它还遵守所有呈现所选Metafields的命令。这意味着您将获得更多数据放入HTML。您可以对此进行组织。通常，您呈现巨大的HTML字符串，然后让Javascript包含点击监听器和其他普通动作。

在您的情况下，您的问题不是关于Liquid和Metafields，而是如何呈现巨大的Shopify网页，然后连接正确的Javascript。既然您的问题中的零，我将为您提供答案，为了使您的摩托车变得神奇，您需要使用Javscript进行一些脚本编写，也许在Liquid渲染时需要一些巧妙的DOM工作。