Show More Button

Edit on Github
Open in Playground View Demo


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.


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=""></script>

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

<script async custom-element="amp-bind" src=""></script>

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

<script async custom-element="amp-form" src=""></script>

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

<script async custom-template="amp-mustache" src=""></script>

How to implement a show more button

You can implement a show more button 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: productsState which uses the same json src as the amp-list so that will initially contain the same list of items ...


<amp-state id="productsState"

... 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": 0,
      "hasMorePages": true

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 24px).


<amp-list src="/json/related_products.json"
  [height]="productsState.items.length * 24"
  <template type="amp-mustache">
    <strong>Product</strong>: {{name}}
    <strong>Price</strong>: ${{price}}

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"
  on="submit-success: AMP.setState({
            productsState: { 
              items: productsState.items.concat(event.response.items)
            product: {
              moreItemsPageIndex: product.moreItemsPageIndex + 1,
              hasMorePages: event.response.hasMorePages
  <input type="hidden"
  <input type="submit"
    value="Show more"
    class="ampstart-btn caps m1 show"
    [class]="(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">