Creating the AJAX Shopping Cart
We??™ll AJAXify the shopping cart in two steps. First we??™ll implement the AJAX features to the Add
to Cart buttons, which update the shopping cart and the cart summary box without reloading
the page. Then we??™ll enhance the shopping cart page.
Figure 13-3 shows the shopping cart summary box while being updated after clicking an
Add to Cart button. Note the ???Updating...??? text that shows up in the cart summary box to indicate
the cart is being updated. Figure 13-4 shows the shopping cart while removing a product.
Figure 13-3. Adding a product to the cart
CHAPTER 13 ?– IMPLEMENTING AJAX FEATURES 412
Figure 13-4. Updating the shopping cart
Enhancing the Add to Cart Feature with AJAX
You saw in Figure 13-2 what we??™re about to create here. The implementation is relatively simple.
You??™ll update the product.tpl and products_list.tpl templates to call a JavaScript function
named addProductToCart() when an Add to Cart button is clicked to submit the form.
Then you??™ll create ajax.js, a rather large JavaScript file that contains all the code required
to support the new client functionality. It contains the following functions:
??? createXmlHttpRequestObject() creates the XMLHttpRequest object.
??? handleError(message) displays the error messages generated by the other functions or
degrades to classical non-AJAX behavior, depending on the value of a variable named
showErrors.
Pages:
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529