/
store.js
131 lines (121 loc) · 3.9 KB
/
store.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
//Javascript file for question #5
//MooTools documentation can be found at www.mootools.net
var products = [];
function getCategories(callback){
var categoryRequest = new Request({
url:'processAHR.php?action=load',
format:'json',
onSuccess:function(responseText){
var categoryJson = JSON.decode(responseText);
setupCategories(categoryJson.categories);
}
});
categoryRequest.send();
}
function getProducts(catid, callback){
var productRequest = new Request({
url:'processAHR.php?action=loadProducts&catid='+catid,
format:'json',
onSuccess:function(responseText){
productData = JSON.decode(responseText);
Array.each(productData.storeData, function (item,index,object){
setProduct(item.item_id,item);
});
setupProducts(productData.storeData);
}
});
productRequest.send();
}
function setupProducts(products){
$('item').getElements('option').destroy();
Array.each(products, function(item,index,object){
var option = new Element('option', {value:item.item_id});
option.appendText(item.name + ' - $' + item.price);
$('item').appendChild(option);
});
$('item').fireEvent('change');
}
function getProduct(productId){
return products[productId];
}
function setProduct(productId, product){
products[productId] = product;
}
function setupProduct(product){
$('description').set('html',product.description);
$('product-image').getElement('img').set('src', product.image);
$('product-name').set('html', product.name+": $"+product.price);
}
function setupCategories(categories){
$('category').getElements('option').destroy();
Array.each(categories, function(item,index,object){
var option = new Element('option', {value:index});
option.appendText(item);
$('category').appendChild(option);
});
$('category').fireEvent('change');
}
function init(){
$('category').addEvent('change', function(){
var catid = $('category').get('value');
getProducts(catid);
});
$('item').addEvent('change', function(){
var itemId = $('item').get('value');
setupProduct(getProduct(itemId));
});
$('add-to-cart').addEvent('click', function(){
var itemId = $('item').get('value');
var cartItemEntry = new Element('tr');
var itemNameData = new Element('td');
itemNameData.appendText(products[itemId].name);
var itemPriceData = new Element('td');
itemPriceData.appendText('$'+products[itemId].price);
var removeLinkColumn = new Element('td');
var removeButton = new Element('a');
removeButton.appendText('Remove');
removeButton.set('href','#');
removeButton.addEvent('click', function(){
//remove the parent tr
removeButton.getParent().getParent().destroy();
redrawCart();
});
var hiddenProductInput = new Element('input');
hiddenProductInput.set('type', 'hidden');
hiddenProductInput.set('name', 'products[]');
hiddenProductInput.set('value', itemId);
removeLinkColumn.appendChild(removeButton);
removeLinkColumn.appendChild(hiddenProductInput);
cartItemEntry.appendChild(itemNameData);
cartItemEntry.appendChild(itemPriceData);
cartItemEntry.appendChild(removeLinkColumn);
$('shopping-cart').getElement('tbody').appendChild(cartItemEntry);
redrawCart();
});
$('checkout').addEvent('click',function(){
alert('TODO: checkout');
return false;
});
getCategories();
};
function redrawCart(){
if ($('shopping-cart').getElement('tbody').getElements('tr').length <= 0){
$('shopping-cart').setStyle('display','none');
$('empty-shopping-cart').setStyle('display', 'block');
}
else {
$('shopping-cart').setStyle('display','table');
$('empty-shopping-cart').setStyle('display', 'none');
}
recalculateCartTotal();
}
function recalculateCartTotal(){
var total = 0;
Array.each($('shopping-cart').getElements('input'), function(item,index,object){
var productId = item.get('value');
total += productData[productId-1].price;
});
$('shopping-cart').getElement('.cart-total').set('html','$'+total);
}
window.addEvent('domready',init);
window.addEvent('domready',redrawCart);