Filippo's slides (How to build an ecommerce site on the JAMstack with Contentful and Commerce Layer)

Slide 1

Slide 1 text

What about commerce?

Slide 2

Slide 2 text

SPEED Amazon found that every 100ms of latency cost them 1% in sales (billion dollars). What about commerce?

Slide 3

Slide 3 text

SCALABILITY Many brands make the most of their revenues during the seasonal spikes (BFCM). What about commerce?

Slide 4

Slide 4 text

SECURITY The PCI compliance scope reduces drastically when done on the client side. What about commerce?

Slide 5

Slide 5 text

Let's see it in action!

Slide 6

Slide 6 text

https://contentful-gatsby-demo.netlify.com/ Demo

Slide 7

Slide 7 text

REQUIREMENTS 1. Multi catalog 2. Multi language 3. Multi currency 4. Multi warehouse Fast, scalable, and secure by design. Demo

Slide 8

Slide 8 text

Demo

Slide 9

Slide 9 text

Demo

Slide 10

Slide 10 text

Demo

Slide 11

Slide 11 text

Demo

Slide 12

Slide 12 text

Demo

Slide 13

Slide 13 text

Demo

Slide 14

Slide 14 text

Demo

Slide 15

Slide 15 text

Demo

Slide 16

Slide 16 text

Demo

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

Demo

Slide 19

Slide 19 text

Demo

Slide 20

Slide 20 text

Demo

Slide 21

Slide 21 text

Demo

Slide 22

Slide 22 text

Demo

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

Checkout (open-source) Demo

Slide 25

Slide 25 text

How it works

Slide 26

Slide 26 text

TOOLS 1. Contentful (content) 2. Commerce Layer (commerce) 3. Netlify (delivery) Built with Gatsby. How it works

Slide 27

Slide 27 text

Content vs Commerce

Slide 28

Slide 28 text

Content vs commerce

Slide 29

Slide 29 text

Commerce Content Content vs commerce

Slide 30

Slide 30 text

● All content is managed through Contentful. ● Commerce Layer makes that content shoppable. Content vs commerce

Slide 31

Slide 31 text

Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M

Slide 32

Slide 32 text

Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M SKU

Slide 33

Slide 33 text

UI Extension

Slide 34

Slide 34 text

Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M

Slide 35

Slide 35 text

Content model (Contentful) Country Catalog Category Options Variant Product Market N:1 N:M N:M N:1 N:M

Slide 36

Slide 36 text

What is a market?

Slide 37

Slide 37 text

Business model (Commerce Layer)

Slide 38

Slide 38 text

EU Market US Market IT FR US Choose your country

Slide 39

Slide 39 text

Market scope

Slide 40

Slide 40 text

Static vs Dynamic

Slide 41

Slide 41 text

Static vs dynamic

Slide 42

Slide 42 text

Dynamic Static Static vs dynamic

Slide 43

Slide 43 text

Content can be built upfront with a static site generator (like Gatsby). Static vs dynamic

Slide 44

Slide 44 text

Commerce can be added dynamically through the API (with Javascript) Static vs dynamic

Slide 45

Slide 45 text

It's just that simple

Slide 46

Slide 46 text

Putting it together

Slide 47

Slide 47 text

The Stack

Slide 48

Slide 48 text

Scaling up

Slide 49

Slide 49 text

Scaling up

Slide 50

Slide 50 text

REQUIREMENTS 1. More countries (30) 2. More languages (5) 3. More products (2K) Same speed. Scaling up

Slide 51

Slide 51 text

30 countries 5 languages 300K pages 2K products x = x Option 1: one large build https://brand.com///

Slide 52

Slide 52 text

30 sites 2 languages per country 2K products 4K pages per site x = x Option 2: many parallel builds https://.brand.com//

Slide 53

Slide 53 text

Adding more integrations

Slide 54

Slide 54 text

Enhanced stack

Slide 55

Slide 55 text

Demo: https://contentful-gatsby-demo.netlify.com/ Repo: https://github.com/commercelayer/contentful-gatsby-demo