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.
{{title}}
<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).
{{title}}
<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-
