background

Jun 4, 2024 - Jun 7, 2024

Shopware Frontend Bootcamp course

One single week with only Shopware frontending

One single week with only Shopware frontending

Can't miss one developer too long? But you still want to make sure that that developer gets in-depth with Shopware fast? Our bootcamp concept offers a quick solution: A set amount of time to cover numerous topics in a fast pace.

See the details below Or see our Shopware portfolio
roy-van-os.jpg
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)

Details of this bootcamp

Start date
Tuesday, June 4, 2024
End date
Friday, June 7, 2024
Daily times
09:30 - 16:30
Days
4 days
Location
Yireo, Baarn, NL
Minimum of attendees
3
Maximum of attendees
8
Price
€1795 (excluding VAT)
Included
Lunch, snacks, fruit, drinks, goodies, courseware
Contact us for details

Day by day outline

Jun 4, 2024 Day 1

Development setup
Shopware theming basics
Twig templating
SCSS modifications
Jun 5, 2024 Day 2

Practical scenarios
Common pages explained
Checkout and sales pages
Performance tuning
Jun 6, 2024 Day 3

Advanced Twig (extensions)
Performance
JavaScript plugins & overrides
NPM additions
Jun 7, 2024 Day 4

Webpack
Shopware Administration preview
Shopware Apps preview
Shopware Frontends preview

Topics of this bootcamp

Theme initialization Adding a helper plugin CLI commands for themes Debugging tools for frontend developers SCSS creation and overrides Dos and donts with SCSS Removal of SCSS in Shopware 6.6 Not using Bootstrap at all Working with Twig templates and snippets Overriding templates the smart way Dealing with media entities in Twig Translations and localization SEO optimization Referring to snippets Tricks with the Symfony Profiler Twig variables in various scopes Responsive design with Bootstrap Image optimization in Shopware Working with product and category pages Working with cart and checkout pages Customizing CMS Pages, Sections, Blocks and Elements Deployment strategy Performance optimization (CWV, WebP/AVIF, etc) Death to Shopware PWA, long live Shopware Frontends Introduction to the Shopware App System Introduction to Shopware 6 Administration (Vue) Dealing with media entities in Twig Translations and localization SEO optimization Referring to snippets JavaScript plugin creation Async JavaScript loading with Shopware 6.6 Overriding JavaScript plugins Adding JS dependencies with NPM Extending Webpack Image optimization in Shopware Overriding third party plugins Customizing CMS Pages, Sections, Blocks and Elements Deployment strategy Performance optimization (CWV, WebP/AVIF, etc) Death to Shopware PWA, long live Shopware Frontends Introduction to the Shopware App System Introduction to Shopware 6 Administration (Vue)

The following lessons are included in this bootcamp

With this bootcamp, you will get access to all online video lessons as well

