@eastsideco/escshopify
Version:
WIP JS library for Shopify, containing a variety of useful functionality.
134 lines (96 loc) • 5.82 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../lib/escshopify.web.js"></script>
<style>
.section {
margin: 20px;
background: #EEE;
}
</style>
</head>
<body>
<div class="section">
<h1>EasyCurrency</h1>
<p>
<span data-money="10000" data-money-currency="USD">
$100.00
</span>
</p>
<section class="cart">
<div class="container"><table>
<thead>
<th class="title-md">product</th>
<th class="title-md">price</th>
<th class="title-md">quantity</th>
<th class="title-md">total</th>
</thead>
<tbody>
<tr class="bg-grey cart-item">
<td class="flex cart-item__main">
<a href="/products/1104106?variant=16219769274470" class="cart-item__image object-cover">
<img src="//cdn.shopify.com/s/files/1/0012/4957/5014/products/1104106_harrington_wine_20313_02_200x270.jpg?v=1553093405" alt="Wine|">
</a>
<div class="cart-item__information flex f-dir-column">
<h3>The Harrington Jacket</h3>
<p class="lc">Colour: Wine</p>
<p class="lc">Size: L</p>
<button data-cart-update='{ "event": "click", "action": "remove", "variant_id": "16219769274470" }' class="bold underline">remove</button>
</div>
</td>
<td class="bold"><span class="bold" data-money="9500"><span>£95.00</span></span></td>
<td><input data-cart-update='{ "event": "keyup", "action": "updateQuantity", "variant_id": "16219769274470" }' type="number" value="1" /></td>
<td class="bold" data-total-price data-money="9500"><span>£95.00</span></td>
</tr>
<tr class="bg-grey cart-item">
<td class="flex cart-item__main">
<a href="/products/1104106?variant=16219768586342" class="cart-item__image object-cover">
<img src="//cdn.shopify.com/s/files/1/0012/4957/5014/products/1104106001_1_200x270.jpg?v=1553093405" alt="Black|">
</a>
<div class="cart-item__information flex f-dir-column">
<h3>The Harrington Jacket</h3>
<p class="lc">Colour: Black</p>
<p class="lc">Size: L</p>
<button data-cart-update='{ "event": "click", "action": "remove", "variant_id": "16219768586342" }' class="bold underline">remove</button>
</div>
</td>
<td class="bold"><span class="bold" data-money="9500"><span>£95.00</span></span></td>
<td><input data-cart-update='{ "event": "keyup", "action": "updateQuantity", "variant_id": "16219768586342" }' type="number" value="4" /></td>
<td class="bold" data-total-price data-money="38000"><span>£380.00</span></td>
</tr></tbody>
</table>
<div class="flex cart-footer">
<a href="https://www.merc.com" class="btn">continue shopping</a>
<div class="cart-total"><div class="cart-total__line">
<h2 class="title-md">grand total</h2>
<p class="bold" data-cart-total data-money="47500"><span>£475.00</span></p>
</div>
<a href="/checkout" class="btn">checkout</a>
</div>
</div></div>
</section>
<p>
<select id="currencySelector">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="JPY">JPY</option>
</select>
</p>
<script>
const easyCurrency = new escshopify.plugins.EasyCurrency;
// Initialize EC once the page has loaded.
escshopify.utils.onLoad(() => {
easyCurrency.useGeoserviceResolver();
easyCurrency.initialize({
defaultCurrency: 'GBP',
allowedCurrencies: ['GBP', 'EUR'],
});
});
easyCurrency.selectHelper.link(document.getElementById('currencySelector'));
</script>
</div>
</body>
</html>