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> Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.
Vai a Stack Overflow Ci sono funzioni non descritte?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Modifica esempio in GitHub-