SlideShare a Scribd company logo
1 of 44
Headless CMS for Magento
using Hyvä and Storyblok
34. Magento Meetup Austria (19.10.2022)
matthias-zeis.com
@mzeis
Matthias Glitzner-Zeis
Presentation will be available
CTO @
LIMESODA
Today’s topics
▪ The background story
▪ What’s Hyvä?
▪ What’s Storyblok?
▪ Combining Magento, Hyvä and Storyblok
▪ Examples
▪ Conclusion
The background story
How did we get here?
The background story
▪ We took over the maintenance of a Magento 2 shop…
The background story
▪ Some projects planned:
▪ Big new B2B feature / web app
▪ Integrate existing website into webshop
▪ Upgrade Magento 2.2.x > 2.4.x
▪ …
▪ … and a pretty tight hard deadline!
▪ What to do?
The background story
Challenge Solution How?
Timeline is too tight - neither Netural
nor we could finish everything by
ourselves
B2B feature requires functionality in
■ Magento customer area
■ custom web app for merchant
employees
Integration of website requires creation
of many custom content elements
Avoid Luma / “old” Magento 2 frontend
stack whenever possible
The background story
Challenge Solution How?
Timeline is too tight - neither Netural
nor we could finish everything by
ourselves
Decouple and parallelize work between
■ LIMESODA and Netural
■ Magento & non-Magento devs
Use:
■ Agile methods, common tools
■ Tailwind CSS & Alpine.js
■ Web APIs
B2B feature requires functionality in
■ Magento customer area
■ custom web app for merchant
employees
Integration of website requires creation
of many custom content elements
Avoid Luma / “old” Magento 2 frontend
stack whenever possible
The background story
Challenge Solution How?
Timeline is too tight - neither Netural
nor we could finish everything by
ourselves
Decouple and parallelize work between
■ LIMESODA and Netural
■ Magento & non-Magento devs
Use:
■ Agile methods, common tools
■ Tailwind CSS & Alpine.js
■ Web APIs
B2B feature requires functionality in
■ Magento customer area
■ custom web app for merchant
employees
■ Use common, popular tech stack
■ Share design system
■ Possibly share HTML/CSS/JS
■ Use REST APIs for communication
■ One design system / UI kit
■ Hyvä: Tailwind CSS & Alpine.js
■ Magento: Standard REST-API
■ Custom web app: REST-API
Integration of website requires creation
of many custom content elements
Avoid Luma / “old” Magento 2 frontend
stack whenever possible
The background story
Challenge Solution How?
Timeline is too tight - neither Netural
nor we could finish everything by
ourselves
Decouple and parallelize work between
■ LIMESODA and Netural
■ Magento & non-Magento devs
Use:
■ Agile methods, common tools
■ Tailwind CSS & Alpine.js
■ Web APIs
B2B feature requires functionality in
■ Magento customer area
■ custom web app for merchant
employees
■ Use common, popular tech stack
■ Share design system
■ Possibly share HTML/CSS/JS
■ Use REST APIs for communication
■ One design system / UI kit
■ Hyvä: Tailwind CSS & Alpine.js
■ Magento: Standard REST-API
■ Custom web app: REST-API
Integration of website requires creation
of many custom content elements
Use CMS where we can parallelize
■ design
■ frontend templating
■ wiring of backend
■ Storyblok as Headless CMS
■ Content data model by Netural
■ Design & code HTML
without Magento knowledge
■ Easy content element creation
Avoid Luma / “old” Magento 2 frontend
stack whenever possible
The background story
Challenge Solution How?
Timeline is too tight - neither Netural
nor we could finish everything by
ourselves
Decouple and parallelize work between
■ LIMESODA and Netural
■ Magento & non-Magento devs
Use:
■ Agile methods, common tools
■ Tailwind CSS & Alpine.js
■ Web APIs
B2B feature requires functionality in
■ Magento customer area
■ custom web app for merchant
employees
■ Use common, popular tech stack
■ Share design system
■ Possibly share HTML/CSS/JS
■ Use REST APIs for communication
■ One design system / UI kit
■ Hyvä: Tailwind CSS & Alpine.js
■ Magento: Standard REST-API
■ Custom web app: REST-API
Integration of website requires creation
of many custom content elements
Use CMS where we can parallelize
■ design
■ frontend templating
■ wiring of backend
■ Storyblok as Headless CMS
■ Content data model by Netural
■ Design & code HTML
without Magento knowledge
■ Easy content element creation
Avoid Luma / “old” Magento 2 frontend
stack whenever possible
■ Don’t build new functionality with
old tech stack
■ Hyvä with inverted fallback logic
What’s Hyvä?
Magento 2 frontend re-imagined
What’s Hyvä?
▪ Custom theme for Magento 2
▪ Same render logic (Layout XML, blocks)
▪ Templates re-implemented with Tailwind CSS and Alpine.js
▪ Core principles:
▪ reduced complexity
▪ improved performance
▪ improved developer experience
▪ improved development velocity
▪ reduced dependencies
▪ reduced learning curve
▪ One-time license fee (€ 1.000 excl. VAT)
What’s Storyblok?
Headless CMS for Magento 2
What’s Storyblok?
▪ Headless CMS
▪ Definable content types
▪ Definable reusable components
▪ Visual editor
▪ Live preview
▪ Content delivery API (REST, GraphQL)
▪ Advanced features
(nested components, workflows, custom field types, apps, …)
▪ Prices starting from € 90,75 / month
Combining Magento, Hyvä and Storyblok
Knot all ends together
Combining Magento, Hyvä and Storyblok
▪ Storyblok integration module by Media Lounge
github.com/Media-Lounge/magento2-storyblok-integration
▪ Does the heavy lifting for you:
▪ Router
▪ Basic block class and template conventions
▪ Helper methods (WYSIWYG, image transformation)
▪ Caching
▪ Google Sitemap integration
Combining Magento, Hyvä and Storyblok
▪ First steps:
▪ Create Storyblok account and “Space”
▪ Install Magento module
▪ Configure
▪ Magento (API Key, Webhook secret)
▪ Storyblok (Webshop URLs for envs, Webhook URL and secret for cache
cleaning)
▪ Create a Storyblok content type (e.g. a “page”)
and a component (e.g. a “headline”)
▪ Create a first page, containing a “headline” component
▪ Create a Magento template file for the “headline” component
Examples
…. Please could we see something?
Conclusion
How did it work out?
Conclusion
▪ Easy and fun to use, versatile
▪ Media Lounge module is a great starting point
▪ Some additions and fixes were necessary:
▪ Multi-language implementation (using “Dimensions” app) with
▪ language subfolders
▪ hreflang / alternate tags
▪ language switch
▪ Homepage configurable
▪ Compatibility with Hyvä theme fallback
▪ Cache cleaning
▪ Everything finished within the timeline, client is happy :-)
matthias-zeis.com
@mzeis
Questions?
Presentation will be available
We are hiring - limesoda.com/karriere
Icons: © Dave Gandy - Flaticon

