Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Filippo's slides (How to build an ecommerce site on the JAMstack with Contentful and Commerce Layer)
Search
Contentful Webinars
December 05, 2019
Technology
0
120
Filippo's slides (How to build an ecommerce site on the JAMstack with Contentful and Commerce Layer)
Contentful Webinars
December 05, 2019
Tweet
Share
More Decks by Contentful Webinars
See All by Contentful Webinars
Product release roundup: Winter ‘22 edition
contentful
0
42
The real magic behind digital experiences: Powering cross-team workflows with Contentful and Netlify Deploy Previews
contentful
0
200
Comment ACE Hôtel a transformé la gestion de son contenu digital
contentful
0
48
Composing a modern digital platform
contentful
0
170
Product release roundup: fall ’21 edition
contentful
0
45
Build with speed with AWS Amplify and Contentful
contentful
0
240
Product Demo: Agile Ecommerce
contentful
0
290
Stop worrying and start shipping with structured content
contentful
0
110
Contentful and E2X: Implementing MACH Masterclass
contentful
0
54
Other Decks in Technology
See All in Technology
Getting started with controlling LEGO using Swift
hcrane
0
140
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
270
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
500
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3k
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
290
中学生でもわかる深層学習
e869120
10
2.7k
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
750
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
700
生成AIサービスPanorama AIご説明資料
sdt
0
300
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Infographics Made Easy
chrislema
237
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Why Our Code Smells
bkeepers
PRO
330
56k
The Cult of Friendly URLs
andyhume
73
5.6k
Making Projects Easy
brettharned
106
5.4k
Navigating Team Friction
lara
177
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Clear Off the Table
cherdarchuk
82
310k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Transcript
What about commerce?
SPEED Amazon found that every 100ms of latency cost them
1% in sales (billion dollars). What about commerce?
SCALABILITY Many brands make the most of their revenues during
the seasonal spikes (BFCM). What about commerce?
SECURITY The PCI compliance scope reduces drastically when done on
the client side. What about commerce?
Let's see it in action!
https://contentful-gatsby-demo.netlify.com/ Demo
REQUIREMENTS 1. Multi catalog 2. Multi language 3. Multi currency
4. Multi warehouse Fast, scalable, and secure by design. Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Checkout (open-source) Demo
How it works
TOOLS 1. Contentful (content) 2. Commerce Layer (commerce) 3. Netlify
(delivery) Built with Gatsby. How it works
Content vs Commerce
Content vs commerce
Commerce Content Content vs commerce
• All content is managed through Contentful. • Commerce Layer
makes that content shoppable. Content vs commerce
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M SKU
UI Extension
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M
Content model (Contentful) Country Catalog Category Options Variant Product Market
N:1 N:M N:M N:1 N:M
What is a market?
Business model (Commerce Layer)
EU Market US Market IT FR US Choose your country
Market scope
Static vs Dynamic
Static vs dynamic
Dynamic Static Static vs dynamic
Content can be built upfront with a static site generator
(like Gatsby). Static vs dynamic
Commerce can be added dynamically through the API (with Javascript)
Static vs dynamic
It's just that simple
Putting it together
The Stack
Scaling up
Scaling up
REQUIREMENTS 1. More countries (30) 2. More languages (5) 3.
More products (2K) Same speed. Scaling up
30 countries 5 languages 300K pages 2K products x =
x Option 1: one large build https://brand.com/<country>/<language>/<product>
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>
Adding more integrations
Enhanced stack
Demo: https://contentful-gatsby-demo.netlify.com/ Repo: https://github.com/commercelayer/contentful-gatsby-demo