Now it's time to verify that the state of the shopping cart is maintained from the server to the client, as the user adds and removes items from the shopping cart.

Verifying that isomorphic handoff was successfully implemented is straightforward. We simply need to verify that the server-side generated shopping cart page is identical to the client-side generated shopping cart page. By clicking on the shopping cart icon, we can see the client-side generated web page. By clicking on the refresh button while on the shopping cart page, we can see the server-side generated web page.

Starting out, there are no items placed in the shopping cart. Figure 6.7 is a screenshot depicting the shopping cart in its empty state:

The shopping cart page rendered on the client side matches the page rendered on the server side, indicating that the empty state of the shopping cart is maintained properly.

Now, let's visit the product listings page by clicking on the Products link on the navigation bar. Let's add a few items to the shopping cart by clicking on the Add To Cart button. Let's click on the shopping cart icon in the top bar of the website to return to the shopping cart page. Figure 6.8 is a screenshot depicting the shopping cart with some products added:

After checking that the shopping cart page rendered on the client side matches the page rendered on the server side, we can determine that the state of the shopping cart has been maintained successfully.

Now remove all the items from the shopping cart by clicking on the Remove From Cart button on each product. Once the shopping cart is empty, we can perform the same verification step of checking the page rendered on the client side with the page rendered on the server side to determine that the shopping cart state is successfully maintained.

At this point, we can acknowledge that the isomorphic handoff procedure has been implemented successfully for the shopping cart feature.

You may have noticed that as we add items to the shopping cart, a notification is displayed on the lower right-hand side of the screen, as displayed in Figure 6.9. Notice that the notification is displayed at the lower right-hand side of the web page, and it indicates that the product has been successfully added to the shopping cart:

Note that similar notifications also appear when items are removed from the shopping cart. We utilized a cog, a reusable component, to generate this notification. We will cover the implementation of the cog responsible for generating these notifications in Chapter 9, Cogs – Reusable Components.