More Related Content

What's hot

Projeto Meio Ambiente
Projeto Meio AmbienteProjeto Meio Ambiente
Projeto Meio Ambiente
Marly Correa
 
Tecido de revestimento celula vegetal
Tecido de revestimento   celula vegetalTecido de revestimento   celula vegetal
Tecido de revestimento celula vegetal
Shirlane Macedo Silva
 
Projeto Integrado - O rio Tietê de ontem e de hoje
Projeto Integrado - O rio Tietê de ontem e de hojeProjeto Integrado - O rio Tietê de ontem e de hoje
Projeto Integrado - O rio Tietê de ontem e de hoje
juvarela
 
Planos de aulas o correto
Planos de aulas  o corretoPlanos de aulas  o correto
Planos de aulas o correto
familiaestagio
 

What's hot (20)

Plantas medicinais
Plantas medicinaisPlantas medicinais
Plantas medicinais
 
Slides da aula de Biologia (Renato) sobre Folha
Slides da aula de Biologia (Renato) sobre FolhaSlides da aula de Biologia (Renato) sobre Folha
Slides da aula de Biologia (Renato) sobre Folha
 
Projeto Meio Ambiente
Projeto Meio AmbienteProjeto Meio Ambiente
Projeto Meio Ambiente
 
Educação Ambiental Infantil
Educação Ambiental InfantilEducação Ambiental Infantil
Educação Ambiental Infantil
 
Projeto Alimentação Saudável
Projeto Alimentação SaudávelProjeto Alimentação Saudável
Projeto Alimentação Saudável
 
Ciências Moleculares e Celulares.pdf
Ciências Moleculares e Celulares.pdfCiências Moleculares e Celulares.pdf
Ciências Moleculares e Celulares.pdf
 
Implantação da horta escolar em uma escola pública
Implantação da horta escolar em uma escola públicaImplantação da horta escolar em uma escola pública
Implantação da horta escolar em uma escola pública
 
V.4 Angiospermas - raiz, caule e folha
V.4 Angiospermas - raiz, caule e folhaV.4 Angiospermas - raiz, caule e folha
V.4 Angiospermas - raiz, caule e folha
 
Plantas Medicinais
Plantas MedicinaisPlantas Medicinais
Plantas Medicinais
 
Tecido de revestimento celula vegetal
Tecido de revestimento   celula vegetalTecido de revestimento   celula vegetal
Tecido de revestimento celula vegetal
 
Gimnospermas
GimnospermasGimnospermas
Gimnospermas
 
Caule
CauleCaule
Caule
 
Apostila terminais
Apostila terminaisApostila terminais
Apostila terminais
 
Apresentacao de plantas medicinais
Apresentacao de plantas medicinaisApresentacao de plantas medicinais
Apresentacao de plantas medicinais
 
Projeto Integrado - O rio Tietê de ontem e de hoje
Projeto Integrado - O rio Tietê de ontem e de hojeProjeto Integrado - O rio Tietê de ontem e de hoje
Projeto Integrado - O rio Tietê de ontem e de hoje
 
Estudo das Folhas- Biologia
Estudo das Folhas- BiologiaEstudo das Folhas- Biologia
Estudo das Folhas- Biologia
 
3 flor
3 flor3 flor
3 flor
 
Planos de aulas o correto
Planos de aulas  o corretoPlanos de aulas  o correto
Planos de aulas o correto
 
POO - 03 - Alocação de Memória em Java
POO - 03 - Alocação de Memória em JavaPOO - 03 - Alocação de Memória em Java
POO - 03 - Alocação de Memória em Java
 
PROJETO CURSO DE RECICLAGEM DE PNEUS USADOS
PROJETO CURSO DE RECICLAGEM DE PNEUS USADOSPROJETO CURSO DE RECICLAGEM DE PNEUS USADOS
PROJETO CURSO DE RECICLAGEM DE PNEUS USADOS
 

Similar to Headless CMS for Magento using Hyvä and Storyblok

SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer Story
Mavention
 

Similar to Headless CMS for Magento using Hyvä and Storyblok (20)

JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
 
Vue Storefront MUG
Vue Storefront MUGVue Storefront MUG
Vue Storefront MUG
 
Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlify
 
How to create a Vue Storefront theme
How to create a Vue Storefront themeHow to create a Vue Storefront theme
How to create a Vue Storefront theme
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
 
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
[RakutenTechConf2013] [E-2] HTML5 in Rakuten[RakutenTechConf2013] [E-2] HTML5 in Rakuten
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
 
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
 
The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud
 
Old code doesn't stink - Detroit
Old code doesn't stink - DetroitOld code doesn't stink - Detroit
Old code doesn't stink - Detroit
 
Contribution day guide. MLEU 2019
Contribution day guide. MLEU 2019Contribution day guide. MLEU 2019
Contribution day guide. MLEU 2019
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer Story
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer Story
 
Dust.js
Dust.jsDust.js
Dust.js
 
HTML 5
HTML 5HTML 5
HTML 5
 
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
PWA - The Future of eCommerce - Magento Meetup Ahmedabad 2018
 
Building a Headless Shop
Building a Headless ShopBuilding a Headless Shop
Building a Headless Shop
 
MidwestPHP - Getting Started with Magento 2
MidwestPHP - Getting Started with Magento 2MidwestPHP - Getting Started with Magento 2
MidwestPHP - Getting Started with Magento 2
 
Yoav Kutner Dutchento
Yoav Kutner DutchentoYoav Kutner Dutchento
Yoav Kutner Dutchento
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 

More from Matthias Glitzner-Zeis

More from Matthias Glitzner-Zeis (8)

What's new in Magento 2.2?
What's new in Magento 2.2?What's new in Magento 2.2?
What's new in Magento 2.2?
 
Magento News @ Magento Meetup Wien 19
Magento News @ Magento Meetup Wien 19Magento News @ Magento Meetup Wien 19
Magento News @ Magento Meetup Wien 19
 
