Clever Hacks for E-Commerce AMP Pages
WompMobile CEO presents at first-ever Google AMP Conf and shares practical solutions for building rich functionality into Accelerated Mobile Pages
Presenting at the first-ever Google AMP Conference, Madison Miner, CEO of WompMobile, shared a few clever solutions for creating rich, highly functional AMP experiences. In his talk, “I can’t believe it’s AMP,” Madison provided practical examples for building rich functionality into AMP pages — without any additional JavaScript.
This was a fitting topic, as WompMobile has been converting complex e-commerce websites into AMP experiences since long before Google started indexing results beyond news articles. Nevertheless, it was through this journey — creating e-commerce AMP pages before it even mattered — that WompMobile was able to discover solutions for building fast, robust shopping experiences. And it was those discoveries that Madison shared, walking through code examples, all in the hopes of inspiring others to find new ways to use AMP.
Breaking Down the Patterns in E-commerce
E-commerce has a number of established patterns, including product galleries, buy buttons, tabbed information, ratings and much more. These familiar patterns are a big part of what makes it easy to navigate and shop on mobile devices. The ability to engineer this functionality and style within AMP is key to building a compelling shopping experience.
To bring each pattern to life, Madison used a website called AMPed Up Kids — an e-commerce destination that exclusively sells three-wheeled tricycles — to demonstrate each AMP solution. Seriously, who doesn’t love bikes without brakes?
Madison showed us how to implement a few common e-commerce patterns in AMP, including:
- Building a tabbed user interface;
- Engineering a full-screen modal on error; and
- Integrating user voting systems.
Tabbed User Interface
To create a tabbed UI, we utilize amp-selector, wrapped around the elements for our tabs and tab content. Each tabButton is immediately followed by the related tabContent. The amp-selector component allows a user to select one of a given set, and the selected element is given a selected attribute.
We style the content using flexbox to display the tabs first, followed by the tab content areas. Tab content is hidden by default, and then displayed when the corresponding tabButton is selected.
Full-Screen Modal Error
Oops! You can’t do that… Modal errors give clear, immediate feedback to users when things aren’t right. To implement modal error in AMP, we use amp-mustache templates. For form submissions, a submit-success template is shown on 2xx responses, and a submit-error template is shown for all non-2xx responses.
The transparent label element overlays the screen, and is associated with an invisible checkbox. When a user taps anywhere on the screen (tapping the invisible label) the checkbox gets checked and the modal is dismissed.
It’s worth noting that amp-form now supports showing an amp-lightbox based on events, which can provide similar functionality.
Voting
Is this helpful? Voting helps increase user engagement and provides valuable feedback on a website. In this example, users can vote up or down on a review’s helpfulness. The clever bit, however, is wrapping a submit button around radio button inputs. When a user taps the input, it selects the radio button, bubbles up the DOM to the submit button, which then submits the form and the page is updated based on server response.
What’s AMP for E-commerce without payments?
Everyone loves the convenience of buying goods from a mobile device. But when confronted with a cumbersome multi-step checkout sequence, customers abandon the sale, leaving products in their browsing history. So, rather than convert a cumbersome paradigm to AMP, Madison showcased the potential of a new web API — the Payment Request API — by integrating it into the AMPed Up Kids shopping experience. By combining the speed of AMP with the ease of Google’s Payment Request API, checkout friction is reduced, increasing mobile conversions.
Breaking down the Payment Request API
Utilizing the Payment Request API in AMP required a little thinking outside the box with iframes. When the buy button is clicked our server response sets a cookie. The success template then requests our payment iframe, the server recognizes the user based on the cookie we just set, and responds with the appropriate payment page.
Why use a cookie? In AMP, iframes are protected so we can’t use a mustache variable to modify the iframe src for our success template. However, a cookie can serve as the identifier we need.
Also of note, the allowpaymentrequest attribute makes it possible to use the Payment Request API within an iframe, which is required by this AMP implementation. This iframe functionality is available with the upcoming release of Chrome 57, and Google has indicated intent to add the allowpaymentrequest attribute into the AMP viewer iframe in Google Search results this year.
So, what impact will this have on e-commerce? A user will be able to search for a product, click an AMP result, then place their order from right within the search result. Page load wait times, gone. Cumbersome multi-step checkout process, gone. Hello, conversion rates.
Takeaways
AMP gives us design constraints intended to keep pages fast, but as Madison demonstrated, within those constraints it’s still possible to create rich user experiences. AMP for e-commerce is possible now. And as AMP becomes a more robust platform, it will get easier to deliver a lightning-fast user experience for articles, e-commerce, and beyond.
This post originally appeared on the WompMobile blog.
