Skip to content

Instantly share code, notes, and snippets.

@gavinballard
Last active August 29, 2015 14:16
Show Gist options
  • Save gavinballard/82633eb50fb2062589f1 to your computer and use it in GitHub Desktop.
Save gavinballard/82633eb50fb2062589f1 to your computer and use it in GitHub Desktop.
CartJS DOM Binding Example
<!--
This is some example markup for using the DOM Binding feature of CartJS (http://cartjs.org).
It's a direct copy of the second live example code on the front page of the documentation site.
-->
<!-- Add to cart form, using Data API -->
<form data-cart-submit="data-cart-submit">
<label>Select a Product</label>
<select name="id">
<option value="716986707">Coat</option>
<option value="716934999">Hat</option>
</select>
<label>Choose a Quantity</label>
<select name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label>Add a Custom Label <small>Optional</small></label>
<input type="text" name="properties[Custom Label]" />
<button type="submit">Add to Cart</button>
</form>
<!-- Cart table, rendered using DOM Binding -->
<table data-cart-view="data-cart-view">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th colspan="2">Qty</th>
<th>Line Price</th>
</tr>
</thead>
<tbody>
<tr rv-each-item="cart.items">
<td>
<strong rv-text="item.title"></strong>
<ul rv-hide="item.propertyArray | empty">
<li rv-each-property="item.propertyArray > properties" rv-text="property.value"></li>
</ul>
</td>
<td rv-text="item.price | money"></td>
<td>
<a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | minus 1">-</a>
<span rv-text="item.quantity"></span>
<a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | plus 1">+</a>
</td>
<td>
<a href="#" rv-data-cart-remove="index | plus 1">&times;</a>
</td>
<td rv-text="item.line_price | money"></td>
</tr>
<tr rv-show="cart.item_count | lt 1">
<td colspan="5">You don't have any items in your cart.</td>
</tr>
</tbody>
<tfoot rv-show="cart.item_count | gt 0">
<tr>
<td colspan="4"></td>
<td rv-text="cart.total_price | money"></td>
</tr>
</tfoot>
</table>
<img src="loader.gif" width="16" height="11" class="cart-visible-loading"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment