Demo Store Cart

In this example below you will see how to do a Demo Store Cart with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by keithmercado, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright keithmercado ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Demo Store Cart</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  #if ($cart.orderItems)
<div class="container" style="min-height: 462px;">
  <h1 style="font-weight:bold;">CART</h1>
  <span class="message"><br/><br/></span>
  #if ( $cart.orderItems && ($cart.orderItems != []) )
  <form id="cart-form" class="cart--qty" method="POST" action="/cart/updateQuantity">
  <table class="table-cart">
    <thead>
      <tr>
        <th class="product-remove hidden-sm hidden-xs">&nbsp;</th>
  			<th class="product-thumbnail">&nbsp;</th>
  			<th class="product-name hidden-sm hidden-xs">Product</th>
  			<th class="product-price">Price</th>
  			<th class="product-quantity">Quantity</th>
  			<th class="product-subtotal">Total</th>
      </tr>
    </thead>
    <tbody>
      <input type="hidden" name="productId" value="$product.id" />
      <input type="hidden" name="orderItemId" value="$item.id" />
      #set($itemList = $cart.orderItems)
      #foreach ( $item in $itemList)
      #set($product = $item.product)
      <tr class="cart_table_item alt-table-row">
				<td class="product-remove text-center hidden-sm hidden-xs">
          <div class="btn-group" role="group">
          <a class="btn btn-sm" tabindex="-1" href="/cart/remove?orderItemId=$item.id&amp;productId=$product.id" role="button">
          <i class="fa fa-times"></i>
          </a>
          </div>
          </div>
				</td>
				
				#foreach($i in $item.getOrderItemAttributes().keySet())
        #foreach($option in $item.product.getProductOptions())
        #foreach($productOption in $product.getAdditionalSkus())
        #foreach($productOptionVal in $productOption.getAllSkuOptionValueXrefs() )
        #if($productOptionVal.getProductOptionValue().attributeValue==$item.getOrderItemAttributes().get($i)) 
				<td class="product-thumbnail">
          <div class="thumbnail">
            <a href="#toroUrl("$product.url")">
              <img class="img-responsive" src="#magicUrl("$productOption.getSkuMedia().get('primary').url")" alt="$product.name">
             </a>
           </div>
  			</td>
        #end
        #end
        #end
        #end
        #end
  			
				<td class="product-name hidden-sm hidden-xs">
					<a href="$product.url">$product.name</a>
          <small class="visible-xs pull-right">&#36;$item.price</small>
				</td>
				
				<td class="product-price">
					<span class="amount">$item.price</span>
				</td>
				<td class="product-quantity">
				  <div class="form-group">
          <input id ="item-quantity" type="number" name="quantity" class="form-control" min="1" maxlength="3" autocomplete="off" value="$item.quantity" style="width: 100px;" onblur="updateFunction()" >
  
          </div>
				</td>
				<td class="product-subtotal">
					<span class="amount">&#36;$item.totalPrice</span>
				</td>
			</tr>
	  
	  	#end
	  	<td colspan="6" class="actions">
				<a data-trigger="checkoutFromCart" data-track='{ "track": "Checkout from cart page" }' href="#toroUrl("/checkout")" class="btn btn-block btn-lg btn-primary">
		    <small>Proceed to Checkout →</small>
		    </a>
		    <div class="btn-group pull-right" role="group">
        <button type="submit" class="update btn btn-block btn-lg btn-primary btnhide" value="Update" tabindex="-1" role="button"><small>Update Cart</small></button>
        </div>
			</td>
    </tbody>
  </table>
	#end
	<input type="hidden" name="$eps.csrfTokenParameter" value="$eps.CSRFToken" />
	</form>
	<!----------------------------------------------------------->
## 	<div class="cart-totals">
##   	<h2 style="font-weight:bold;">Cart Totals</h2>
##     <span class="message"><br/><br/></span>
##       <table cellspacing="0">
##         <tbody>
          
##           <tr class="cart-subtotal">
##           <th><strong>Cart Subtotal</strong></th>
##           <td><span class="amount">$$cart.subTotal</span></td>
##           </tr>
          
##           <tr class="shipping">
##     			<th>Shipping</th>
##       			<td>
##       			  #foreach($fulfillmentOption in $fulfillmentOptionService.readAllFulfillmentOptions())
##               <div class="radio" style="margin:0;">
##               <label>
##               ## #springBind("tcPageCheckoutForm.shippingForm.fulfillmentOptionId")
##               <input class="shipping-method" id="fulfillmentOptionId$fulfillmentOption.id" name="${status.expression}" type="radio" value="$fulfillmentOption.id"
##               data-price="$fulfillmentOption.price" data-name="$fulfillmentOption.name">
##               &nbsp; <strong>$fulfillmentOption.name Shipping</strong> &nbsp; <span class="text-info">&#36;$fulfillmentOption.price</span>
##               <br>
##               <small class="help-block">
##               Usually $fulfillmentOption.longDescription to major cities.
##               </small>
##               #if($status.error)
##               #foreach($error in $status.errorMessages) 
##               <span class="text-danger">$error</span>
##               #end
##               #end
##               <input id="errorInfo" name="errorInfo" type="hidden" value="$status.error" />
##               </label>
##               </div>
##               #end
##             </td>
##     		  </tr>
    				
