<code><!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden
}
</style>
<style amp-custom>
.container {
display: flex;
}
.product-item {
width: 200px;
}
</style>
</head>
<body>
<amp-state id="selectedProduct">
<script type="application/json">
{
"src": "",
"productName": "",
"price": ""
}
</script>
</amp-state>
<div class="container">
<amp-list width="500" height="500" layout="responsive" src="https://bounce.mailamp.in/similar-products"
items="products">
<template type="amp-mustache">
<div class="product-item">
<amp-img class="product-image" width="100" height="100" src="{{src}}" alt="Product Image"></amp-img>
<p>{{title}}</p>
<p>Price: ₹{{price}}</p>
<form id="form" method="post" action-xhr="https://bounce.mailamp.in/add-to-cart">
<input type="hidden" name="src" [value]="selectedProduct.src">
<input type="hidden" name="productName" [value]="selectedProduct.productName">
<input type="hidden" name="price" [value]="selectedProduct.price">
<button on="tap:AMP.setState({
selectedProduct: {
src: '{{src}}',
productName: '{{title}}',
price: {{price}},
}
}), form.submit" type="button" class="add-to-cart-button">
Add to Cart
</button>
</form>
</div>
</template>
</amp-list>
</div>
</body>
</html>
</code>
<code><!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden
}
</style>
<style amp-custom>
.container {
display: flex;
}
.product-item {
width: 200px;
}
</style>
</head>
<body>
<amp-state id="selectedProduct">
<script type="application/json">
{
"src": "",
"productName": "",
"price": ""
}
</script>
</amp-state>
<div class="container">
<amp-list width="500" height="500" layout="responsive" src="https://bounce.mailamp.in/similar-products"
items="products">
<template type="amp-mustache">
<div class="product-item">
<amp-img class="product-image" width="100" height="100" src="{{src}}" alt="Product Image"></amp-img>
<p>{{title}}</p>
<p>Price: ₹{{price}}</p>
<form id="form" method="post" action-xhr="https://bounce.mailamp.in/add-to-cart">
<input type="hidden" name="src" [value]="selectedProduct.src">
<input type="hidden" name="productName" [value]="selectedProduct.productName">
<input type="hidden" name="price" [value]="selectedProduct.price">
<button on="tap:AMP.setState({
selectedProduct: {
src: '{{src}}',
productName: '{{title}}',
price: {{price}},
}
}), form.submit" type="button" class="add-to-cart-button">
Add to Cart
</button>
</form>
</div>
</template>
</amp-list>
</div>
</body>
</html>
</code>
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden
}
</style>
<style amp-custom>
.container {
display: flex;
}
.product-item {
width: 200px;
}
</style>
</head>
<body>
<amp-state id="selectedProduct">
<script type="application/json">
{
"src": "",
"productName": "",
"price": ""
}
</script>
</amp-state>
<div class="container">
<amp-list width="500" height="500" layout="responsive" src="https://bounce.mailamp.in/similar-products"
items="products">
<template type="amp-mustache">
<div class="product-item">
<amp-img class="product-image" width="100" height="100" src="{{src}}" alt="Product Image"></amp-img>
<p>{{title}}</p>
<p>Price: ₹{{price}}</p>
<form id="form" method="post" action-xhr="https://bounce.mailamp.in/add-to-cart">
<input type="hidden" name="src" [value]="selectedProduct.src">
<input type="hidden" name="productName" [value]="selectedProduct.productName">
<input type="hidden" name="price" [value]="selectedProduct.price">
<button on="tap:AMP.setState({
selectedProduct: {
src: '{{src}}',
productName: '{{title}}',
price: {{price}},
}
}), form.submit" type="button" class="add-to-cart-button">
Add to Cart
</button>
</form>
</div>
</template>
</amp-list>
</div>
</body>
</html>
I’m working on an AMP for Email project and trying to implement an interactive product list using amp-list and amp-state. However, I am facing issues with styling the amp-list. I want to show the amp-list horizontally but when i add container style as display: flex I don’t see the amp-list at all.
New contributor
Adarsh Raut is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.