如何在您的移动应用产品详情页中显示 Shopify 产品元字段

注意：本文适用于使用 EDL 的旧版自定义区块，如需使用 react-native 的新版自定义区块，请参考 Product metafields codeable blocks

简介

在竞争激烈的电商市场中，提供详细且个性化的产品信息对于提升客户体验至关重要。Shopify 的产品 metafields 允许您存储并展示自定义数据，例如尺寸、材质、护理说明或促销详情。借助 Evlop Mobile App Builder，您可以轻松将这些 metafields 集成到移动应用的产品详情页中，带来更丰富的购物体验。

本文将指导您如何使用 Evlop 在移动应用中加载并展示 Shopify 产品 metafields。

什么是 Shopify 产品 Metafields？

Shopify 产品 metafields 是自定义字段，可用于存储产品的附加信息。它们由一个命名空间（类别）和一个键（具体字段）定义。例如：

命名空间： custom
键： text

Metafields 可以存储多种类型的数据，例如文本、图片、URL，甚至二维码，让您能够提供超越 Shopify 默认属性的独特产品详情。

将产品 Metafields 加载到 EDL 中

要在移动应用中显示 Shopify 商品 metafield，您首先需要将其加载到扩展数据层（EDL）中。操作方法如下：

进入自定义区块中的 "Data for EDL" 标签页。
点击 "Add Data to Pass to EDL"。
选择 "Product Metafields" 作为数据类型。
为每个要加载的 metafield 添加对应的 namespace 和 key。例如：
- namespace: custom key: text
- namespace: details key: material
- namespace: media key: image
- namespace: promo key: qrcode
保存更改。

加载完成后，这些 metafield 即可在 EDL 中通过 data.myMetafields.custom.text 或 data.myMetafields.media.image 等路径进行访问。

使用 Metafield 数据显示文本

要显示来自 metafield 的文本数据，请在自定义区块中使用以下 EDL 代码片段：

<Box>
  <Text>Custom Text: {data.productMetafields.custom.text}</Text>
</Box>

此功能会动态从 metafield 中获取文本值，并在商品详情页中显示。

使用 Metafields 数据显示图片

要显示存储在 metafield 中的图片，请在自定义区块中使用以下 EDL 代码片段：

<Box>
  <Image src={data.productMetafields.media.image.small} />
</Box>

根据所需的显示尺寸，您可以使用以下任意一种

data.productMetafields.media.image.small(maxWidth: 240px, maxHeight: 240px)
data.productMetafields.media.image.medium(maxWidth: 480, maxHeight: 480)
data.productMetafields.media.image.large(maxWidth: 960px, maxHeight: 960px)

这非常适合展示商品图片、护理说明或其他视觉内容。

使用 Metafields 数据显示二维码

要从 metafield 中显示二维码，请在自定义区块中使用以下 EDL 代码片段：

<Box>
  <QRCode value={data.productMetafields.promo.qrcode} />
</Box>

这非常适用于促销、折扣或链接至更多商品信息。

结论

通过 Evlop Mobile App Builder 在您的移动应用中加载并展示 Shopify 商品元字段（metafields），您可以为客户提供更加个性化、信息更丰富的购物体验。无论是文字、图片还是二维码，元字段都能让您展示超越 Shopify 默认属性的独特商品详情。

按照本文介绍的步骤，即可将元字段无缝集成到您的应用中，提升客户的购物体验。如需进一步帮助，请联系 Evlop 支持团队！