Magento News @ Magento Meetup Wien 18
Magento News @ Magento Meetup Wien 18Magento News @ Magento Meetup Wien 18
Magento News @ Magento Meetup Wien 18
 
Magento News @ Magento Meetup Wien 17
Magento News @ Magento Meetup Wien 17Magento News @ Magento Meetup Wien 17
Magento News @ Magento Meetup Wien 17
 
Migrating from Magento 1 to Magento 2 @ Magento Meetup Wien
Migrating from Magento 1 to Magento 2 @ Magento Meetup WienMigrating from Magento 1 to Magento 2 @ Magento Meetup Wien
Migrating from Magento 1 to Magento 2 @ Magento Meetup Wien
 
How to migrate from Magento 1 to Magento 2
How to migrate from Magento 1 to Magento 2How to migrate from Magento 1 to Magento 2
How to migrate from Magento 1 to Magento 2
 
Migrating from Magento 1 to Magento 2
Migrating from Magento 1 to Magento 2Migrating from Magento 1 to Magento 2
Migrating from Magento 1 to Magento 2
 
Outlook on Magento 2
Outlook on Magento 2Outlook on Magento 2
Outlook on Magento 2
 

Recently uploaded

一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
AS
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
apekaom
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
A
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
c6eb683559b3
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
A
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
A
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
B
 
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
AS
 
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
Fir
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
hfkmxufye
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
AS
 

Recently uploaded (20)

Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
 
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
 
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
Dan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat HoodieDan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat Hoodie
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
 
Washington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers ShirtWashington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers Shirt
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
 
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
一比一原版(Design毕业证书)新加坡科技设计大学毕业证原件一模一样
 
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
 
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
 

