| In this exercise, you will add a Remove button to remove the item from the shopping cart. So far, you have only one item in your store. However, you are building a scaleable application, so you want to be able to handle many different products. Therefore, you will build a method that will search through the entire shopping cart for the item the user wants to remove. In this task, you will see how the architecture of encapsulating the functionality into separate methods, as you did in the previous task makes this task easier. Now you can easily use the search method to search through the entire shopping cart to find the item you wish to delete. 1. | Return to EComm.mxml and locate the first VBox that displays the information about the first grocery product. Just after the Add To Cart button, add another button with the label of Remove From Cart and a click event that will call the deleteProd() method. Pass the object at the first index of the groceryInventory ArrayCollection, cast as a Product, as follows.
<mx:Button label="Remove from Cart" click ="deleteProd(groceryInventory.getItemAt(0) as Product)"/>
This will call a method you will soon write in the EComm.mxml file and pass it the product that should be deleted. Be aware, at this point you are hard coding this to only use the first product. In a later lesson, when you are creating all the products dynamically, you will update this so it can delete any product you have in the cart.
| 2. | Still in EComm.mxml, locate the script block, and add a new method with the name of deleteProd(), which takes a single argument, named product and the data type of Product. Set the return type to void. Inside of this method, call the soon to be written removeItem() method from the cart object. The deleteProd() method should look as follows:
private function deleteProd(product:Product):void{ cart.removeItem(product); }
This method asks the cart to remove the specified product.
| | | 3. | Return to the ShoppingCart class and add a new method with the name of removeItem(), which accepts an argument named prod of the data type Product. Inside this method, create a new ShoppingCartItem variable, with the name of item which contains the prod.
public function removeItem(prod:Product):void{ var item:ShoppingCartItem = new ShoppingCartItem(prod); }
If you remember, you earlier wrote the getItemInCart() method to find any particular Product in the cart, but, it requires that you pass it a ShoppingCartItem, not just a product. To be able to use that method, you are temporarily creating a new ShoppingCartItem, which contains that product.
| 4. | Create a second ShoppingCartItem instance, with the name of sci, and set it equal to the results of a call to your getItemInCart() method. Use an if statement to check if the sci variable is not equal to null. If it is, use the cursor's remove() method to delete the product at that cursor location. Finally, call the calcTotal() method of the cart. Your final removeItem() method should look as follows:
public function removeItem(prod:Product):void{ var item:ShoppingCartItem = new ShoppingCartItem(prod); var sci:ShoppingCartItem = getItemInCart(item); if(sci != null){ cursor.remove(); } calcTotal(); }
Remember that the getItemInCart() method that you wrote earlier searches the cart for a ShoppingCartItem that contains a particular product and returns that item. When you call that method, the cursor will move to the matching location in the aItems ArrayCollection. Once the cursor is there, you can use the cursor's remove() method to delete the item at that location.
As a best practice, you should verify whether the item being passed in matches the item found in the cart. If the result (sci) of getItemInCart() is null, no product is matched, so it can not be removed. If you omitted this conditional, and clicked the remove button when there were no items in the cart, a run-time error would be thrown. With this conditional logic in place, you are preventing a potential error.
Finally, you need to recalculate all the items in the cart. Call the calcTotal() method, so the interface can continue to show the new correct total.
| | | 5. | Save and run the application. Add Buffalo to the cart. You should see that you can click the Remove from Cart button to delete Buffalo from the cart and that the total field is updated each time you do this.
|
|
