Show More Button

Introduction

This is a sample showing how to implement the "show more" design pattern. "Show more" is common design pattern used on e-commerce category pages to lazy load more content triggered by an user interaction.

Setup

Additionally used AMP components must be imported in the header. We use amp-list for showing a list of products

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

We use amp-bind for dynamically changing the src of amp-list

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

We use amp-form for making the call to get extra products after an user interaction

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

We use amp-mustache for rendering the amp-list content

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

How to implement a show more button

You can implement a show more button by using amp-list with additional load-more attribute set to option manual.

The optional load-more-bookmark attribute specifies a field name in the returned data that will give the url of the next items to load. If not specified, amp-list expects the response object to have the load-more-src field set to the next url to load.

FALLBACK

PLACEHOLDER

ERROR

END

<amp-list width="auto"
  height="332"
  layout="fixed-height"
  src="/documentation/examples/api/photo-stream?items=3&left=3"
  binding="refresh"
  load-more="manual"
  load-more-bookmark="next">
  <template type="amp-mustache">
    <div class="list-item">
      <amp-img src={{imageUrl}}
        width="100"
        height="100">
      </amp-img>
      <p>{{title}}</p>
    </div>
  </template>
  <div fallback>
    FALLBACK
  </div>
  <div placeholder>
    PLACEHOLDER
  </div>
  <amp-list-load-more load-more-failed>
    ERROR
  </amp-list-load-more>
  <amp-list-load-more load-more-end>
    END
  </amp-list-load-more>
</amp-list>

Show more using amp-list and amp-bind

You can also implement a show more button manually by using amp-list and amp-bind, where

amp-list src data are bind to the value of an amp-state element. Here we are using two amp-state: photos

which uses the same json src as the amp-list so that will initially contain the same list of items ...

<amp-state id="photos"
  src="/documentation/examples/api/photo-stream?items=3&left=3">
</amp-state>

... while the amp-state with id product is just used to implement the show-more logic where we are allowing the user to click 3 times.

<amp-state id="product">
  <script type="application/json">
    {
      "moreItemsPageIndex": 2,
      "hasMorePages": true
    }
  </script>
</amp-state>

We bind the src attribute of the amp-list to the amp-state object containing the products

from that component as a src. We also dynamically change the height of the amp-list based on

the number of items (each item has a height of 108px).

<amp-list src="/documentation/examples/api/photo-stream?items=3&left=3"
  [src]="photos.items"
  binding="refresh"
  layout="fixed-height"
  width="auto"
  height="332"
  [height]="photos.items.length * 108 + 8">
  <template type="amp-mustache">
    <div class="list-item">
      <amp-img src={{imageUrl}}
        width="100"
        height="100">
      </amp-img>
      <p>{{title}}</p>
    </div>
  </template>
</amp-list>

The show more button is implemented via a form which triggers a page update on the submit-success event.

We are then merging the form results into the items already loaded by the amp-state using the concat function.

<form method="GET"
  action="/documentation/examples/api/photo-stream"
  action-xhr="/documentation/examples/api/photo-stream"
  target="_top"
  on="submit-success: AMP.setState({
            photos: {
              items: photos.items.concat(event.response.items)
            },
            product: {
              moreItemsPageIndex: product.moreItemsPageIndex - 1,
              hasMorePages: !!event.response.next
            }
          });">
  <input type="hidden"
    name="items"
    value="3">
  <input type="hidden"
    name="left"
    value="2"
    [value]="product.moreItemsPageIndex">
  <input type="submit"
    value="Show more"
    [hidden]="!product.hasMorePages">
</form>

Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow

An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub

Written by @kul3r4