05: Implement checkout

In this part, you'll learn how to modify server-side state when creating an order.

Add product to cart, server-side

In the previous part of the tutorial, you used a MobX store to update the running application client-side. Now let's store that information to the server as well.

Call the addProductToCart mutation:

// TODO

Notice how this sets the pcart cookie.

Implement UI of checkout page

Real-world checkout is quite complex (billing, shipping, addresses, etc.), we'll implement just a very simplified version here.

Add this to cart.tsx:

// TODO

The page should look like this:

🖼 TODO

Create order

As a final step, let's create an order:

// TODO

Tracking codes on the 'Thank You' page

While this is not the right place to dive into the details, it's worth mentioning that conversion tracking is an important thing to do on the 'Thank You' page. SOFA has great support for advanced marketing features, learn more in the GTM & data layer guide.

---

Summary: At this point, you've done a lot: you created UI from React components, fetched data via GraphQL, mutated state client-side and mutated state server-side. In fact, your basic SOFA e-shop is now ready for testing – let's learn how to use "lab" for that.