Nov 4 - Nov 7

Shopware Frontend Bootcamp course

One single week with only Shopware frontending

Check the details below

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

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)

Details of this bootcamp

Start date	Monday, November 4, 2024
End date	Thursday, November 7, 2024
Daily times	09:30 - 16:30
Days	4 days
Location	Yireo, Baarn, The Netherlands
Minimum of attendees	3
Maximum of attendees	8
Price	€1795 (excluding VAT)
Included	Lunch, snacks, fruit, drinks, goodies, courseware

Start date: Monday, November 4, 2024
End date: Thursday, November 7, 2024
Daily times: 09:30 - 16:30
Days: 4 days
Location: Yireo, Baarn, The Netherlands
Minimum of attendees: 3
Maximum of attendees: 8
Price: €1795 (excluding VAT)
Included: Lunch, snacks, fruit, drinks, goodies, courseware

Day by day outline

Nov 4 Day 1

Development setup
Shopware theming basics
Twig templating
SCSS modifications

Nov 5 Day 2

Practical scenarios
Common pages explained
Checkout and sales pages
Performance tuning

Nov 6 Day 3

Advanced Twig (extensions)
Performance
JavaScript plugins & overrides
NPM additions

Nov 7 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

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

Technical merchants
Trainees or interns
Webdesigners
Frontend developers
Junior backend developers

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.

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

Jisse understands how you can put your brain to work and keep you constantly on the edge of your seat Kayne Spikker (Modern Minds)

After the Magento 2 bootcamp, my fear of cold feet has subsided. Jisse gives a broad picture of Magento 2 and I now understand a lot better what is possible. Maartje Meering (MDL Online)

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)