JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/simplecartjs/3.0.5/simplecart.min.js"></script>
<div class="simpleCart_shelfItem">
    <h4 class="item_name">My Item</h4>
    <!-- checkbox to add "bar" to the "foo" attribute -->
    <label> <input type="checkbox" class="item_foo" value="bar" /> Foo Bar?</label><br/>
    <strong class="item_price">$20</strong><br/>
    <button class="item_add">Add to Cart</button>
</div>
<hr/>
<h4>Cart</h4>
<div class="simpleCart_items">

</div>

JavaScript

simpleCart({
	// array representing the format and columns of the cart,
	// see the cart columns documentation
	cartColumns: [
		{ attr: "name", label: "Name"},
		{ view: "currency", attr: "price", label: "Price"},
		{ attr: "quantity", label: "Qty"},
        //Add the foo attribute to the cart columns if desired
        { attr: "foo", label: "foo" },
		{ view: "currency", attr: "total", label: "SubTotal" },
		{ view: "remove", text: "Remove", label: false}
	],

	// "div" or "table" - builds the cart as a 
	// table or collection of divs
	cartStyle: "table", 

	// how simpleCart should checkout, see the 
	// checkout reference for more info 
	checkout: { 
		type: "PayPal" , 
		email: "[email protected]" 
	},

	// set the currency, see the currency 
	// reference for more info
	currency: "USD"
});