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>

Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln

Ein Feature wurde nicht erklärt?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Beispiel auf GitHub bearbeiten

Written by @kul3r4