Shopware 6 Frontend Development  
Prerequisites  
Terms used in this course  
Development setup   03m 45s
Disable caching  
IDE setup  
Using the Symfony Profiler  
Project and Directory structure  
CLI tools  
Creating a new theme   09m 22s
Theme configuration  
Theming structure  
Explaining the theme.json file   11m 52s
Theme inheritance  
Working with assets  
Translations  
Understanding Twig templating   18m 43s
Debugging Twig templates  
Twig filters   08m 38s
Shopware-specific Twig tags   13m 59s
Twig template overrides  
Working with assets in Twig  
Remove the phonenumber from the contact form   24m 07s
Adding a custom field to the footer   14m 03s
Overriding a logo   17m 09s
Using an SVG logo   09m 30s
Working with variables in Twig  
CSS strategy  
Hot Module Reloading   12m 38s
Introducing SCSS   10m 22s
Internals of SCSS compilation  
Modifying SCSS variables   22m 39s
Working with Twitter Bootstrap   16m 08s
Using theme.json variables in SCSS and Twig   37m 27s
Working with assets in CSS  
Responsive webdesign  
Adding FontAwesome icons  
Using Tailwind instead of Bootstrap  
Snippets  
Customizing the product details page  
Adding a Custom Field to the product page  
Adding a property to the product page  
Adding a tab to the product detail page  
Customizing the category page  
Adding a custom field to a category  
Customizing the homepage  
Accessing the request in Twig  
Modifying the checkout  
Adding a custom field to the checkout  
Add a custom block with a shipping method  
Cart architecture   11m 00s
Order state machines  
Introduction to payment handlers   18m 21s
Modifying the revocation policy  
Performance metrics  
Caching strategies  
Optimizing images  
CSS & JS bundling  
Using a CDN  
Minify HTML  
Optimizing fonts  
Using @Routes  
Customizing email templates  
Working with CMS content  
Using media entities  
Using flatpickr for the birthday field   50m 24s
Adding global Twig variables  
Adding a custom Twig filter  
Add a middle name to a customer form  
Add a custom block with a shipping method  
Development tips  
Setting up PHPStorm   13m 03s
Using a logger   11m 25s
Using Redis   10m 50s
What Will Be Covered?  
Development setup  
Creating a theme  
Exercise: Create a theme  
Creating a plugin   05m 44s
Exercise: Create a plugin  
Twig essentials  
Exercise: Override some Twig template  
Adding new Twig variables  
Using theme.json variables in SCSS and Twig   37m 27s
Using plugin variables (config.xml)  
Adding global Twig variables  
Adding a custom Twig filter  
Adding a custom Twig function  
Extending the page  
Pages and Pagelets  
Extending the footer pagelet  
Using the StorefrontRenderEvent  
Add a middle name to a customer form  
JavaScript in the Storefront  
Adding JavaScript to your Shopware plugin   27m 17s
Compiling custom NPM packages  
Using theme variables in JavaScript   37m 27s
Dealing with Viewports in your Shopware JavaScript   07m 18s
JavaScript in the Storefront  
Exercise: Compile JS sources  
Adding JavaScript to your Shopware plugin   27m 17s
Exercise: Create a custom JS plugin  
Using jQuery  
Using plugin variables in JS  
Debugging JavaScript  
Overriding an existing JavaScript plugin   06m 15s
Overriding the OffCanvasCartPlugin options  
Overriding Tiny Slider  
Dealing with JavaScript events in Shopware 6   27m 56s
Common JavaScript utilities  
Using AJAX in the Shopware storefront   20m 49s
Dealing with Viewports in your Shopware JavaScript   07m 18s
Using the DOM in your Shopware JS plugin   07m 24s
Webpack essentials  
Adding NPM packages to your JavaScript plugin   26m 16s
Adding TypeScript  
Introduction to Shopware Apps  
App manifest.xml  
Introduction to Shopware PWA  
Get your ticket for this bootcamp now
Jisse Reitsma

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.

Target group

Target group

  • Technical merchants
  • Trainees or interns
  • Webdesigners
  • Frontend developers
  • Junior backend developers
Requirements

Requirements

  • Experience with Shopware 6 Admin Panel
  • An installation of Shopware 6 running locally
  • Basic knowledge of object-oriented PHP
  • Skilled in HTML and CSS, preferably SCSS

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.

background

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

Customer quotes

As a newcomer to the Magento world, the Magento academy has given me a solid foundation for Magento 2. I benefit greatly from this in my daily work as a Frontend Developer. In addition, lunch was always well taken care of and you did not lack anything during the training sessions! Kevin de Bie (MaxServ)
This academy covered everything that Magento 2 has to offer. No stone was left unturned. Definitely recommended if you want to gain experience in the world of Magento, whether you are a junior or a senior developer who is just entering the world of Magento. Kevin van Welzenis (Vendic)
Jisse understands how you can put your brain to work and keep you constantly on the edge of your seat Kayne Spikker (Modern Minds)
Read more quotes of our customers

Some of the customers that we have trained in the past years

ziggo.png
abovo.png
webvisum.png
netresearch.png
kega.png
emico.png
happy-horizon.png
pon-bike.png
younify.png
flint-studios.jpg
iclicks.png
optaros.png
See a more complete listing of our customers