Skip to content

Instantly share code, notes, and snippets.

@dvnkshl dvnkshl/index.html Secret
Created Jun 14, 2017

What would you like to do?
commerce.js product list & add cart
<title>Javascript eCommerce Boilerplate</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
Chec = new Commerce('pk_test_123038fb76224b56002794cb19cf9ca207dd0605bf9da', true);
@import url(,300,600,700);
body { text-align: center; font-family:Open Sans; font-weight:400; font-size: 14px; }
#checkout { display: inline-block; margin:0 auto; text-align: left; }
b { font-weight:600; }
.block {
margin: 25px auto;
.row { margin: 5px auto; text-align: left; }
input, select { margin: 5px 0px; }
button { font-size: 16px; padding: 15px 25px;}
#products { background: #eee; padding: 25px; text-align: center;}
#products .product { width: 50%; border: 1px solid black; border-radius: 5px; margin: 25px auto; padding: 25px;}
h1 { color: red; }
#cart {
#cart table, #cart table td, #cart table tr { border: none; }
#cart table tfoot tr { background: #222; color: white; }
#cart table tbody tr:nth-child(odd) { background: #eee; }
#cart table tbody tr:nth-child(even) { background: #fff; }
#cart table tr td + td, #cart table tr td + td + td { text-align: right; }
#container { width: 800px; margin: 0 auto;}
<div id="container">
<div id="products">
<div id="cart">
<table style="width: 100%;">
<td style="width: 50%;"><b>Item</b></td>
<td style="width: 25%;"><b>Quantity</b></td>
<td style="width: 25%;"><b>Price</b></td>
<td style="width: 50%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 30%;"></td>
<td style="width: 25%;">Subtotal</td>
<td style="width: 25%;" class="cart-subtotal">$0.00</td>
<button onclick="alert('go to checkout');">Go To Checkout</button>
<script defer>
//Refresh the cart session
//Load Products
//For each product
$.each(, function(index, product){
//Create Product Card
var html = ' \
<div class="product"> \
<h2>''</h2> \
<button onclick="addToCart(\'''\');">'+product.price.formatted_with_symbol+' - Add to cart</button> \
//Append product card to #products div
alert('error loading products');
//Add product to cart
function addToCart(product_id) {
Chec.Cart.add({'id': product_id}, function(resp) {
//If product added
//Check if line item already exists in cart table
if($('[data-line-item-id="'+resp.line_item_id+'"]').length > 0){
//Remove row
//Create new cart row with updated quantity
var cart_row = "<tr data-line-item-id="+resp.line_item_id+"><td>"+resp.product_name+"</td><td>"+resp.quantity+"</td><td>"+resp.line_total.formatted_with_symbol+"</td></tr>";
} else {
//Create cart row
var cart_row = "<tr data-line-item-id="+resp.line_item_id+"><td>"+resp.product_name+"</td><td>"+resp.quantity+"</td><td>"+resp.line_total.formatted_with_symbol+"</td></tr>";
//Row to cart table
$('#cart table tbody').append(cart_row);
//Update Subtotal
$('#cart .cart-subtotal').html(resp.cart.subtotal.formatted_with_symbol);
//Alert product added
alert(resp.product_name + ' Added!');
alert('Error adding item!')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.