12 Adding e-commerce capabilities using the Jamstack

After 11 chapters on Hugo and the Jamstack, we have a complete, fast, and modern corporate website. We can use it to present any content, authored and managed as Markdown documents, with a custom theme. We can offer dynamic surveys, a fuzzy search on the client with support for comments, a contact form, and an embedded single-page application (SPA).

Hugo is applicable in a much wider variety of use cases. A documentation website is relatively static. A portfolio page or a media website needs image manipulation (Hugo Pipes), and the rest is all static content. An educational website is all about presenting content. This chapter will use what you’ve learned to build another website domain suited for the Jamstack—e-commerce. An e-commerce domain has many static pieces like product pages that need to provide excellent load performance and require user-specific shopping cart management. This makes it an ideal use case for utilizing the entire Jamstack.

12.1 Creating e-commerce pages

12.1.1 Creating the product content view

12.1.2 Building a single product page

12.2 Creating a shopping cart

12.2.1 Creating a cart button in the header

12.2.2 Creating the cart in JavaScript

12.3 Checkout support

12.3.1 Setting up the billing provider

12.3.2 Creating a checkout session

12.3.3 Handling success and failure

12.3.4 Enabling the Buy Now button

12.4 Fulfillment