Headless CMS for Magento using Hyvä and Storyblok

  • 1. Headless CMS for Magento using Hyvä and Storyblok 34. Magento Meetup Austria (19.10.2022)
  • 3. Today’s topics ▪ The background story ▪ What’s Hyvä? ▪ What’s Storyblok? ▪ Combining Magento, Hyvä and Storyblok ▪ Examples ▪ Conclusion
  • 4. The background story How did we get here?
  • 5. The background story ▪ We took over the maintenance of a Magento 2 shop…
  • 6. The background story ▪ Some projects planned: ▪ Big new B2B feature / web app ▪ Integrate existing website into webshop ▪ Upgrade Magento 2.2.x > 2.4.x ▪ … ▪ … and a pretty tight hard deadline! ▪ What to do?
  • 7. The background story Challenge Solution How? Timeline is too tight - neither Netural nor we could finish everything by ourselves B2B feature requires functionality in ■ Magento customer area ■ custom web app for merchant employees Integration of website requires creation of many custom content elements Avoid Luma / “old” Magento 2 frontend stack whenever possible
  • 8. The background story Challenge Solution How? Timeline is too tight - neither Netural nor we could finish everything by ourselves Decouple and parallelize work between ■ LIMESODA and Netural ■ Magento & non-Magento devs Use: ■ Agile methods, common tools ■ Tailwind CSS & Alpine.js ■ Web APIs B2B feature requires functionality in ■ Magento customer area ■ custom web app for merchant employees Integration of website requires creation of many custom content elements Avoid Luma / “old” Magento 2 frontend stack whenever possible
  • 9. The background story Challenge Solution How? Timeline is too tight - neither Netural nor we could finish everything by ourselves Decouple and parallelize work between ■ LIMESODA and Netural ■ Magento & non-Magento devs Use: ■ Agile methods, common tools ■ Tailwind CSS & Alpine.js ■ Web APIs B2B feature requires functionality in ■ Magento customer area ■ custom web app for merchant employees ■ Use common, popular tech stack ■ Share design system ■ Possibly share HTML/CSS/JS ■ Use REST APIs for communication ■ One design system / UI kit ■ Hyvä: Tailwind CSS & Alpine.js ■ Magento: Standard REST-API ■ Custom web app: REST-API Integration of website requires creation of many custom content elements Avoid Luma / “old” Magento 2 frontend stack whenever possible
  • 10. The background story Challenge Solution How? Timeline is too tight - neither Netural nor we could finish everything by ourselves Decouple and parallelize work between ■ LIMESODA and Netural ■ Magento & non-Magento devs Use: ■ Agile methods, common tools ■ Tailwind CSS & Alpine.js ■ Web APIs B2B feature requires functionality in ■ Magento customer area ■ custom web app for merchant employees ■ Use common, popular tech stack ■ Share design system ■ Possibly share HTML/CSS/JS ■ Use REST APIs for communication ■ One design system / UI kit ■ Hyvä: Tailwind CSS & Alpine.js ■ Magento: Standard REST-API ■ Custom web app: REST-API Integration of website requires creation of many custom content elements Use CMS where we can parallelize ■ design ■ frontend templating ■ wiring of backend ■ Storyblok as Headless CMS ■ Content data model by Netural ■ Design & code HTML without Magento knowledge ■ Easy content element creation Avoid Luma / “old” Magento 2 frontend stack whenever possible
  • 11. The background story Challenge Solution How? Timeline is too tight - neither Netural nor we could finish everything by ourselves Decouple and parallelize work between ■ LIMESODA and Netural ■ Magento & non-Magento devs Use: ■ Agile methods, common tools ■ Tailwind CSS & Alpine.js ■ Web APIs B2B feature requires functionality in ■ Magento customer area ■ custom web app for merchant employees ■ Use common, popular tech stack ■ Share design system ■ Possibly share HTML/CSS/JS ■ Use REST APIs for communication ■ One design system / UI kit ■ Hyvä: Tailwind CSS & Alpine.js ■ Magento: Standard REST-API ■ Custom web app: REST-API Integration of website requires creation of many custom content elements Use CMS where we can parallelize ■ design ■ frontend templating ■ wiring of backend ■ Storyblok as Headless CMS ■ Content data model by Netural ■ Design & code HTML without Magento knowledge ■ Easy content element creation Avoid Luma / “old” Magento 2 frontend stack whenever possible ■ Don’t build new functionality with old tech stack ■ Hyvä with inverted fallback logic
  • 12. What’s Hyvä? Magento 2 frontend re-imagined
  • 13. What’s Hyvä? ▪ Custom theme for Magento 2 ▪ Same render logic (Layout XML, blocks) ▪ Templates re-implemented with Tailwind CSS and Alpine.js ▪ Core principles: ▪ reduced complexity ▪ improved performance ▪ improved developer experience ▪ improved development velocity ▪ reduced dependencies ▪ reduced learning curve ▪ One-time license fee (€ 1.000 excl. VAT)
  • 15. What’s Storyblok? ▪ Headless CMS ▪ Definable content types ▪ Definable reusable components ▪ Visual editor ▪ Live preview ▪ Content delivery API (REST, GraphQL) ▪ Advanced features (nested components, workflows, custom field types, apps, …) ▪ Prices starting from € 90,75 / month
  • 16. Combining Magento, Hyvä and Storyblok Knot all ends together
  • 17. Combining Magento, Hyvä and Storyblok ▪ Storyblok integration module by Media Lounge github.com/Media-Lounge/magento2-storyblok-integration ▪ Does the heavy lifting for you: ▪ Router ▪ Basic block class and template conventions ▪ Helper methods (WYSIWYG, image transformation) ▪ Caching ▪ Google Sitemap integration
  • 18. Combining Magento, Hyvä and Storyblok ▪ First steps: ▪ Create Storyblok account and “Space” ▪ Install Magento module ▪ Configure ▪ Magento (API Key, Webhook secret) ▪ Storyblok (Webshop URLs for envs, Webhook URL and secret for cache cleaning) ▪ Create a Storyblok content type (e.g. a “page”) and a component (e.g. a “headline”) ▪ Create a first page, containing a “headline” component ▪ Create a Magento template file for the “headline” component
  • 19. Examples …. Please could we see something?
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 43. Conclusion ▪ Easy and fun to use, versatile ▪ Media Lounge module is a great starting point ▪ Some additions and fixes were necessary: ▪ Multi-language implementation (using “Dimensions” app) with ▪ language subfolders ▪ hreflang / alternate tags ▪ language switch ▪ Homepage configurable ▪ Compatibility with Hyvä theme fallback ▪ Cache cleaning ▪ Everything finished within the timeline, client is happy :-)
  • 44. matthias-zeis.com @mzeis Questions? Presentation will be available We are hiring - limesoda.com/karriere Icons: © Dave Gandy - Flaticon