Blog Post‎ > ‎

How to Implement a Pure JavaScript Online Store?

posted Mar 27, 2014, 5:03 PM by Julian Zhu   [ updated Mar 27, 2014, 5:06 PM ]
The benefit of a running a pure client-side JavaScript online store is obvious:
  • light-weight
  • drop and run in seconds anywhere
  • no database

It is appropriate for:

  • small businss: small online store with a small collection of products
  • using Paypal or Google Wallet Services, or both


First of all, we will need to define data types (or classes) in JavaScript.

Here is an example of data type "Sku" - please notice the object oriented pattern we are using in JavaScript.

/**
 * Class: Sku defines a product
 */
function Sku(locale, id, name, soldby,pictures, sdesc, mdesc, ldesc, unit, msrp, prices, shipping, ppid, ranking, score) {

    this.locale = locale;
    this.id = id;    // sku number
    this.name = name;
    this.soldby = soldby;
    this.pictures = pictures;
    this.sdesc = sdesc;
    this.mdesc = mdesc;
    this.ldesc = ldesc;
    this.unit = unit;
    this.msrp = msrp;    // MSRP price
    this.prices = prices;
    this.shipping = shipping;
    this.ppid = ppid; // paypal ID
    this.ranking = ranking;        // editor's ranking
    this.score = score;        // search matching score.

}

We are also going to define more data type, such as SkuGroup so that we can instantiate later to group skus in different categories.

Secondly, Manually instantiate classes and populate our store data.

var Skus = [

new Sku( 

    # data for sku 1 goes here ...

),

new Sku(    

    # data for sku 2 goes here ...
),
new Sku( 

    # data for sku n goes here ...

)];

Finally, let's build front-end pages for store. 

We will need to have two core pages:

1) product list page: list.html

2) product detail page: detail.html

We can leverage the power of the JavaScript and use these pages dynamically by attaching parameters. Here are two core functions that can be used to parse parameters:

// A global array to store parameter pairs (key=val)

var G_HTTP_PARAMS = new Array();


/**
 * Private - called only once (to parse parameters)
 */
function parseRequest() {

    var search = document.location.search;
    var host =  (document.location.hostname).toLowerCase();

    if(search.length == 0) {
        return;
    }

    search = search.substring(1, search.length);

    var pairs = search.split("&", 10);

    var j = 0;
    for(var i=0; i < pairs.length; i ++) {
        var keyvalue = pairs[i].split("=", 2);
        //alert(keyvalue.length);
        if(keyvalue.length == 2) {
            G_HTTP_PARAMS[j] = new Parameter(keyvalue[0], keyvalue[1]);
            j++;
        }
    }
    //alert(G_HTTP_PARAMS.length);
}

function getParameter(key) {
    for(var i=0; i < G_HTTP_PARAMS.length; i++) {
        if(G_HTTP_PARAMS[i].key == key) {
            return G_HTTP_PARAMS[i].value;
        }
    }
    return null;
}

So list.html can be used to list products that meet certain criteria depending on the parameter attached to the URL. For example:

list.html (without any paramter): logic can be implemented to list all products (pagination logic applies)

list.html?gid=2: logic can be implemented to list all products in group 2.

detail.html?sku=3: logic can be implemented to display detail info for sku (id=3).


Now you are ready to integrate your JavaScript code (list.html, and detail.html) with Paypal or Google

Google Wallet logo

Comments