class ARQuickLookPreviewItem (英文)
概览
对于在 iOS 13.3 或更高版本中通过网页发起的 AR 体验,你可以显示 Apple Pay 按钮,以便用户能够在你的网站上进行购买。
你也可以在横幅中提供文本,让用户能够轻点这个横幅来调用网站中的自定操作,例如将预览的项目添加到购物车。
此外,你还可以在 AR 快速查看中提供自定 HTML,用于显示完全自定的横幅图形。
要在横幅中添加 Apple Pay 按钮或自定文本或图形,请选取 URL 参数来为网站配置 AR 快速查看。最后,检测客户对横幅的轻点操作并做出响应。
选取 Apple Pay 按钮样式
要为增强现实体验选择 Apple Pay 按钮样式,请为网站 URL 追加 apple
参数。
你可以利用此处所示的按钮类型值,从按钮选项中进行选择。
提供自定文本
你也可以不添加 Apple Pay 按钮,而提供在 AR 快速查看中作为自定操作按钮显示的文本,如下图所示。
这时需要追加 call
URL 参数并以自定文本作为值。下列 URL 示例会显示带有“Add to cart”(添加到购物车) 文本的横幅:
由于 URL 不能包含空格,因此请务必对自定文本进行 URL 编码处理,然后再将它作为参数附加到 URL。如果你的网站支持多种语言,请先对自定文本进行本地化处理,然后再对它进行 URL 编码处理以获取 URL 参数列表。
定义项目
在 AR 快速查看中添加 Apple Pay 按钮或自定操作按钮时,请利用 checkout
、checkout
和 price
URL 参数来设置预览项目的描述。AR 快速查看会在标题下方显示副标题和价格,并用逗号进行分隔。
如果 AR 快速查看无法在一行中显示副标题和价格,会裁截副标题并显示省略号。下列 URL 示例会显示横幅。
如果你的网站支持多种语言,请先对项目标题、副标题和价格进行本地化处理,然后再对它们进行 URL 编码处理以获取 URL 参数列表。
显示自定横幅
要完全控制横幅图形,请通过 custom
URL 参数提供自定 HTML 文件。下列 URL 示例会通过名为 coming
的自定文件显示横幅。
这个 URL 示例会呈现如下所示的 AR 体验。
如果使用 custom
URL 参数,对应的值必须为绝对 URL。为了符合 AR 快速查看的安全标准,请确保服务器通过 HTTPS 发送 HTML 资源。
重要信息
AR 快速查看仅会显示 HTML 的内容。如果嵌入链接或事件等操作,AR 快速查看会忽略它们。
定义自定横幅的高度
显示自定横幅时,你可以使用 custom
URL 参数设置横幅高度。
支持的值包括 small
、medium
或 large
,这些值分别会将横幅高度设为 81、121 或 161 磅。例如:
AR 快速查看会根据显示设备的尺寸和方向自动调节横幅宽度。自定横幅的最大宽度为 450 磅。如果忽略 custom
URL 参数,AR 快速查看会使用默认值 small
。
检测轻点操作
当用户轻点 Apple Pay 按钮或自定操作按钮时,WebKit 会向代码中引用对应 3D 素材资源的 <a>
元素发送 DOM 信息。
要接收轻点操作通知,请为锚点上的 message
事件定义 JavaScript 侦听器。
当 WebKit 调用侦听器时,请检查 data
属性。当值为 _apple
时,则确认用户轻点了 AR 快速查看中的横幅。
message
事件遵循常规 DOM 处理规则。除了为特定锚点添加侦听器之外,你还可以在文稿根中为所有增强现实链接添加侦听器,然后使用 event
来确定用户调用的锚点。
响应轻点操作
定义事件侦听器中检测到用户轻点时网站所采取的操作。当用户轻点自定操作按钮时,你可以将预览的项目添加到购物车,或者为用户跳转至结账页面,具体取决于横幅文本和自定操作。
如果你的横幅显示 Apple Pay 按钮,请使用 Apple Pay JS API (英文) 调出 Apple Pay 提示。
如果你的横幅显示 Messages for Business 按钮,请使用你公司的自定 Messages for Business URL 将用户转至“信息”app。有关更多信息,请参阅“从 URL 启动聊天 (英文)”。