Fully functional E-shop

fully-functional-e-shop.markdown

Fully functional E-shop

A Pen by Mavo Data Actions on CodePen.

License.

index.html

<div mv-app="eshop" mv-source="#data" mv-bar="none">
	<h1>Products</h1>

	<article property="product" mv-multiple>
		<img property="image" alt="" />
		<span property="name"></span>
		<!-- Dot notation because cart is a separate Mavo app, due to separate storage (local) -->
		<button mv-action="add(cart.product, product)">Add to cart</button>
		<span property="amount" class="price"></span>
	</article>

	<footer><small>Products from <a href="http://theworstthingsforsale.com/">The Worst Things For Sale</a></small></footer>
</div>
	
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"
		mv-app="cart" mv-storage="local" mv-autosave="0" mv-mode="read">
	<h1>My Cart</h1>

	<!-- required by PayPal -->
	<input type="hidden" name="cmd" value="_cart">
	<input type="hidden" name="upload" value="1">
	<input type="hidden" name="business" value="[email protected]"> <!-- Sandbox account -->
	<input type="hidden" name="currency_code" value="USD">

	<table>
		<thead>
			<tr>
				<th>Product</th>
				<th>Quantity</th>
				<th>Price</th>
				<th>Subtotal</th>
			</tr>
		</thead>
		<tr property="product" mv-multiple mv-initial-items="0">
			<!-- Anything with a name attribute is sent to PayPal -->
			<td property="name"></td>
			<td><input type="number" property="quantity" value="1" min="1" name="quantity_[$index + 1]"></td>
			<td class="price" property="amount"></td>
			<td>
				<span property="subtotal" class="price">[amount * quantity]</span>
				<input type="hidden" name="item_name_[$index + 1]" value="[name]">
				<input type="hidden" name="amount_[$index + 1]" value="[amount]">
			</td>
		</tr>
		<tfoot>
			<tr>
				<td colspan="3">Total</td>
				<td class="price">[sum(subtotal)]</td>
			</tr>
		</tfoot>
	</table>
	<button disabled="[count(product) = 0]">Check out</button>
</form>



<!-- This is a stub that provides data that would typically be on a remote storage service, such as Github, Dropbox or Firebase. Authors are unlikely to do this in practice, but we did it so you can look at the data without visiting a separate file -->
<script type="application/json" id="data">{
	"product": [
		{
			"name": "Did You Medicate The Dog?",
			"amount": 10,
			"image": "http://theworstthingsforsale.com/wp-content/uploads/2018/05/did-you-medicate-the-dog.jpg"
		},
		{
			"name": "I Believe In Broccoli",
			"amount": 10,
			"image": "http://theworstthingsforsale.com/wp-content/uploads/2018/05/i-believe-in-broccoli.jpg"
		},
		{
			"name": "Silver Baby Rattle",
			"amount": 202,
			"image": "http://theworstthingsforsale.com/wp-content/uploads/2018/05/silver-baby-rattle.jpg"
		},
		{
			"name": "Edible Spoon Maker",
			"amount": 25,
			"image": "http://theworstthingsforsale.com/wp-content/uploads/2018/05/edible-spoon-maker.jpg"
		},
		{
			"name": "Wearable Chair",
			"amount": 989,
			"image": "http://theworstthingsforsale.com/wp-content/uploads/2018/05/wearable-chair.jpg"
		}
	]
}</script>

scripts

<script src="https://dev.mavo.io/dist/mavo.es5.js"></script>

style.css

body {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 2em;
	font: 100%/1.5 Helvetica Neue, sans-serif;
}

[mv-app="eshop"] [property=product] {
	display: grid;
	grid-template: auto 1fr / auto 1fr auto;
	grid-gap: 0 1em;
	background: hsl(220, 20%, 92%);
	padding: .5em;
	margin: .5em 0;
	border-radius: .25em;
}

[mv-app="eshop"] .price, tfoot .price, button {
	font-size: 150%;
}

[mv-app="eshop"] button {
	margin-bottom: auto;
}

.price::before { content: "$"; }

img {
	grid-row-end: span 2;
	width: 100px; height: 100px;
	object-fit: cover;
}

input[property="quantity"] { width: 3em; }

table { border-collapse: collapse; }

tfoot { border-top: 1px solid; }

td, th { padding: .5rem; }

styles

<link href="https://dev.mavo.io/dist/mavo.css" rel="stylesheet" />