cartjs

View on GitHub

CARTJS Simple JQuery Cart

#DEMO

https://jay0324.github.io/cartjs/demo/

#Item Inquiry/Order button

<!-- list inquiry btn -->
<div class="list_inquiry_box">
    <label>Qty:</label>
    <input type="number" class="pro-quantity-field" pro-no="{item No}" value="1" min="1" />
    <a href="#" class="inquiry_btn" pro-no="{item No}" pro-name="{item Name}" pro-price="{item Price}"></a>
    <div class="clear"></div>
</div>

#Form input field

<!-- Send the fields that program need -->
<div class="inquiries_container">
    <label for="inquiries_block">
    	<i class="fa fa-shopping-cart" aria-hidden="true"></i> Check Out List
    </label>
    <div id="inquiries_block" class="list-wrapper"></div>
    <input id="enquiries_data" type="hidden" name="enquiries" value="" />
</div>

#Jquery cartjs plugin

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	
<!-- carjs -->
<link href="{path_to_cartjs}/cartjs.min.css" rel="stylesheet" type="text/css" />
<script id="cartscript" src="{path_to_cartjs}/cartjs.min.js"></script>

<script>
	$(function(){
		$.simplecart();
	})
</script>

#Custom Setup

$.simplecart({
	mode: (String)(Mode: Shopping Cart: cart (default), Inquiries: inq),
    debug: (Boolean)(Console form value:Hide: false (default), Show: true),
    storageType: (String)(Storage: tmp per windows: session(default), tmp for browser: local),
    storageName: (String)(storage name: simplestorage (default)),
    checkoutUrl: (String)(check out form url: checkout.html(default)),
    format: (String)(submit data: json: json(default), str: custom data defined by tmp->custom-submit-msg),
    tmp: {
    	(obj)(UI text and template)

        "quantity": 'Qty.',
        "currency": '$',
        "price": 'Price',
        "no": 'No',
        "name": 'Name',
        "clearCartBtn": 'Remove All',
        "submitBtn": "Check out",
        "deleteBtn": '<span class="icon-trash"></span> Remove',
        "no-item": "Nothing in Cart!",
        "tmpString1": 'Order {var1} products, total {var2} items / subtotal {var3}',
        "tmpString2": 'Inquire {var1} products, total {var2} items',
        "tmpString3": '<span class="icon-envelope"></span> Inquiries</span>',
        "tmpString4": '<span class="icon-shopping-cart"></span> Subtotal (total {var1})',
        "tmpString5": '{var1} Checkout',
        "tmpString6": 'Send Inquiries',
        "custom-submit-msg": 'Product: {name} / Qty: {quantity} / Price: {price||format_price} \n'
    }

})

#Note

“dist” folder contains require files，just copy this folder to your site root, and do the setup as above

#chinese version tmp:

tmp: {
    "quantity": '數量',
    "currency": '$',
    "price": '價格',
    "no": '編號',
    "name": '品名',
    "clearCartBtn": '全部清空',
    "submitBtn": "訂購",
    "deleteBtn": '<span class="icon-trash"></span> 刪除',
    "no-item": "目前尚無任何項目!",
    "tmpString1": '詢問 {var1} 項商品, 共 {var2} 件 / 總金額 {var3}',
    "tmpString2": '詢問 {var1} 項商品, 共 {var2} 件',
    "tmpString3": '<span class="icon-envelope"></span> 送出詢問函</span>',
    "tmpString4": '<span class="icon-shopping-cart"></span> 結帳 (總計 {var1})',
    "tmpString5": '{var1} 結帳',
    "tmpString6": '送出詢問函',
    "custom-submit-msg": '品名: {name} 數量: {quantity} 價格: {price||format_price} \n'
}

#Clear storage

for web form submition, after submit the data to server side, you need to manually clear the storage. The easy way to do it is to create a page with the code to trigger the [clearAll_btn] button event

//clear storage only
$(".clearAll_btn").click();

//optional to clear storage and then return to anypage you want
//it has a count down message to indicate sec to return
//put this to html:
//<center>Thanks for your Inquiry, we will redirect for you in <span id="count">5</span>sec!</center>
$(".clearAll_btn").click();var i = 5;setInterval(function(){$("#count").text(i);i--;},1000);setTimeout(function(){window.location = 'RETURN_PAGE_URL';},5000);