Subversion Repositories SmartDukaan

<style>
.grn-product-info{
        float:left;
}
.card {
    background-color: white;
    margin: 5px 0 0 0;
    padding: 5px 5px 0 5px;
    position: relative;
    border-bottom:1px solid #6DC767;
}
.cartdetailscard {
    padding-bottom: 8px;
    position: relative;
}
.vertical-center {
  display: flex;
  align-items: center;
}
.span-bold{
        font-weight:bold;
        margin-right:5px;
}
.cart-qty{
        text-align:center;
        width:50%;
}
.cart-trash{
        font-size:20px;
}
</style>

<script>
        $(function() {
                $(".cart-qty").each(function(){
                        var itemId = $(this).attr('data');
                        var qty = $(this).val();
                        console.log("ItemId "+itemId+" Quantity "+qty);
                        changeQuantityInLocalStorage(itemId, qty);
                });
        });
</script>
<section class="wrapper">
<div class="row">
                <div class="col-lg-12">
                        <h3 class="page-header"><i class="fa fa-shopping-cart"></i>CART</h3>
                        <ol class="breadcrumb">
                                <li><i class="fa fa-home"></i><a href="${appContextPath}/dashboard">Home</a></li>
                                <li><i class="fa fa-shopping-cart"></i>CART</li>                                                        
                        </ol>
                </div>
</div>
<div id="cart-details" style="background:white;background-color:white;padding:2px;">
#if($cartObj.size()==0)
        <div class="card row"
                <p>Your Cart is Empty.</p>      
        </div>
#else
        #foreach ($cartItem in $cartObj)
                <div class="card row" itemId="$cartItem.getItemId()" style="padding-left:3%;">
                                <div class="image col-xs-2 vertical-center" style="float:left;">
                                #if($cartItem.getIconUrl() == "")
                                        <img src="http://static0.saholic.com/images/media/1015020/samsung-galaxy-j5-8gb-icon-1437975825000.jpg" height=70px;></img>
                                #else
                                        <img src="$cartItem.getIconUrl()"></img>
                                #end
                                </div>
                                <div class="grn-product-info col-xs-3 vertical-center">
                                        <div class="col-xs-6">
                                                <span class="span-bold">$cartItem.getDisplayName()</span>
                                        </div>
                                        #if($cartItem.getMessage())
                                                <div class=" col-xs-6">
                                                        <span style="color:red;font-size:10px;">$cartItem.getMessage()</span>
                                                </div>
                                        #end
                                </div>
                                <div class="grn-product-info col-xs-2 vertical-center">
                                        <span><span class="span-bold">Availability : </span> $cartItem.getAvailability()</span>
                                </div>
                                <div class="grn-product-info col-xs-2 vertical-center">
                                        <span class="span-bold">Quantity : </span><input class="cart-qty" type="number" min="0" max="$cartItem.getAvailability()" data="$cartItem.getItemId()" value="$cartItem.getQuantity()"></input>
                                </div>
                                <div class="grn-product-info col-xs-3 vertical-center">
                                        <span class="span-bold cart-trash" data="$cartItem.getItemId()"><i class="fa fa-window-close" aria-hidden="true"></i></span>
                                </div>
                </div>
        #end   
</div>
#end
<div id="cart-details-empty" style="background:white;background-color:white;padding:2px;display:none;">
        <div class="card row"
                <p>Your Cart is Empty.</p>      
        </div>
</div>
</section>
#if($cartObj.size() > 0)
<div id="cart-checkout" style="padding:10px;">
        <div class="row">
                <div class="col-xs-3" style="float:right;">
                        <button class="btn btn-primary cart-checkout" style="width:100%;border-radius:0px;">Checkout</button>   
                </div>
        </div>
</div>
#end