建站
咨詢
售后
建站咨詢
新聞中心
概覽
對(duì)于在 iOS 13.3 或更高版本中通過網(wǎng)頁(yè)發(fā)起的 AR 體驗(yàn)，你可以顯示 Apple Pay 按鈕，以便用戶能夠在你的網(wǎng)站上進(jìn)行購(gòu)買。
公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出余干免費(fèi)做網(wǎng)站回饋大家。
你也可以在橫幅中提供文本，讓用戶能夠輕點(diǎn)這個(gè)橫幅來(lái)調(diào)用網(wǎng)站中的自定操作，例如將預(yù)覽的項(xiàng)目添加到購(gòu)物車。
此外，你還可以在 AR 快速查看中提供自定 HTML，用于顯示完全自定的橫幅圖形。
要在橫幅中添加 Apple Pay 按鈕或自定文本或圖形，請(qǐng)選取 URL 參數(shù)來(lái)為網(wǎng)站配置 AR 快速查看。最后，檢測(cè)客戶對(duì)橫幅的輕點(diǎn)操作并做出響應(yīng)。
選取 Apple Pay 按鈕樣式
要為增強(qiáng)現(xiàn)實(shí)體驗(yàn)選擇 Apple Pay 按鈕樣式，請(qǐng)為網(wǎng)站 URL 追加 applePayButtonType 參數(shù)。
https://example.com/biplane.usdz#applePayButtonType=plain你可以利用此處所示的按鈕類型值，從按鈕選項(xiàng)中進(jìn)行選擇。
提供自定文本
你也可以不添加 Apple Pay 按鈕，而提供在 AR 快速查看中作為自定操作按鈕顯示的文本，如下圖所示。
這時(shí)需要追加 callToAction URL 參數(shù)并以自定文本作為值。下列 URL 示例會(huì)顯示帶有“Add to cart”(添加到購(gòu)物車) 文本的橫幅：
https://example.com/biplane.usdz#callToAction=Add%20to%20cart由于 URL 不能包含空格，因此請(qǐng)務(wù)必對(duì)自定文本進(jìn)行 URL 編碼處理，然后再將它作為參數(shù)附加到 URL。如果你的網(wǎng)站支持多種語(yǔ)言，請(qǐng)先對(duì)自定文本進(jìn)行本地化處理，然后再對(duì)它進(jìn)行 URL 編碼處理以獲取 URL 參數(shù)列表。
定義項(xiàng)目
在 AR 快速查看中添加 Apple Pay 按鈕或自定操作按鈕時(shí)，請(qǐng)利用 checkoutTitle、checkoutSubtitle 和 price URL 參數(shù)來(lái)設(shè)置預(yù)覽項(xiàng)目的描述。AR 快速查看會(huì)在標(biāo)題下方顯示副標(biāo)題和價(jià)格，并用逗號(hào)進(jìn)行分隔。
如果 AR 快速查看無(wú)法在一行中顯示副標(biāo)題和價(jià)格，會(huì)裁截副標(biāo)題并顯示省略號(hào)。下列 URL 示例會(huì)顯示橫幅。
https://example.com/biplane.usdz#applePayButtonType=buy&checkoutTitle=Biplane%20Toy&checkoutSubtitle=Rustic%20finish%20with%20rotating%20propeller&price=$15如果你的網(wǎng)站支持多種語(yǔ)言，請(qǐng)先對(duì)項(xiàng)目標(biāo)題、副標(biāo)題和價(jià)格進(jìn)行本地化處理，然后再對(duì)它們進(jìn)行 URL 編碼處理以獲取 URL 參數(shù)列表。
顯示自定橫幅
要完全控制橫幅圖形，請(qǐng)通過 custom URL 參數(shù)提供自定 HTML 文件。下列 URL 示例會(huì)通過名為 comingSoonBanner 的自定文件顯示橫幅。
https://example.com/biplane.usdz#custom=https://example.com/customBanners/comingSoonBanner.html這個(gè) URL 示例會(huì)呈現(xiàn)如下所示的 AR 體驗(yàn)。
如果使用 custom URL 參數(shù)，對(duì)應(yīng)的值必須為絕對(duì) URL。為了符合 AR 快速查看的安全標(biāo)準(zhǔn)，請(qǐng)確保服務(wù)器通過 HTTPS 發(fā)送 HTML 資源。
重要信息
AR 快速查看僅會(huì)顯示 HTML 的內(nèi)容。如果嵌入鏈接或事件等操作，AR 快速查看會(huì)忽略它們。
定義自定橫幅的高度
顯示自定橫幅時(shí)，你可以使用 customHeight URL 參數(shù)設(shè)置橫幅高度。
支持的值包括 small、medium 或 large，這些值分別會(huì)將橫幅高度設(shè)為 81、121 或 161 磅。例如：
https://example.com/biplane.usdz#custom=https://example.com/my-custom-page.html&customHeight=large AR 快速查看會(huì)根據(jù)顯示設(shè)備的尺寸和方向自動(dòng)調(diào)節(jié)橫幅寬度。自定橫幅的最大寬度為 450 磅。如果忽略 customHeight URL 參數(shù)，AR 快速查看會(huì)使用默認(rèn)值 small。
檢測(cè)輕點(diǎn)操作
當(dāng)用戶輕點(diǎn) Apple Pay 按鈕或自定操作按鈕時(shí)，WebKit 會(huì)向代碼中引用對(duì)應(yīng) 3D 素材資源的 元素發(fā)送 DOM 信息。
要接收輕點(diǎn)操作通知，請(qǐng)為錨點(diǎn)上的 message 事件定義 JavaScript 偵聽器。
const linkElement = document.getElementById("ar-link");
linkElement.addEventListener("message", function (event) { ... }, false); 當(dāng) WebKit 調(diào)用偵聽器時(shí)，請(qǐng)檢查 data 屬性。當(dāng)值為 _apple_ar_quicklook_button_tapped 時(shí)，則確認(rèn)用戶輕點(diǎn)了 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 事件遵循常規(guī) DOM 處理規(guī)則。除了為特定錨點(diǎn)添加偵聽器之外，你還可以在文稿根中為所有增強(qiáng)現(xiàn)實(shí)鏈接添加偵聽器，然后使用 event.target 來(lái)確定用戶調(diào)用的錨點(diǎn)。
響應(yīng)輕點(diǎn)操作
定義事件偵聽器中檢測(cè)到用戶輕點(diǎn)時(shí)網(wǎng)站所采取的操作。當(dāng)用戶輕點(diǎn)自定操作按鈕時(shí)，你可以將預(yù)覽的項(xiàng)目添加到購(gòu)物車，或者為用戶跳轉(zhuǎn)至結(jié)賬頁(yè)面，具體取決于橫幅文本和自定操作。
如果你的橫幅顯示 Apple Pay 按鈕，請(qǐng)使用 Apple Pay JS API (英文) 調(diào)出 Apple Pay 提示。
如果你的橫幅顯示 Messages for Business 按鈕，請(qǐng)使用你公司的自定 Messages for Business URL 將用戶轉(zhuǎn)至“信息”app。有關(guān)更多信息，請(qǐng)參閱“從 URL 啟動(dòng)聊天 (英文)”。
文章標(biāo)題：創(chuàng)新互聯(lián)IOS教程：在AR快速查看中添加ApplePay按鈕或自定操作
轉(zhuǎn)載注明：http://www.5511xx.com/article/djicgsd.html
