Planning Our Shopping Cart

A shopping cart’s functions

Our store currently lacks any form of checkout process, so we’ll start from scratch as we build our shopping cart. Shopping carts are conceptually very simple—put items in, take items out, and purchase the cart. However, Sneaker23’s sneaker launch process means that we’ll need our shopping cart to go beyond the basics. We need a shopping cart that tells a shopper when an item becomes out-of-stock, so they have a chance to select a different size very quickly.

First, we’ll walk through the requirements of our shopping cart. This will help us stay focused on building the minimal working feature set, and these requirements will drive our acceptance tests. After that, we’ll see our approach to implementing our shopping cart. Finally, we’ll set up our local environment so we can build the feature.

Requirements of a shopping cart

Due to the limited nature of a Sneakers23 release, our shopping cart will be pretty straightforward. The real-time nature of the sneaker launch process will throw a few curveballs into the requirements, though. Here is a list of the features that our final cart will need:

• Add and remove multiple items to the shopping cart.
• Only one of each shoe size can be added.
• Shoppers know when an item in their cart is out of stock.
• The cart persists between page reloads.
• A shopper has a single cart across multiple tabs.
• A shopper cannot check out without using the cart.
• Admins can see what items are in different shopping carts (next section).

We could build our shopping cart many different ways, but we’ll keep it fairly simple—we won’t try to build the perfect shopping cart with a bunch of features. Next, we’ll cover our cart’s architecture, and we’ll see how Channels fit into our design.

Design an application architecture

We must turn our list of requirements into a concrete plan. We’ll do this by thinking about implementing each feature using the tools at our disposal. We’ll need to consider different user behaviors and clean application design throughout our planning.

The most advanced requirement in our shopping cart is out-of-stock notifications. We want shoppers to see that their selected shoe isn’t available, so they can remove the shoe from their cart and add a different size or model. We will leverage Phoenix PubSub to notify the Channel listeners from our Inventory context. Each Channel will send updated data to its connected client when it receives an out-of-stock message. The following figure captures this flow: