12 Adding eCommerce capabilities using the Jamstack

 

This chapter covers:

  • Creating product pages for an eCommerce website in Hugo.
  • Adding a shopping cart via JavaScript.
  • Using APIs to handle payments

After 11 chapters on Hugo and the Jamstack, we have a complete, fast, and modern corporate website that can be used to present any content authored and managed as markdown documents, with our own custom theme, dynamic surveys, a fuzzy search on the client with support for dynamic comments, a contact form, an embedded single page application.

Hugo is applicable in a much wider variety of use cases. A documentation website is fairly static. A portfolio page or a media website needs image manipulation (Hugo Pipes), and the rest of it is all static content. An educational website is all about presenting content. In this chapter, we will be using these learnings to get into another website domain that is suited for the Jamstack - eCommerce. ECommerce has a lot of static pieces like the product pages that need to provide great load performance but also require user-specific shopping cart management, which makes it a nice use case for utilizing the entire the Jamstack.

12.1 Creating commerce pages

12.1.1 Creating individual product pages

12.1.2 Creating list pages to render product lists.

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 Enable Buy Now

12.4 Fulfillment

12.4.1 Receiving and verifying webhooks

12.4.2 Getting purchase details

12.4.3 Setting up an email provider

12.4.4 Sending emails

12.4.5 Preparing content to send to the users

12.4.6 Attaching files to email

12.5 Summary