JSFiddle - React, Tailwind, and code Playground

by shigetak

HTML

<!-- Only include one of the below in your theme. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/rivets-cart.min.js"></script>


<!-- 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">
                        <small class="text-muted">{property.name}: {property.value}</small>
                    </li>
                </ul>
            </td>
            <td rv-html="item.price | money Currency.currentCurrency"></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 |...

JavaScript

var json= '
{'id': 1, 'name': 'ぷろだくと1ですProduct 1', 'price': 12.95},
{'id': 2, 'name': 'Other product', 'price': 4.35}
';
jQuery(function() {

  CartJS.init({{ cart | json }});
});