Implementing the Review View

When the user clicks the Verify Billing button in the billing view, the review view appears, where the user can review the order, including the shipping and billing information. The review view, shown in Listing 28.18, shows the ordered items with totals as well as the shipping and billing information. Figure 28.7 shows the rendered review view.

Figure 28.7 The review view allows the customer to review the order.

Notice that all the information displayed is still coming from the Customer object inside the scope. The shipping information comes from customer.shipping[0], the billing information comes from customer.billing[0], and the product list comes from customer.cart. When the customer clicks the Make Purchase button, this information is sent to the webserver, and a new order object is created. The view then changes to the orders view.

Listing 28.18 review.html: Implementing the partial order review template

Click here to view code image

01 <div id="reviewContainer">
02   <div class="listItem" ng-repeat="item in customer.cart"
03     ng-init="product=item.product[0]">
04     <img class="listImg" ng-click="setProduct(product._id)"
05          ng-src="../images/{{product.imagefile}}" />
06     <span class="prodName">{{product.name}}</span>
07     <span >
08       <span class="price">{{product.price|currency}}</span>
09       <label class="quantity">{{item.quantity}}</label>
10       <label class="quantity">Quantity</label>
11     </span>
12   </div><hr>
13   <div>
14     <span>Shipping</span>
15     <span class="price">{{shipping|currency}}</span>
16   </div><hr>
17   <div>
18     <span>Total</span>
19     <span class="price">{{cartTotal()|currency}}</span>
20   </div><hr>
21   <div>
22     <div class="review">
23       Shipping:<br>
24       {{customer.shipping[0].name}}<br>
25       {{customer.shipping[0].address}}<br>
26       {{customer.shipping[0].city}},
27       {{customer.shipping[0].state}}
28       {{customer.shipping[0].zip}}<br>
29     </div>
30     <div class="review">
31       Billing:<br>
32       {{customer.billing[0].cardtype}} ending in
33       {{customer.billing[0].number.slice(-5,-1)}}<br>
34       {{customer.billing[0].address[0].name}}<br>
35       {{customer.billing[0].address[0].address}}<br>
36       {{customer.billing[0].address[0].city}},
37       {{customer.billing[0].address[0].state}}
38       {{customer.billing[0].address[0].zip}}<br>
39     </div>
40   </div>
41   <div>
42     <span class="button" ng-click="makePurchase()">
43       Make Purchase
44     </span>
45     <span class="button" ng-click="setContent('products.html')">
46       Continue Shopping
47     </span>
48   </div>
49 </div>