##     			<tr class="total">
##     			<th><strong>Order Total</strong></th>
##       			<td>
##       			  <strong><span class="amount" id="total-cart">$cart.total</span></strong>
##       			</td>
##     			</tr>
    			
##         </tbody>
##       </table>
## 	</div>
</div>
#else 
  <div class="container">
    <h1 style="font-weight:bold;">CART</h1><br/>
    <p style="margin-bottom:1.618em;">Your cart is currently empty.</p>
    <a class="return-button btn-lg btn-primary" href="#toroUrl("/")">← Return To Shop</a>
  </div>
#end
<script>
  var totalCartVal = $cart.total;
</script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/keithmercado/demo-store-cart-qOjVXQ */
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.table-cart{
  padding: 5em;
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  tbody{
    td{
    background: #f2f2f2;
    border-bottom: 1px solid #e6e6e6;
    }
  }
  .actions{
    background: #f7f7f7;
    .btn{
      float: right;
      width: auto;
      display: inline-block;
      margin: 0 0 0 .541em;
      font-weight: bold;
      border-radius: 0;
      border-color: #00AEEF;
      background-color: #00AEEF;
    }
  }
  td, th{
    padding: 0 1.5em;
    padding: 12px;
    border-right: 1px dotted #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
    vertical-align: middle;
  }
  thead{
    th, td{
      padding: 23px;
    }
  }
  .product-name{
    a{
      color: #000;
      font-weight: bold;
    }
  }
  .product-thumbnail{
    .thumbnail{
      margin-bottom: 0;
      .center-block();
      max-width: 41px;
      max-height: 41px;
      border: none;
    }
  }
  .product-remove{
    .btn{
        display: block;
        margin: 0 auto;
        text-align: center;
        color: #000;
      &:hover{
        background: #db767b;
      }
    }
  }
    .product-quantity{
      .form-control{
        width: 100%;
        border: none;
      }
    }
  
}
.cart-totals{
  float: right;
  table{
    border: 1px solid #e6e6e6;
  td{
    background-color: #f7f7f7;
  }
    
    input{
      &:focus {
        box-shadow: none;
      }
         &:after{
        outline: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
         }
    }
     td, th{
      padding: .9em 1.5em;
      padding: 1.616em;
      border-right: 1px dotted #e6e6e6;
      border-bottom: 2px solid #e6e6e6;
      vertical-align: middle;
    }
  }
}
.return-button{
  padding: .875em 1.416em;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  color: #000;
  border-radius: 2px;
  border-color: #00AEEF;
  background-color: #ededed;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  &:hover{text-decoration:none; background-color: #00AEEF;}
}

/*Downloaded from https://www.codeseek.co/keithmercado/demo-store-cart-qOjVXQ */

/* JS Checkout */

+function (jQuery) { "use strict";
  
  var wrapper         = $('.checkout'),
      checkbox        = $('#same-shipping'),
      shippingMethod  = $('.shipping-method');

  /* Copy Shipping Info to Billing Info */
  wrapper.change(function() {
      passValue('fromValue');
  });
  
  checkbox.on('click', function () {
    var value = $(this);
    
    if (value.is(':checked')) {
        removeValue('toValue');
        console.log('remove');
    } else {
        passValue('fromValue');
        console.log('pass');
    }
      
  });

  function passValue(elemClass) {
    $('.' + elemClass).each(function(){
      var id = $(this).attr('id'),
          value = $(this).val(),
          billing = '#billing_';
        
      $(billing + id).val(value);
    });
  }

  function removeValue(elemClass) {
    $('.' + elemClass).each(function(){
      $(this).val('');
    });
  }
  
  /* Shipping Method Fee */
  shippingMethod.on('click', function () {
      // Get the selected value
      var shippingName  = $('#shipping--name'),
          totalShipping = $('#shipping--fee'),
          totalCartCont = $('#total-cart'),
          totalCart     = 0,
          shippingPrice = $(this).data('price');
      
      shippingName.text($(this).data('name'));
      totalShipping.text('$' + shippingPrice);
      
      totalCart = totalCartVal +  Math.floor(shippingPrice);
      totalCartCont.text('$' + totalCart.toFixed(2));
  });

}(window.jQuery);


$('.update').click(function(){            //if user click update button
  $('.updateQuantity').each(function(){   //for every input, run this code
    $.ajax({
      type: "POST",
      dataType: "html",
      url: quantityUpdate,
      data: $(this).closest('#updateQuantity').serialize(), //serialize closest form from input
      success:function(result){
        window.location.reload();         //reload the page if successful
      }
    });
  });
});

Comments