We have added some JavaScript code and an HTML form containing checkboxes next to each item name to the item-cd-blues.html, item-cd-dance.html, ..., item-record-classical.html files.
When the customer wants to add an item to the list of items they are going to order, they check the checkbox next to the item's name. If they wish to remove the item from the list, they uncheck the checkbox.
New or modified code is displayed in bold text.
<html>
<head>
<base target="contentFrame">
<script language="JavaScript">
function orderItem(checked, id, name, price) {
if(checked) {
top.myOrderList.addItem("CDs", id, name, price);
} else {
top.myOrderList.removeItem(id);
}
}
top.myOrderList.itemsVisible = true;
</script>
</head>
<body onLoad="top.myOrderList.checkItems();">
<form name="itemForm">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td><input type="checkbox" name="Item11"
onClick="orderItem(this.checked, 11, 'Led Zeppelin - Remasters', '30.00');"> </td>
<td><a href="item-0011.html">Led Zeppelin - Remasters</a></td>
</tr>
<tr>
<td><input type="checkbox" name="Item1"
onClick="orderItem(this.checked, 1, 'Penyon - Some People', '10.00');"> </td>
<td><a href="item-0001.html">Penyon - Some People</a></td>
</tr>
<tr>
<td><input type="checkbox" name="Item12"
onClick="orderItem(this.checked, 12, 'The Sisters Of Mercy - Vision Thing', '30.00');"> </td>
<td><a href="item-0012.html">The Sisters Of Mercy - Vision Thing</a></td>
</tr>
</table>
</form>
</body>
</html>
|
Only the source of item-cd-rock.html is listed here.
A checkbox has been inserted to the left of each item. When the user checks or unchecks it, the orderItem function is called. This function calls either the addItem or removeItem method of the myOrderList object, depending on whether the checkbox is being checked or unchecked.
When this file is loaded, the myOrderList.itemsVisible flag is set to true, indicating that a list of items is being displayed. Additionally, the myOrderList.checkItems() method is called to check the checkboxes next to any items that have already been selected.
myOrderList.itemsVisible and myOrderList.checkItems() are discussed in greater detail the next section.
There are a number of things worth noting about this file:
The product type passed to the addItem method of the myOrderList object is a literal string. When the list of items selected is printed, this string is used to determine which heading to list the items under.
The checkboxes have names in the form "Itemn" where n is the numeric item id. This id has not been padded out to four digits, but it would work just as well if it were. It is important that the names start with four letters ("Item") as this is relied on in the myOrderList.checkItems() method.
The onClick event of each checkbox calls the orderItem function. The name of the item is passed as a single-quoted string (eg: 'Penyon - Some People') therefore if there are single quotes in the name, they must be escaped by insering a backslash (\) before them. If double quotes, ampersands or other symbols for which there are HTML codes are desired in a product name, the appropriate HTML code must be inserted instead (eg: " or &).
The item prices are passed as strings. This is an easy way to make the correct number of decimal places appear when the list of selected items is printed out.
This tutorial has been translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.
This tutorial has been translated to Slovak by Juraj Rehorovsky from Coupofy team.
If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome, either in Bitcoins to 19QpWDmZPmTqawcr8VsXcbdc4Znq1ecrza, or via PayPal.
