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

Transcript

1. What about commerce?
2. SPEED Amazon found that every 100ms of latency cost them 1% in sales (billion dollars). What about commerce?
3. SCALABILITY Many brands make the most of their revenues during the seasonal spikes (BFCM). What about commerce?
4. SECURITY The PCI compliance scope reduces drastically when done on the client side. What about commerce?
5. Let's see it in action!
6. https://contentful-gatsby-demo.netlify.com/ Demo
7. REQUIREMENTS 1. Multi catalog 2. Multi language 3. Multi currency 4. Multi warehouse Fast, scalable, and secure by design. Demo
8. Demo
9. Demo
10. Demo
11. Demo
12. Demo
13. Demo
14. Demo
15. Demo
16. Demo
17. Demo
18. Demo
19. Demo
20. Demo
21. Demo
22. Demo
23. Demo
24. Checkout (open-source) Demo
25. How it works
26. TOOLS 1. Contentful (content) 2. Commerce Layer (commerce) 3. Netlify (delivery) Built with Gatsby. How it works
27. Content vs Commerce
28. Content vs commerce
29. Commerce Content Content vs commerce
30. • All content is managed through Contentful. • Commerce Layer makes that content shoppable. Content vs commerce
31. Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M
32. Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M SKU
33. UI Extension
34. Content model (Contentful) Country Catalog Category Options Variant Product N:1 N:M N:M N:1 N:M
35. Content model (Contentful) Country Catalog Category Options Variant Product Market N:1 N:M N:M N:1 N:M
36. What is a market?
37. Business model (Commerce Layer)
38. EU Market US Market IT FR US Choose your country
39. Market scope
40. Static vs Dynamic
41. Static vs dynamic
42. Dynamic Static Static vs dynamic
43. Content can be built upfront with a static site generator (like Gatsby). Static vs dynamic
44. Commerce can be added dynamically through the API (with Javascript) Static vs dynamic
45. It's just that simple
46. Putting it together
47. The Stack
48. Scaling up
49. Scaling up
50. REQUIREMENTS 1. More countries (30) 2. More languages (5) 3. More products (2K) Same speed. Scaling up
51. 30 countries 5 languages 300K pages 2K products x = x Option 1: one large build https://brand.com/<country>/<language>/<product>
52. 30 sites 2 languages per country 2K products 4K pages per site x = x Option 2: many parallel builds https://<country>.brand.com/<language>/<product>
53. Adding more integrations
54. Enhanced stack
55. Demo: https://contentful-gatsby-demo.netlify.com/ Repo: https://github.com/commercelayer/contentful-gatsby-demo