SImpleCart Minimum Purchase Requirement
SImpleCart Minimum Purchase Requirement
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/simplecartjs/3.0.5/simplecart.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div id="myAlert" class="alert alert-success fade" data-alert="alert"></div>
<div class="container">
<div class="row">
<h3>SHOP </h3>
<div class="media simpleCart_shelfItem alert alert-warning col-xs-6 col-sm-3">
<div class="media-left">
<a href="#">
<img class="item_myimage media-object thumbnail" src="http://placehold.it/50x50/3e3e44/ffffff/&text=ITEM NAME" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading item_name">Product heading 1</h4>
<div class="item_min hide">5</div>
<p class="item_price">8.99</p>
<a href="javascript:;" class="item_add btn btn-default btn-xs">Add to Cart</a>
</div>
</div>
<div class="media simpleCart_shelfItem alert alert-warning col-xs-6 col-sm-3">
<div class="media-left">
<a href="#">
<img class="item_myimage media-object thumbnail" src="http://placehold.it/50x50/3e3e44/ffffff/&text=ITEM NAME" alt="...">
</a>
</div>
<div class="media simpleCart_shelfItem alert alert-warning col-xs-6 col-sm-3">
<div class="media-left">
<a href="#">
<img class="item_myimage media-object thumbnail" src="http://placehold.it/50x50/3e3e44/ffffff/&text=ITEM NAME" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading item_name">Product heading 3</h4>
<div class="item_min hide">10</div>
<p class="item_price">12.99</p>
<a href="javascript:;" class="item_add btn btn-default btn-xs">Add to Cart</a>
</div>
</div>
</div>
</div>
<br/>
<h3>Cart <span id="simpleCart_grandTotal" class="simpleCart_grandTotal"></span> <div...
CSS
.hide{display:none}
.simpleCart_items table{width:100%}
.simpleCart_items {background-color: rgba(0, 0, 0, 0.2);}
.itemRow .item-remove a{
color:#ddd;
font-size: 80%;
}
.headerRow, .cartTotal{background-color: rgba(0, 0, 0, 0.6);padding:3px; color:#ffffff;}
.simpleCart_shelfItem .item_Quantity {width:80px}
.headerRow .item-name,
.headerRow .item-price,
.itemRow .item-name,
.itemRow .item-price,
.itemRow .item-remove,
.headerRow .item-quantity,
.itemRow .item-quantity
{
font-size:18px;
padding:10px;
color:#ffffff;
}
.row-centered {
text-align:center;
}
JavaScript
simpleCart({
checkout: {
type: "PayPal",
email: "[email protected]"
},
cartColumns: [
{ view: function(item, column){
return"<img src='"+item.get('myimage')+"'>";
},
attr: 'myimage' },
{ attr: "name" , label: "name", view: 'name' } ,
{view: function(item, column){
return item.get('min');
}, attr: "min", label: "min"},
{ attr: "price" , label: "Price", view: 'currency' } ,
{ view: "decrement" , label: false , text: "<i class='fa fa-minus-circle'></i>" } ,
{ attr: "quantity" , label: "Qty" } ,
{ view: "increment" , label: false , text: "<i class='fa fa-plus-circle'></i>" } ,
{ attr: "total" , label: "SubTotal", view: 'currency' } ,
{ view: "remove" , text: "Remove" , label: false }
],
cartStyle: "table"
});
simpleCart.bind("afterAdd", function(i) {
simpleCart.each(function( item ){
if(item.get('quantity') < item.get('min')){
$("#myAlert").addClass("in").html("Minimum Quantity order for this is " + item.get('min'))
closeAlertBox();
$("#show").html(item.get('quantity') + " is LESS than " + i.get('min')).addClass("in");
item.quantity(i.get('min')-1); // set the QTY
return false}else{
$("#show").html("You have reached the min "+i.get('min'));
}
});
//
});
function closeAlertBox(){
window.setTimeout(function () {
$("#myAlert").removeClass("in")
}, 5000);
}