Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文
  • websites

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 активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub