元字段可以在 Shopify 中处理液体代码吗答案

【问题标题】：Can Metafields process liquid code in Shopify元字段可以在 Shopify 中处理液体代码吗
【发布时间】：2019-04-10 11:09:40
【问题描述】：

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

我希望元字段也返回特定的产品图像并将其格式化在表格中。

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

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

DETAILS 选项卡是从这个包含 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>

【问题讨论】：

标签： shopify liquid

【解决方案1】：

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

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

因此，当 Shopify 在您的模板中解析 Liquid 时，它将生成一个巨大的 HTML 字符串。那巨大的 HTML 字符串就是您的 Shopify 商店，它会发送到您客户的网络浏览器。因此，在 Shopify 将您的 product.liquid 转换为 HTML 的同时，它还遵循任何命令来呈现您选择的元字段。这意味着您可以获得更多数据以放入 HTML。由你来组织这件事。通常你渲染你巨大的 HTML 字符串，然后让你包含的 Javascript 连接点击侦听器和其他平凡的操作。

在您的情况下，您的问题不是关于 Liquid 和 Metafields，而是如何呈现您巨大的 Shopify 网页，然后连接正确的 Javascript。由于您的问题中关于此的内容为零，因此我将为您提供答案，即为了使您的摩托车具有魔力，您需要在 Javscript 中编写一些脚本，并且可能在 Liquid 渲染时进行一些巧妙的 DOM 工作。

【讨论】：