文章

在 AR 快速查看中添加 Apple Pay 按钮或自定操作

提供一个横幅,让用户可在增强现实体验中轻点这个横幅来进行购买或完成自定操作。

概览

对于在 iOS 13.3 或更高版本中通过网页发起的 AR 体验,您可以显示 Apple Pay 按钮,以便用户能够在您的网站上进行购买。

AR 体验截屏,其中显示的横幅带有 Apple Pay 按钮。

您也可以在横幅中提供文本,让用户能够轻点这个横幅来调用网站中的自定操作,例如将预览的项目添加到购物车。

横幅截屏,其中带有名为“Add to cart”(添加到购物车) 的自定超链接。

此外,您还可以在 AR 快速查看中提供自定 HTML,用于显示完全自定的横幅图形。

横幅截屏,其中显示呈现有内容的自定 HTML 文件。

要在横幅中添加 Apple Pay 按钮或自定文本或图形,请选取 URL 参数来为网站配置 AR 快速查看。最后,检测客户对横幅的轻点操作并做出响应。

选取 Apple Pay 按钮样式

要为增强现实体验选择 Apple Pay 按钮样式,请为网站 URL 追加 applePayButtonType 参数。

https://example.com/biplane.usdz#applePayButtonType=plain

您可以利用此处所示的按钮类型值,从按钮选项中进行选择。

图中显示七个 Apple Pay 按钮选项,其中每个选项均标注有与按钮样式关联的按钮类型值参数。

提供自定文本

您也可以不添加 Apple Pay 按钮,而提供在 AR 快速查看中作为自定操作按钮显示的文本,如下图所示。

横幅截屏,其中带有使用您所提供文本的自定操作按钮。

这时需要追加 callToAction URL 参数并以自定文本作为值。下列 URL 示例会显示带有“Add to cart”(添加到购物车) 文本的横幅:

https://example.com/biplane.usdz#callToAction=Add%20to%20cart

由于 URL 不能包含空格,因此请务必对自定文本进行 URL 编码处理,然后再将它作为参数附加到 URL。如果您的网站支持多种语言,请先对自定文本进行本地化处理,然后再对它进行 URL 编码处理以获取 URL 参数列表。

定义项目

在 AR 快速查看中添加 Apple Pay 按钮或自定操作按钮时,请利用 checkoutTitlecheckoutSubtitleprice URL 参数来设置预览项目的描述。AR 快速查看会在标题下方显示副标题和价格,并用逗号进行分隔。

横幅截屏,其中突出显示了项目的标题、副标题和价格。

如果 AR 快速查看无法在一行中显示副标题和价格,会裁截副标题并显示省略号。下列 URL 示例会显示横幅。

https://example.com/biplane.usdz#applePayButtonType=buy&checkoutTitle=Biplane%20Toy&checkoutSubtitle=Rustic%20finish%20with%20rotating%20propeller&price=$15

如果您的网站支持多种语言,请先对项目标题、副标题和价格进行本地化处理,然后再对它们进行 URL 编码处理以获取 URL 参数列表。

显示自定横幅

要完全控制横幅图形,请通过 custom URL 参数提供自定 HTML 文件。下列 URL 示例会通过名为 comingSoonBanner 的自定文件显示横幅。

https://example.com/biplane.usdz#custom=https://example.com/customBanners/comingSoonBanner.html

这个 URL 示例会呈现如下所示的 AR 体验。

增强现实体验截屏,其中带有 AR 快速查看通过自定 HTML 文件呈现的横幅。

如果使用 custom URL 参数,对应的值必须为绝对 URL。为了符合 AR 快速查看的安全标准,请确保服务器通过 HTTPS 发送 HTML 资源。

定义自定横幅的高度

显示自定横幅时,您可以使用 customHeight URL 参数设置横幅高度。

支持的值包括 smallmediumlarge,这些值分别会将横幅高度设为 81、121 或 161 磅。例如:

https://example.com/biplane.usdz#custom=https://example.com/my-custom-page.html&customHeight=large

AR 快速查看会根据显示设备的尺寸和方向自动调节横幅宽度。自定横幅的最大宽度为 450 磅。如果忽略 customHeight URL 参数,AR 快速查看会使用默认值 small

检测轻点操作

当用户轻点 Apple Pay 按钮或自定操作按钮时,WebKit 会向代码中引用对应 3D 素材资源的 <a> 元素发送 DOM 信息。

<a id="ar-link" rel="ar" href="https://example.com/cool-model.usdz#applePayButtonType=pay....etc">  <img src="poster.jpg"></a>

要接收轻点操作通知,请为锚点上的 message 事件定义 JavaScript 侦听器。

const linkElement = document.getElementById("ar-link");
linkElement.addEventListener("message", function (event) { ... }, false);

当 WebKit 调用侦听器时,请检查 data 属性。当值为 _apple_ar_quicklook_button_tapped 时,则确认用户轻点了 AR 快速查看中的横幅。

const linkElement = document.getElementById("ar-link");
linkElement.addEventListener("message", function (event) {   
    if (event.data == "_apple_ar_quicklook_button_tapped") {
        // handle the user tap.   
    }
}, false);

message 事件遵循常规 DOM 处理规则。除了为特定锚点添加侦听器之外,您还可以在文稿根中为所有增强现实链接添加侦听器,然后使用 event.target 来确定用户调用的锚点。

响应轻点操作

定义事件侦听器中检测到用户轻点时网站所采取的操作。当用户轻点自定操作按钮时,您可以将预览的项目添加到购物车,或者为用户跳转至结账页面,具体取决于横幅文本和自定操作。

如果您的横幅显示 Apple Pay 按钮,请使用 Apple Pay JS API (英文) 调出 Apple Pay 提示。

如果您的横幅显示 Business Chat 按钮,请使用您公司的自定 Business Chat URL 将用户转至“信息”app。有关更多信息,请参阅“从 URL 启动聊天 (英文)”。

另请参阅

AR 快速查看