Content Rich e-commerce on the JamStack

by Nick DeJesus

About Me

  • DX Engineer at Prismic
  • OSS Maintainer: use-shopping-cart
  • Sponsored by Stripe
  •  Loves JamStack space
  • Also fan of React Native
  • Pro Fighting Gamer (Tekken)

Syllabus

Day 1 (2 hours)

Landing Page and Product Catalog

  1. Learning about the JamStack
  2. Setting up for the workshop
  3. Learning about Next JS + Prismic
  4. Creating pages and slices

Day 2 (2 hours)

E-commerce, Checking out and Netlify Features

  1. Securely Checking out
  2. Netlify Features
  3. Q&A

What is the JamStack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.

Built on top of the core concepts of pre-rendering and decoupling

Pre-rendering

 The front end is prebuilt into highly optimized static pages and assets during a build process. The pre-rendering process results in a JamStack site that can be served from a CDN. This is more cost effective, reduces the complexity of hosting and makes things less risky compared to dynamic servers as infra.

Decoupling

The process of creating a clean separation between systems or services. This allows JamStack developers to use APIs during build time or even after hosting. This allows for portability and flexibility as well as more security.

Why Jamstack?

Security

JamStack removes multiple systems from the hosting infrastucture, less surface area to attack.

Scalability

CDN makes serving pages less complex, no logic or work flow for determining what can be cached or when

Performance

Pages are readily available

Importance of Content-Rich Experiences

  • More information about your products is assuring to shoppers before a purchase
  • High-quality images enhance the shopping experience.
  • Storytelling - You want to be able to share stories about your product. 

Rich Content = Higher Conversions

This Workshop

The Tech Stack

Next JS for JamStack Framework

Theme UI for component library and theming

Prismic for CMS

Stripe for Payments

use-shopping-cart (my library)

Netlify for . . . many things

Hosting, dev server, serverless functions, contact forms, auth, split testing and more

Setting Up

Follow the README to get set up:

https://github.com/dayhaysoos/smashing-mag-workshop#readme

Steps and Walkthroughs

Instead of writing everything from scratch, there will be lots of things pre-emptively setup.  We'll be uncommenting a lot of the working code instead. 

 

Use the search feature to look for "Walkthrough <number>" to get a description of what's already been set up.

 

Example: Search "Walkthrough 1" and then "Walkthrough 2" 

Do the same search for "Steps <number>" when you're ready to make changes.

Next JS

  • Leading React framework
  • Hybrid Static Site Generation and Server Side Rendering
  • File System Routing
  • No config needed for optimization

Theme UI

Component Library for creating themeable interfaces on constraint-based design principles.

https://theme-ui.com/

Using Theme UI

export const theme = {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

Theme Object determines what styles get applied

The sx prop

import { Box } from 'theme-ui'

export default (props) => (
  <Box sx={{ color: 'primary' }}>
  {...things that go in here}
  </Box>
)

To access the styles in your theme, you use theme-ui components and pass your styles to the sx prop

Prismic

Prismic is a CMS that's focused on making websites easier to edit for everyone, not just developers.

  1. Developers create the models for pages and components. These are called "Custom Types".
  2. Content teams (or clients) then can create content based on these models.
  3. Developers build websites and components to render by querying for the data on the Prismic repo.

Everyone is happy :)

Time to code!

Day 2

Today we'll be going over Netlify features,  Stripe and use-shopping-cart.

Required:

  • Stripe account test API keys

Stripe

  • Payment Processing Platform
  • They sponsor me on GitHub
  • Thorough, easy-to-use API
  • Incredible Documentation
  • Big changes on the way

use-shopping-cart

  • Library that handles essential shopping cart state and logic
  • Why Stripe Sponsors me
  • Built with Redux
  • Framework agnostic
  • Amazing

use-shopping-cart api

  • addItem()
  • handleCartClick()
  • cartCount
  • setItemQuantity()
  • validateCartItems()

Netlify Features

  • Serverless Functions
  • Split Testing
  • Environment Variables
  • Authentication
  • Plugin Ecosystem
  • Analytics 

Serverless Functions

You can deploy server-side code that acts as API endpoints. They run automatically in response to events or processes more complex jobs in the background.

In this workshop, we use a serverless function called redirect-to-checkout

redirect-to-checkout notes

This is a typical call to Stripe's API with a few parts to it.

 

  • validateCartItems() for querying Prismic and checking to make sure the prices are correct
  • Typical Stripe API call to create a "session"
  • We use server side routing method to redirecto to Stripe's hosted Checkout

Stripe Checkout

Easy to use, hosted solution for processing payments. Fast, secure and always improving.

Made with Slides.com