We invited developers to try out amp-bind in April to experiment with greater AMP page interactivity. Today we’d like to highlight that amp-bind is generally available and take a deeper dive into the feature, in order to give you a sense of just how much this expands AMP support—especially for e-commerce.
What is amp-bind?
We introduced amp-bind in an April blog post by saying:
amp-bind fundamentally changes the model for interactivity in AMP, while retaining AMP’s essential performance and UX assurances. amp-bind works more like a coding layer on top of AMP—going beyond the AMP Project’s historical approach of limiting interactivity to scoped, use-case-driven components like amp-carousel and amp-accordion. amp-bind links user actions with triggers for different document states, giving developers much more freedom in the types of interactions they can define.
While this definition is technically accurate, it’s also pretty abstract. The feature is so flexible that a broad description doesn’t really reveal what it can actually do.
What can amp-bind do?
One good way to start is to take a look at some of the basic behaviors for the feature. After that, you can try it out yourself by tweaking some of the code in the AMP by Example playground.
Building on what you’ve learned after mastering the basics, the examples below show you some of what’s possible when you combine amp-bind with other AMP HTML features.
- Product color and size selection (detailed example below)
- Server-side filter & sort (detailed example below)
- Search results without page reload (detailed example below)
- Search auto-suggest (detailed example below)
- Carousel slide indicators (detailed example below)
- Trigger navigation from “select” input
- Smart buttons that update the state of the entire page state based on “like”, “thumbs up”, “add to cart”, etc. Could reveal a carousel of personalized recommendations based on this action, increment number of items in cart or “like” count.
- Toggle between different views (list v. grid) of an array of items.
- Toggle overlaying UI panels to customize product options before purchase
- Hide/show tooltips
- Use custom sliders to filter amp-list data
- Change currency (e.g. from US dollars to euros) w/out updating the entire page
- And more!
Product color and size selection
This example incorporates a number of features that are commonly found on product detail pages, though these features could also be separated and used individually if you don’t need the entire interaction. Here, amp-bind coordinates events and actions between amp-form, amp-selector, amp-carousel, and some basic CSS.
- User makes a selection in amp-form (with inputs using amp-selector for easy customization and clear semantics)
- There’s an event associated with each of these selections
- This event is coordinated through amp-bind to do a few things:
- trigger CSS display of one of three different amp-carousels (one for each color of apple)
- trigger “disabled” attributes (and therefore style) on form inputs where a particular size isn’t available for a particular color apple
- trigger updates to the price, based on the color of the apple
Because the page uses amp-bind, the user has visual confirmation of their selections, so they have the best possible understanding of their purchase before submitting the form.
Server-side filter & sort
Sorting & filtering with server-side data is now possible through amp-list[src] binding. It uses amp-bind to coordinate events and actions between the “select” input and amp-list. Let’s take a look step by step:
- User selects a sorting or filtering rule (let’s say “low to high”)
- There’s an event associated with changing the “select” input state
- This event is coordinated through amp-bind to trigger an update to an amp-list’s src attribute, appending a query param matching the sorting rule (?sort=price-ascending), which sends a call to the server
- The server responds with a list of results according to the sorting rule, which are rendered by amp-list according to its defined template
Because bind events can be triggered by an array of inputs, you can use this basic pattern for many other features, like adding additional results via a “show more” button, or paginating list results, so users can explore additional items in a list without re-loading the parent page. Developers You could even implement an experience where users refresh a list of personalized recommendations.
Best practice: statically display results on first loading the page, using div[placeholder], so there is no delay before the results are displayed to the user. Then, when the user interacts with the sorting & filtering mechanism, you can use amp-bind to issue a call through amp-list to an updated URL defined in the “src” attribute to display the results.
Search results without page reload
By fetching and displaying search results inline without a full page reload, users save bandwidth and can have a more seamless experience by retaining the context of the current page. The implementation approach is another application of binding to amp-list, this time using amp-form as well.
- User searches for “pear” through amp-form
- The event triggered by this search is coordinated through amp-bind to trigger an update to amp-list’s src attribute, appending a query param matching the search query (?searchProduct=pear), which sends a call to the server
- The server responds with a list of results according to the search query, which are rendered by amp-list according to its defined template
Search auto-suggest
This one (code here) adds a little bit more complexity to the amp-list[src] binding. It uses amp-bind to coordinate events and actions between amp-form and amp-list.
- User starts typing in the search box
- There’s an event associated with text input into form fields (debounced, to prevent these events from getting triggered with every button press)
- This event is coordinated through amp-bind to do two things:
- trigger visibility on a hidden div containing amp-list
- trigger an update to that amp-list’s src attribute, which sends a call to the server containing the partial query that the user has typed into the form
- The server responds with a list of potential results, based on this query, which amp-list renders through its template — and the user sees these options as auto-suggestions
- The amp-list template coordinates tapping on any one of these suggestions to update the form field, completing the interaction
Note: remember to turn off the browser’s automatic auto-suggest if you’re building your own, to avoid overlaying two different UIs for this function at the same time
Take a look at the example on GitHub to dive more into how this works. You can just copy-and-paste the example into your own page, and customize the template and your back end to serve just about anything: on one end of simplicity you could have more granular suggestions for words that the user could search for, and on the other you could display detail-rich cards for product results with prices, pictures, and ratings.
Carousel slide indicators
Here amp-bind is simply used to coordinate the index of amp-carousel with CSS styles on a simple page indicator (those four dots in the lower-left of the carousel).
- User swipes the slide in the carousel
- There’s an event associated with the change of the visible slide
- This event is coordinated through amp-bind to trigger a change in CSS styles for the pagination dots
This capability means that developers can configure a wide range of affordances to indicate that the carousel is swipeable, and don’t need to rely on the amp-carousel default arrows.
What’s next?
amp-bind is stable now, but it’s still actively getting more features. Based on feedback we’ve gotten from the community, we’re adding capabilities that make the component even more powerful—without sacrificing AMP’s essential performance and UX guarantees.
Among other things, the roadmap includes: updating URL query parameters and corresponding history state from bindings, to complete the sorting/filtering use-case; enabling messaging between iframes and their parent document, to enable rich interactions that cross the boundary between what can be inlined & embedded in AMP; and updated bindings to coordinate page state with forms validated through server calls.
Go forth! Explore! (and share what you find)
In the end, developers out there will probably discover more new capabilities than what we’ve identified here on the AMP team. So go forth! Explore! Experiment with amp-bind and let us know what you find—we’d love to see what you’ve built, and share with the broader AMP community.
As always, we want your feedback for amp-bind, and for any other feature you need support for in AMP. We’re looking forward to hearing from you!
Posted by Eric Lindley, Product Manager, AMP Project