Metafields可以在Shopify中处理液体代码

问题描述 投票:-1回答:1

我有一个带有metafield的Shopify产品。 metafield将有关产品的额外信息返回到产品页面。特别是,它以标签格式返回目录(产品功能) - 请参见下面的示例图片。

我希望metafield也返回一个特定的产品图像,并在表格中对其进行格式化。

我想这样做的原因是我想在产品图像上使用图像映射(https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap),这样当用户点击图像上的产品特征时,带有相关信息的表格行将被突出显示。

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

enter image description here

DETAILS选项卡是从这个有两列的元数据获取信息 - 根据下面的代码。

左列(1)应该返回特定的产品图像,右列(2)是具有相关信息的表 - 因此当用户点击图像标注(3)时,相关的表行被突出显示(3)。

我的代码在metafield中如下所示。但它只是渲染液体代码 - 而不是图像。 metafields可以处理液体代码,还是可以在从metafield传递后对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个回答
0
投票

你的问题有点尴尬,但我会尽力给你一个明确的答案。

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

因此,当Shopify在模板中解析Liquid时,它将生成一个巨大的HTML字符串。这个巨大的HTML字符串是您的Shopify商店,它会传递给您客户的Web浏览器。因此,在Shopify将product.liquid转换为HTML的同时,它还遵循任何命令来呈现您选择的Metafield。这意味着您可以将更多数据放入HTML中。你有责任对此进行组织。通常你渲染你巨大的HTML字符串然后让你包含的Javascript点击监听器和其他平凡的动作。

在你的情况下,你的问题不是关于Liquid和Metafields,而是如何呈现你庞大的Shopify网页,然后连接正确的Javascript。因为在你的问题中没有关于那个,我将给你答案,为了使你的摩托车神奇,你需要在Javscript中做一些脚本,也许在Liquid渲染时有一些聪明的DOM工作。

© www.soinside.com 2019 - 2024. All rights reserved.