-
Notifications
You must be signed in to change notification settings - Fork 2
/
dynamic-href-in-amp-list.html
117 lines (108 loc) · 5.34 KB
/
dynamic-href-in-amp-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!-- ## Show more button -->
<!--
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.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## 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.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/advanced/load_more_button/">
<title>Load more button</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.btn {
background-color: red;
padding: 10px;
color: white;
}
.hide {
display: none;
}
</style>
</head>
<body>
<!-- ## How to implement a show more button -->
<!-- You can implement a show more button 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`: `productsState`
which uses the same json `src` as the `amp-list` so that will initially contain the same list of items ... -->
<amp-state
id="productsState"
src="https://ampbyexample.com/json/related_products.json">
</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": 0,
"height": 180,
"hasMorePages": true
}
</script>
</amp-state>
<button class="btn" on="tap:AMP.setState({
hrefState: {
link: 'https://www.google.com'
}
})"> Change [href] link state to www.google.com</button>
<button class="btn"><a href="www.bing.com" [href]="hrefState.link">This is a Href Button outside amp list, work perfect!</a></button>
<!-- We bind the `src` attribute of the `amp-list` to the `amp-state` object containing the products
from that component as a `src`. -->
<amp-list
src="https://ampbyexample.com/json/related_products.json"
[src]="productsState.items"
width="auto"
height="180"
[height]="product.height"
class="m1"
>
<template type="amp-mustache">
<button class="btn"><a href="https://www.bing.com" [href]="hrefState.link">default to bing.com, [href] to www.google.com</a></button>
<amp-img width="24" height="24" layout="fixed" alt="{{name}}" src="https://ampbyexample.com{{img}}"></amp-img>
<strong>Product</strong>: {{name}}
<strong>Price</strong>: ${{price}}
</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="https://ampbyexample.com/json/more_related_products_page"
action-xhr="https://ampbyexample.com/json/more_related_products_page"
target="_top"
on="submit-success: AMP.setState({
productsState: { items: productsState.items.concat(event.response.items)},
product: {moreItemsPageIndex: product.moreItemsPageIndex + 1,
hasMorePages: event.response.hasMorePages,
height: product.height + (1 * 180)}
});">
<input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex">
<button
id="btnSubmit"
type="submit"
class="btn"
[class]="(product.hasMorePages == false ? 'hide' : 'btn')"
>
Show More
</button>
</form>
<amp-state id="hrefState">
<script type="application/json">
{
link: 'www.google.com'
}
</script>
</amp-state>
</body>
</html>