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.
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.
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>