Ecommerce on a static site

The dynamic processes (e.g., adding to cart, calculating price) on a static site (no PHP) are archived via JavaScript and currently there are two available libraries: Snipcart (2% payment fee) and simpleCart.js (open source).

Snipcart as a commercial product seems quite popular because it’s easy to setup, even for people without much html/javascript experience, fully customisable and supported, and 2% commission fee doesn’t seem a lot.

However, I am an open-source fan and I decided to try simpleCart. Here are some codes for each section:

Product page

To link the product elements (name, price, etc.) to simpleCart function. Define classes as “simpleCart_shelfItem”, “item_name”, “item_image”, “item_price”, and “item_add”.

1
2
3
4
5
6


<li class="simpleCart_shelfItem">
   <a><center><img src="{{.image}}" alt="{{.title}}"/></center></a><br>
   <img style="display:none;" class="item_image img-responsive" src="{{.thumb}}" /> <!--hidden image can be shown in the cart for each item-->
   <p class="item_name">{{.title}}</p><br>
   <p>€<span class="item_price" align="left">{{.price}}</span><span style="padding: 0 10px; float: right;"><a href="javascript:;" class="item_add"><img src="/images/cart.png" height="18px;"></a></span></p>
</li>

Which looks like this:

When you click the cart icon you got a confirmation through the following script (add to simpleCart.js)

1
2
3


simpleCart.bind( "afterAdd" , function( item ){
  alert( item.get("name") + " 已添加至购物车!" );
});

And you might also want to have a cart icon indicating that the item was added, by define the image (class=“simpleCart_quantity”)

Cart items

To display items in the cart:

1
2
3
4
5


<div class="simpleCart_items" ></div>
Total: <span id="simpleCart_total" class="simpleCart_total"></span> <br>
Shipping: <span id="simpleCart_shipping" class="simpleCart_shipping"></span> (Free Shipping above 1600CNY) <br>
-----------------------------<br />
SUM: <span id="simpleCart_grandTotal" class="simpleCart_grandTotal"></span>

Which looks like:

Here you define the display layout of “simpleCart_items” in the simpleCart.js file (find the line with “cartColumns”)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


cartColumns			: [
	{view: function (item, column) {
	  return"<img src='"+item.get("image")+"'>";},
	  attr: 'image' },
	{ attr: "name", label: "名称" },
	{ attr: "price", label: "单价", view: 'currency' },
	{ view:'input', attr:'quantity', label: "数量" },
	{ attr: "total", label: "合计", view: 'currency' },
	{ view: "remove", text: "移除", label: false }
],

To pre-define the shipping cost, add the below script to the simpleCart.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


simpleCart({
    shippingCustom: function(){ 
         if( simpleCart.total() > 1600 ){
              return 0;
         } else if( simpleCart.total() == 0) {
              return 0;
         } else {
              return 180;
         }
    }
});

Checkout: form forwarding to your Email

You need a form for the user to input their name, email/phone and address, and payment options to select. Once they submit, you will receive an email with the form information (I used formspree to receive submission).

This is archived with following html code;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div id="Order-form">
  <form accept-charset="UTF-8" action="//formspree.io/YOUR-EMAIL-ADDRESS" class="contact-form" method="post">
      <fieldset>
	<p>姓名：<br> 
        <input type='text' name='Name' placeholder='姓名（必填）' required /></p>
	<p>邮箱：<br>
        <input type='text' name='Email' placeholder='邮箱（必填）' pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required /></p>
	<p>电话：<br>	
        <input type='text' name='Phone' placeholder='手机号（必填）' required /></p>
	<p>地址：<br>
        <input type='text' name='Address' placeholder='详细收件地址（必填）' required /></p>
	<p>备注：<br>	
        <textarea type='comments' name='Comments' rows="6" placeholder='备注信息' /></textarea></p>
	<input type='hidden' name='Order' id='getcartitems'></input>
        <input type="hidden" name="_subject" value="New Order from PinWei.DE" />
	<h4 style="color: darkred">请选择付款方式 &nbsp;&nbsp;
	<select id="mySelect" name="Payment" required >
	  <option value="AliPay">支付宝</option>
	  <option value="BankTransfer">银行转账</option>
	</select></h4>
	<small><em>下单后您将会收到账号信息</em></small>
	<hr style="border:dashed #666 1px;">
	<button class="pull-right" type="submit"><h4>确认信息，我要下单!</h4></button>
      </fieldset>
	<input type="hidden" name="_next" value="/success/"/>
  <span class="pull-right" style="font-size: 65%;">
点击'下单'代表您已阅读并接受相关<a alt="terms and policy" href="/terms/"><strong>条款及条件</strong></a>
  </span>
  </form><br>

</div> 

Note that I used an hidden <input> element class (“getcartitems”) to get the items in the cart, for which you need a script:

1
2
3
4
5


<script type="text/javascript">
setInterval(function () {
  document.getElementById("getcartitems").value = document.getElementById("cartitems").innerHTML;
}, 5);
</script>

And you will receive an email forwarded by formspree with all input from the user:

The downside is that the user will not automatically received and confirmation email from the website, but you can direct them to a page after the form had been successfully submitted by define the <input> (type=“hidden” name="_next" value="/success/").

Submission Confirmaion

The confirmation page is returned upon submission of the form. On Amazon it normally shows some similar products. Here we can simply show a thank you sentence and tell the user how to pay.

Pay by PayPal

Currently simpleCart support direct PayPal payment, but only with US dollors. If you take PayPal, you simply insert your paypal email in the JS file and define a button/text (class=“simpleCart_checkout”).

And lastly, to include the jQuery and simpleCart libraries in the header of each page.

1
2


<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/simpleCart.js"></script>