6 SportsStore: orders and checkout

This chapter covers

Creating a shopping cart
Using URLs to navigate within the application
Creating and storing customer orders
Using a RESTful web service

In this chapter, I continue adding features to the SportsStore application that I created in chapter 5. I add support for a shopping cart and a checkout process and replace the dummy data with the data from the RESTful web service.

6.1 Preparing the example application

No preparation is required for this chapter, which continues using the SportsStore project from chapter 5. To start the RESTful web service, open a command prompt and run the following command in the SportsStore folder:

npm run json

Open a second command prompt and run the following command in the SportsStore folder to start the development tools and HTTP server:

ng serve --open

Tip

You can download the example project for this chapter—and for all the other chapters in this book—from https://github.com/manningbooks/pro-angular-16. See chapter 1 for how to get help if you have problems running the examples.

6.2 Creating the cart

The user needs a cart into which products can be placed and used to start the checkout process. In the sections that follow, I’ll add a cart to the application and integrate it into the store so that the user can select the products they want.

6.2.1 Creating the cart model

6 SportsStore: orders and checkout

This chapter covers

6.1 Preparing the example application

Tip

6.2 Creating the cart

6.2.1 Creating the cart model

6.2.2 Creating the cart summary components

6.2.3 Integrating the cart into the store

6.3 Adding URL routing

6.3.1 Creating the cart detail and checkout components

6.3.2 Creating and applying the routing configuration

6.3.3 Navigating through the application

6.3.4 Guarding the routes

6.4 Completing the cart detail feature

6.5 Processing orders

6.5.1 Extending the model

6.5.2 Collecting the order details

6.6 Using the RESTful web service

6.6.1 Applying the data source

6.7 Summary