www/_src/shop/cart.njk

---
layout: layouts/base.njk
title: Cart
---

<link rel="stylesheet" href="/assets/shop.css">

<div class="flex" style="align-items:center">
	<h1>🛒 {{title}}</h1>
	<a href="#" data-bind="visible:(items().length > 0),click:clearCart" style="margin-top:0">clear</a>
</div>
<p data-bind="visible:(items().length == 0)" style="display:none">Nothing in cart! Go <a href="/shop/">buy some stuff!</a></p>
<table id="cart-items" data-bind="visible:(items().length > 0)"><thead>
	<th></th>
	<th class="vam">Item</th>
	<th class="flex item-rhs">
		<span>Price</span>
		<span class="tac">Qty</span>
		<span class="tar">Subtotal</span>
	</th>
</thead><tbody data-bind="foreach:items"><tr>
	<td data-bind="click:$parent.removeItem" class="cp vam">✖️</td>
	<td><a data-bind="text:name, attr:{href:link}, style:{'text-decoration':qty()<=0?'line-through':'none'}" class="item-name vam"></a></td>
	<td class="vam"><div class="flex item-rhs">
		<div data-bind="text:pretty_price, style:{'text-decoration':qty()<=0?'line-through':'none'}"></div>
		<div class="flex" style="justify-content:center;flex-wrap:nowrap;align">
			<button class="qty-adjust" data-bind="click:$parent.itemMinus,enable:(qty()>0)">-</button>
			<input class="qty" type="number" data-bind="value:qty,attr:{max:maxQty}" min="0">
			<button class="qty-adjust" data-bind="click:$parent.itemPlus,enable:(qty()<maxQty)">+</button>
		</div>
		<div class="tar" data-bind="text:subtotal()"></div>
	</div></td>
</tr></tbody></table><hr>

<h2>🧮 Totals</h2>
<div id="cart-totals-container" class="flex">

	<div id="cart-totals-left">
		<p><i>Shipping to United States only</i></p>
		<p>Enter your zip code to calculate shipping and sales tax: <input type="number" data-bind="value:zip, valueUpdate:'keyup'" min="00000" max="99999" placeholder="00000" style="width:4.5rem"/></p>
		<p>Select payment method to calculate processing fees: </p><label><input type="radio" value="XMR" data-bind="checked:payment_method"/> <img src="/assets/img/monero.svg" class="inline em-high"> XMR Monero</label>
		<!--<br><label><input type="radio" value="BTC" data-bind="checked:payment_method"/> 🪙 BTC ₿itcoin (lightning)</label>-->
		<br><label><input type="radio" value="USD" data-bind="checked:payment_method" checked/> 💳 USD Debit/credit</label>
		<p data-bind="visible:payment_method()==='USD'">Stripe's <a href="https://stripe.com/pricing">processing fee</a> (2.9% + 30¢) and <a href="/policies/">terms</a> apply.</p>
		<p data-bind="visible:payment_method()==='XMR'">(Payment processing through our secure monero daemon.)</p>
		<p data-bind="visible:payment_method()==='BTC'">(Payment processing through our secure bitcoin daemon.)</p>
	</div>

	{# https://stackoverflow.com/a/10040881/3006854 #}
	<table id="cart-totals-right"><tbody>
		<tr>
			<td><b>Subtotal:</b></td>
			<td style="text-align:right"><b data-bind="text:subtotal_pretty"></b></td>
		</tr><tr>
			<td>Tax:</td>
			<td data-bind="text:tax_pretty" style="text-align:right"></td>
		</tr><tr>
			<td>Shipping:</td>
			<td data-bind="text:shipping_pretty" style="text-align:right"></td>
		</tr><tr data-bind="visible:payment_method()==='USD'">
			<td>Processing:</td>
			<td data-bind="text:processing_pretty" style="text-align:right"></td>
		</tr><tr style="border-top:.1vh solid">
			<td><b>Total:</b></td>
			<td style="text-align:right"><b data-bind="text:total_pretty"></b>
				<span data-bind="hidden:hasZip()"> +tax/shipping</span>
			</td>
		</tr><tr data-bind="visible:payment_method()==='XMR'">
			<td colspan="2" style="text-align:right"><b data-bind="text:totalxmr_pretty"></b></td>
		</tr><tr data-bind="visible:payment_method()==='XMR'"><td colspan="2">
			<i>You will pay a ~$0.01 transaction fee in your wallet app.</i>
		</td></tr>
	</tbody></table>
</div><hr>

<h2>🗒️ Order details</h2>
<div id="order-details-container" class="flex">
	<div id="order-details-left">
		<h3>📦 Shipping</h3>
		<p>Where do you want it shipped? </p>
		<input type="text" data-bind="value:shipname, valueUpdate:'keyup'" placeholder="John Doe" required/>
		<input type="text" data-bind="value:addr1, valueUpdate:'keyup'" placeholder="123 Fake St." required/>
		<input type="text" data-bind="value:addr2, valueUpdate:'keyup'" placeholder="#9" required/>
		<div class="flex" style="flex-wrap:nowrap">
			<input type="text" data-bind="value:city, valueUpdate:'keyup'" placeholder="Anytown" required/>
			<span style="width:6rem">, <span data-bind="text:state">CO</span> </span>
			<input type="number" data-bind="value:zip, valueUpdate:'keyup'" min="00000" max="99999" placeholder="00000" style="width:4.5rem" required/>
		</div>
	</div>
	<div id="order-details-right">
		<h3>📇 Contact</h3>
		<p>Who should be reached in case of an issue? </p>
		<input type="text" data-bind="value:contactname, valueUpdate:'keyup'" placeholder="John Doe" required/>
		<input type="tel" data-bind="value:phone, valueUpdate:'keyup'" placeholder="555-123-4567" required/>
		<input type="email" data-bind="value:email, valueUpdate:'keyup'" placeholder="joe@doe.com" required/>
		<p><i>An invoice will be sent to this email address.</i> </p>
	</div>
</div>

<div>
	<button id="checkout-button" data-bind="click:checkout,enable:(checkoutEnabled()&&!isLoading()), attr:{title:checkoutButtonHelp()}, text:checkoutButtonText">📃 Create order</button>
</div>

<p>
	<b>NOTE!</b> This checkout system is brand new!  If you have trouble with your payment or do not receive your items in a week or two, please contact us at <a href="mailto:sales@slvit.us">sales@slvit.us</a>.
</p>

<script>
	const API_DOMAIN = '{{env.API_DOMAIN}}'
	const MONERO_PRICECHECK_SEC = {{env.MONERO_PRICECHECK_SEC}}
	const ZIPS_TO_STATES = {{zipsToStates|dump|safe}}
	const ZIPS_TO_ZONES = {{zipsToZones|dump|safe}}
	const USPS_SHIPPING_RATES = {{uspsShippingRates|dump|safe}}
</script>
<script src="/assets/scripts/lib/knockout-3.5.1.min.js" integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA=="></script>
<script src="/assets/scripts/cart.js" integrity="{{'/assets/scripts/cart.js'|srintegrity}}" defer></script>