Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC20 · 19 min · App Services / Graphics & Games / Safari & Web / Spatial Computing

Shop online with AR Quick Look

AR Quick Look adds a new dimension to online shopping: We’ll show you how to easily showcase your products in augmented reality for a "try before you buy" experience. Discover how to display a product banner in AR Quick Look, integrate Apple Pay, or display custom actions like "add to cart". To get the most out of this session, we recommend you familiarize yourself with “Advances in AR Quick Look” from WWDC 2019. Once you’ve discovered the potential of AR Quick Look and Apple Pay to create interactive online shopping experiences, learn more about creating 3D objects and attaching interactions to them by watching “What’s new in USD.”

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 7 snippets

Customization Options - Recap javascript · at 5:47 ↗ 
<a rel="ar" href="alarm-clock.usdz#canonicalWebPageURL=https://developer.apple.com/alarm-clock-product-page/&allowsContentScaling=0">
    <img src="alarm-clock-thumbnail.jpg">
</a>
Apple Pay Banner javascript · at 8:53 ↗ 
<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>
Custom Action Banner javascript · at 11:42 ↗ 
<a rel="ar" id="ar-link" href="kids-slide.usdz#callToAction=Preorder&checkoutTitle=Kids%20Slide&checkoutSubtitle=Enjoy%20the%20playground,%20right%20from%20your%20home&price=$145">
    <img src="kids-slide-thumbnail.jpg">
</a>
Custom Banner javascript · at 13:39 ↗ 
<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=small">
    <img src="solar-panels-thumbnail.jpg">
</a>
Custom Banner - Medium Height javascript · at 14:04 ↗ 
<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=medium">
    <img src="solar-panels-thumbnail.jpg">
</a>
Custom Banner - Large Height javascript · at 14:09 ↗ 
<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=large">
    <img src="solar-panels-thumbnail.jpg">
</a>
Full Apple Pay with Event Listener Example javascript · at 16:31 ↗ 
<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>



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

Resources