Customize this Vue-based headless frontend at will
Shopware PWA offers a headless frontend for Shopware 6, based on the Vue Storefront Next framework. Thanks to Vue, customizing components both in look & feel and in functionality becomes a breeze. This training gives you a deep dive on how to practically get started with your Shopware 6 PWA frontend.
14+
Hours of video
73
Lessons
410
Pages
Your teacher Jisse Reitsma
Jisse is a familiar face in the Shopware community: He worked together with Shopware to create a series of videos (totalling 24 hours) to help Magento developers on-board Shopware. Besides this, he also worked together with Rico Neitzel to put together an official Shopware training curriculum. And he has contributed to numerous Shopware extensions in the past years.
Pick your On-Demand Shopware video course
And you can start right away
On-Demand Solo
€
0
(USD 0)
per year per individual
- Full access to this course
- More than 14+ hours of video
- Student notes of 410+ pages
- Learn at your own pace
On-Demand Bulk
€
749
(USD 788)
per year per individual
- Access to 47+ hours of Shopware courses
- Student notes of 4325+ pages
- Ideal if you want to grasp everything
On-Demand Premium
€
2399
(USD 2526)
per year for an agency
- Everything under On-Demand Bulk
- Costing €9 per hour (or lower) per person
- Continuously upgrade your teams knowledge
Or go for a teacher-led session
Because everyone has different needs
Agency
In-House
per training per agency
- Everything under On-Demand Standard
- Economical for groups of 5 and more
- Freely debate company-specific topics
- On-site at your company office
Agency
Online
per training per agency
- Everything under On-Demand Standard
- Ideal for online or hybrid teams
- Recordings available afterwards
- Online via Zoom, Teams or similar
Shopware training topics
Explore your topics of choice
- Vocabulary
- Introducting Shopware PWA
- Development tools
- Shopware PWA installation
- Configuration
- Configuration of domains
- PWA commands
- Different modes for going to production
- shopware-pwa plugins command
- Package overview
- Combined sources
- Vue basics
- Simple counter
- Dynamic listing
- Composition API
- Simple counter with the Composition API
- ref, reactive, computed and toRef
- Composables in Shopware PWA
- Watching values
- Dealing with Vue slots
- State management
- Vue partials
- Nuxt.js introduction
- Installing Nuxt.js
- Nuxt.js theming
- Nuxt.js architecture
- NuxtJS Configuration
- Nuxt.js modules
- NuxtJS plugins
- Customize routing
- NuxtJS content module
- First steps into Shopware PWA theming
- Creating page layouts
- Views
- Overriding a component
- Working with Storefront UI
- Override the footer
- CSS styling
- Addding Google fonts
- Overriding Storefront UI components
- Change meta-data
- Creating a local plugin
- Using Shopware plugins in the PWA
- Creating a Shopware plugin for PWA
- Working with PWA slots
- Extend the navigation menu
- Adding layouts and pages via your PWA plugin
- Overriding remote PWA plugins
- Using settings in your plugin
- Interacting with the Shopware APIs
- shopware.stoplight.io
- Examples of using the Store API
- Setting API defaults
- Using the API
- Creating a Store API Route
- First peek at CMS architecture
- Overriding a CMS Block
- Overriding a CMS Element
- Jumbotron example
- Customizing the category page
- Customizing the product page
- Using product functions
- Checkout overview
- Disable cart notifications
- Interceptors
- Deployment
- AJAX calls with SSR
- Adding the right context
- Deployment with SSG
- Deployment with SSR
- Building a PWA without Shopware PWA
- Troubleshooting
- Best practices
This course has been updated for compatibility with Shopware 6.6 and Vue 3
Or browse through all lessons in our courseware portal
We are constantly updating our courseware, but the following is a real-life snapshot
Vocabulary
04m 33s
Introducting Shopware PWA
07m 04s
Development tools
06m 20s
Shopware PWA installation
27m 47s
Configuration
11m 17s
Configuration of domains
07m 58s
PWA commands
12m 37s
Different modes for going to production
09m 13s
shopware-pwa plugins command
06m 35s
Package overview
04m 40s
Combined sources
03m 44s
Vue basics
15m 12s
Simple counter
08m 50s
Dynamic listing
13m 12s
Composition API
16m 55s
Simple counter with the Composition API
07m 45s
ref, reactive, computed and toRef
14m 16s
Composables in Shopware PWA
08m 18s
Watching values
04m 25s
Dealing with Vue slots
18m 37s
State management
13m 27s
Vue partials
Nuxt.js introduction
04m 49s
Installing Nuxt.js
06m 06s
Nuxt.js theming
13m 56s
Nuxt.js architecture
07m 08s
NuxtJS Configuration
09m 45s
Nuxt.js modules
14m 25s
NuxtJS plugins
17m 46s
Customize routing
12m 01s
NuxtJS content module
First steps into Shopware PWA theming
10m 13s
Creating page layouts
07m 40s
Views
21m 25s
Overriding a component
09m 04s
Working with Storefront UI
18m 50s
Override the footer
29m 42s
CSS styling
14m 10s
Addding Google fonts
06m 40s
Overriding Storefront UI components
07m 58s
Change meta-data
14m 20s
Creating a local plugin
13m 22s
Using Shopware plugins in the PWA
32m 07s
Creating a Shopware plugin for PWA
13m 46s
Working with PWA slots
09m 13s
Extend the navigation menu
25m 13s
Adding layouts and pages via your PWA plugin
07m 47s
Overriding remote PWA plugins
09m 27s
Using settings in your plugin
20m 23s
Interacting with the Shopware APIs
16m 25s
shopware.stoplight.io
02m 18s
Examples of using the Store API
19m 19s
Setting API defaults
16m 10s
Using the API
21m 21s
Creating a Store API Route
30m 18s
First peek at CMS architecture
21m 17s
Overriding a CMS Block
11m 28s
Overriding a CMS Element
10m 16s
Jumbotron example
25m 40s
Customizing the category page
06m 06s
Customizing the product page
27m 21s
Using product functions
37m 29s
Checkout overview
15m 31s
Disable cart notifications
Interceptors
Deployment
10m 45s
AJAX calls with SSR
19m 13s
Adding the right context
Deployment with SSG
Deployment with SSR
Building a PWA without Shopware PWA
09m 48s
Troubleshooting
Best practices
These videos are available as an On-Demand video training (with notes). See the pricing for details.
This course has been updated for compatibility with Shopware 6.6 and Vue 3
Target group
- Technical merchants
- Frontend developers
These trainings form a pressure cooker of what a developer would otherwise learn in a yearSabine de Vos (Modern Minds)
Requirements
- Experience with Shopware 6 Admin Panel
- Experience with Vue fundamentals (binding syntax, slots, routing, Vuex, perhaps even NuxtJS)
- Skilled in JavaScript
These are the options we give you
At your place or ours?
Everyone learns at her/his own pace. We provide both in-house training and public training throughout Europe - whatever suits your team best. When 3 or more developers are attending, a custom training is often more economical. Contact us for more details.
You'll get courseware
Every workshop is accompanied with official Yireo coursematerial. Attendees are sent a digital version of this material after the training. It contains slides, comments and references. Additionally, our GitHub repos contain numerous more code samples.
Online classrooms
Online trainings are also our training: Via Zoom or Google Hangout sessions, our teacher is able to connect with your team. The benefit here is that the team is able to connect from various places itself as well, timeframes are more flexible. Afterwards, a video recording will be shared with all attendees for reference.
On-demand self-paced training
This training is also available as an On-Demand training: Via numerous video lessons, including accompanying student notes (equalling a book on their own), you'll learn about the topics in your own pace. And when you bump into questions, you can fall back to the teachers guidance.
I have made use of Yireo its full range of both on-demand courses as well as classroom courses during my development career. Yireo its courses provide me with just that extra that no other courses have yet been able to: the encouragement to think outside the box.Isolde van Oosterhout (Sols Webdesign)
Customer quotes
The training made pure abstraction manageable and digestible Marko Beenink (Mountain IT)
Jisse gives cool training courses that you can put to good use in practice. Besides being informative, it is also fun to listen to. Roy van Os (Active Ants)
Jisse explains the relevant technology in an understandable way that is very useful in practice. The training is intensive, at a high level and of great added value because important concepts are made clear and you receive many useful tips. Oscar Hilbelink (Madia)
Yireo could be the right partner for you
We have trained 5000+ developers in numerous disciplines since 2005
- Professional training at affordable prices
- Truely active with numerous open source projects in the community
- Trainings, bootcamps, hackathons, events
- Passionate, enthousiastic, knowledgable in the right combination
Some of the customers that we have trained in the past years
Frequently Asked Questions
There is a minimum number of attendees listed. What does this mean?
When this course is organized in the form of a classroom-training, it is only held if there is a minimum number of attendees. This number is usually 4 but sometimes we bring this down to 2 or 3. This minimum number simply means that if a class is not "full", either you get a refund or your ticket is transferred to another date. With On-Demand courses (video courses), this number is not applicable.
Do you have any PPP discount available?
Yes, we do have a PPP (Purchasing Power Parity) discount available. Just enter `PPP` as a coupon code and the discount will be applied to your cart. We are using the Big Mac Index to recalculate prices. Note that - when ordering for a specific PPP rate - the country that you're entering in your billing address needs to match the exact country that you are visiting from (in other words: your IP needs to match the country you say you're from).
