After my 14 hour stint yesterday, i'm back on the trail.
Today i've cooked up a Javascript shopping cart. In true fashion it's all OO, and shiny. However very unlike me, it's JS library agnostic! Yes, thats right, i wrote by very own 'getElementById' staements!. I've only provided methods for adding, removing, and getting the price of all the objects. There is also a method for updating a ordered or unordered list, with the items stored in the object.
Javascript (No Library required!)
//Basket Object
//Library agnostic
var BasketObj = function(){
this.items = new Array();
this.bindToElementId = null
//Add an object to the basket
this.addItem = function( pObj ){
retVal = false;
if( pObj.name.length > 1 ){
this.items.push( pObj );
console.log('Object added to basket');
retVal = true;
}
else{
console.log('Not a valid object');
}
return retVal;
}
//Remove the first matching item from the basket and return it
this.removeItem = function( pItemName ){
var retVal = null;
for(i=0; i < this.items.length; i++){
if( this.items[i].name == pItemName ){
console.log('Object removed from basket')
// reference the obj
retVal = this.items[i];
//dereference it
this.items[i] = null;
//exit the loop
break;
}
}
return retVal;
}
//Calculate the total basket value
this.total = function(){
var retVal = 0.00;
for(i=0; i < this.items.length; i++){
retVal += this.items[i].price;
}
return retVal;
}
//Updates the gui display of the object
this.updateDisplay = function(){
if( this.bindToElementId != null ){
//Empty the element first
document.getElementById( this.bindToElementId ).innerHTML = '';
//Sort the array before we print
//this.items.sort();
//Now proceed to fill it
for(i=0; i < this.items.length; i++){
document.getElementById( this.bindToElementId ).innerHTML += '<li>' + this.items[i].name + '</li>';
}
}
}
}
To use it, you must first create the object,
x = new BasketObj();
Once thats done you can set it up, the only thing that you really need to set, is the id name of the object you wish to have the results shown in. This is store in a variable called
bindToElementId.
x.bindToElementId = 'basketList';
Now you can add your objects to it. Your objects can be as complex as you want, however they must have the following properties,
name: This is the display name for the object, and the name that will be used for internal lookups
price: This is the value that will be added to create your total,
You use the
addItem() to add items to the object, and the
removeItem( nameOfObject ) to remove items.
To update your list with the current objects you call
updateDisplay. And to get the total value of all the objects you can call
total().
One other thing to mention, is that i use console.log statements, so be aware of those, and also i check for the name attribute before adding objects to the internal array, so don't try and add them, and prototype the method to your object later on.
Anyways, this object features in my DFTI coursework, which i've been streaming though over this past weekend, i've now implemented the Drag and drop shopping and it looks a little something like this...
I still have to do the admin page, and stock control logic, however imagine this could be done in a day or so.
