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>

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する

Written by @kul3r4