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-
Written by @kul3r4