A simple one page Customer space (full)

Your customer will be able to log in, look and modify his personnal data and see a list of his/her current offers and past actions.

The source code is entirely made of html + javascript. (1 main page + 3 fragments loaded in ajax). The code uses JQuery.

Source code

This source code is composed of 4 files, right-click save file for each of them in a new empty folder

  • index.html, The main content file, with the javascript utility functions
  • login.html, first fragment displayed with login/pass request
  • member.html, fragment with member & event history data display
  • editMember.html, third fragment, for editing customer info (example of update/save).

After downloading the source code, change the variables baseurl, apikey, username and password, then run this page locally on your computer or webserver
Again, this code is only for educational purpose, in production code MUST NOT include your apikey, login and pass in client source code !

Some explanations (the source code is fully documented)

The main js function that wraps API calls is api(). It creates a json_header for authentication, then pass the data, and accept an on success method.

index.html is the only complete page. A JQuery init call populates the main content within the login page

This page is a classical login/password form, whose submit call is redirected to an apicall that try to find a customer (aka FidelityMember) with the given login & password. On success, the logMeIn function is called and then switches the content with the content of member.html


/**
        * send a request to the API
        * @param data, what to be sent
        * @param success, onSuccess function
        * @param ctype can be POST or PUT for get or persist datat if null, POST is used
        */
function api(data, success,ctype) {
        $("#loading").css("display", "inline");	
        // connexion variables
        var apikey = "Your key";
        var username="your user id";
        var password="your user password";
        // todo add a loading 
        if (ctype==null) ctype="POST";
        $.ajax({
                type: ctype,
                url: "/apiv1/webapi.do",				
                beforeSend: function(xhr){	// add basic Auth to our call
                        xhr.setRequestHeader("Authorization",
                        "Basic " + btoa(apikey+";"+username + ":" + password));
                },
                data: data,
                success: success
        });
}

Once logged in, some other api requests are made to list the offers for examples


/** load offer example */
function loadCoupons() {
        var data = {
                json_data: "{Sent: {type: 'COUPON', member: { id: '" + fm.id + "'}, or:{status2_is_null: 'true', status2: '0'}}}"
        };
        api(data, function (data) {

                var array = [];


                for (var i = 0; i < array.length; i++) {
                        var d = new Date(array[i]["date"]);
                        var day = d.getDate();
                        var month = d.getMonth() + 1; //Months are zero based
                        var year = d.getFullYear();
                        var date = day + "/" + month + "/" + year;						
                        //[do some formating here, see code for complete script]
                }
                $("#couponZone").append(table);
                if (array.length == 0) {
                        var div = ">No Coupons...";
                        $("#couponZone").append(div);
                }
        });
}

Notice

This is sample code only, for educationnal purpose it should not be used as is in production environement. E.g.password should be encrypted, not stored in plain text in the JS function, https is recommended etc...