JavaScript Application Cookbook

Step 5: Changing the Order/Checking Out

When the user is either out of cash or doesn’t see anything else desirable, it’s time to head for the door. Clicking the “View/Change Bag” link opens the screen, similar to that in Figure 8.8. The user’s shopping bag has to do more than just display his or her selections. Consider all the requirements:

• Display each product and its category, PLU number, and price per unit.

• Provide an interactive form to change product quantities, delete product selections, and recalculate product costs.

• Display running totals including the total for each product and quantity, the subtotal, and any applicable taxes.

It probably doesn’t surprise you to know, then, that there are also several functions ready and waiting to accommodate these Shopping Bag needs. They are as follows:

showBag()

Display the contents of the shopping bag.

genSelect()

Generate dynamic select lists to change product quantities.

runningTab()

Manage the calculation and display of any prices or costs.

numberFormat()

Ensure accurate calculations and consistent displays in 0.00 format.

round()

Ensure accurate calculations.

changeBag()

Remove product selections from and change product quantities of the user’s shopping bag.

Function showBag() gets the call as soon as the user follows the link. Look at lines 135-198:

function showBag() { if (shoppingBag.things.length == 0) { alert("Your bag is currently empty. Put some stuff in."); return; } gimmeControl ...