Skip to content

Instantly share code, notes, and snippets.

@artyom-kurnikov-doit
Last active June 25, 2019 18:05
Show Gist options
  • Save artyom-kurnikov-doit/d4d91d8032964f126b34a334297586da to your computer and use it in GitHub Desktop.
Save artyom-kurnikov-doit/d4d91d8032964f126b34a334297586da to your computer and use it in GitHub Desktop.
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
.card {
display: flex;
padding: 10px;
border-radius: 5px;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
color: #757575;
}
.btn {
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
padding: 6px 12px;
background-color: #4dd0e1;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.btn:hover {
background-color: #26c6da;
}
.btn:active {
background-color: #0097a7;
}
.btn.outlined {
border: 1px solid white;
background-color: transparent;
color: white;
}
.product-list {
margin: 0 auto;
max-width: 640px;
}
.product-item {
margin: 10px;
background-color: #f5f5f5;
}
.product-image {
width: 60px;
height: 60px;
border-radius: 60px;
}
.product-details {
width: calc(100% - 75px);
margin-left: 15px;
}
.product-details h3, p {
margin: 0;
}
.product-details p {
margin-top: 6px;
}
.product-details span {
font-weight: bold;
color: #00838f;
}
.product-details button {
margin-top: 10px;
display: block;
margin-left: auto;
}
.total {
padding: 20px;
margin: 10px;
background-color: #283593;
color: white;
}
.total .content {
margin: 0 auto;
}
.total h2 {
margin: 0;
}
.total button {
font-style: italic;
font-size: 16px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="product-list">
<amp-state id="state">
</amp-state>
<amp-list
height="530"
items="."
src="https://amptest.do-it.co:8080/products">
<template type="amp-mustache">
<div class="card product-item">
<amp-img
class="product-image"
alt="A product item"
height="300"
width="300"
layout="responsive"
src="{{imgUrl}}">
</amp-img>
<div class="product-details">
<h3>{{name}}</h3>
<span>${{price}}</span>
<p>{{description}}</p>
<button
class="btn"
[text]="
(selected || []).some(x => x.id == {{id}})
? 'REMOVE'
: 'ADD TO CART'
"
on="
tap: AMP.setState({
selected:
(selected || []).some(x => x.id == {{id}})
? (selected || []).filter(x => x.id != {{id}})
: (selected || []).concat([{ id: {{id}}, price: {{price}} }])
})
">
ADD TO CART
</button>
</div>
</div>
</template>
</amp-list>
<div class="card total">
<div class="content">
<h2
[hidden]="!!checkedOut"
[text]="
!(selected || []).length
? 'Add Some Items'
: 'Total: $' +
selected.reduce((acc, item) =>
acc + item.price,
0
)
">
Add Some Items
</h2>
<h2
hidden
[hidden]="!checkedOut">
Paid Successfully!
</h2>
<button
class="btn outlined"
hidden
[hidden]="!(selected || []).length || !!checkedOut"
on="tap: AMP.setState({ checkedOut: true })">
CHECKOUT
</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment