Shopware Frontend Development Bootcamp - 04 June / 07 June 2024 (4 days)

Out of stock
SKU
sw6-bootcamp-fe-2024-q2
€1,795.00

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.

  • Courses included: 10
  • Total video time: 34 hours
  • Access period: 1Y
  • € 1795 for 1 year
  • € 53 per hour of video available to you
More Information
Price €1,795.00
Starting date Jun 4, 2024
Ending Date Jun 7, 2024

Included courses

Frontend development generics

Status: Complete
Last updated: 2024-06-08
Number of lessons: 45
Number of slides: 205
Videos: 5.1 hours

JavaScript Basics

Status: Complete
Last updated: 2024-06-08
Number of lessons: 9
Number of slides: 39
Videos: 0.1 hours

Linux Fundamentals

Status: Complete
Last updated: 2024-05-23
Number of lessons: 33
Number of slides: 154
Videos: 0 hours

Shopware 6 Administration Development

Status: Complete
Last updated: 2024-06-08
Number of lessons: 64
Number of slides: 383
Videos: 0.4 hours

Shopware 6 App Development

Status: Complete
Last updated: 2024-06-06
Number of lessons: 25
Number of slides: 134
Videos: 1.8 hours

Shopware 6 Technical Architecture

Status: Complete
Last updated: 2024-06-08
Number of lessons: 88
Number of slides: 391
Videos: 1.9 hours

Shopware 6 Frontend Development Basics

Status: Complete
Last updated: 2024-06-08
Number of lessons: 105
Number of slides: 375
Videos: 5.8 hours

Shopware 6 Frontend Development Advanced

Status: Complete
Last updated: 2024-06-08
Number of lessons: 52
Number of slides: 253
Videos: 4 hours

Shopware 6 Technical Merchant

Status: Complete
Last updated: 2024-06-08
Number of lessons: 29
Number of slides: 108
Videos: 0.2 hours

Shopware 6 PWA Development

Status: Complete
Last updated: 2024-06-08
Number of lessons: 73
Number of slides: 399
Videos: 14.7 hours

Preview this course

Want to see what this course is like? Checkout our Courseware Demo to preview this course and others.

Preview all courses

Course content

Frontend development generics

  • Introduction to webdesign
  • The difference between frontend and backend
  • Roles in webdevelopment
  • HTML
  • HTML overview
  • HTML 5 boilerplate
  • HTML elements
  • HTML attributes
  • Browser tools
  • Using the Browser its Developer Tools
  • Using the Error Console
  • Monitoring the network requests
  • Dealing with browser caching
  • Elements pane vs HTML source
  • Browser tools
  • Toggling the mobile view
  • Adding some temporary CSS code
  • Forcing an element its state
  • Going incognito
  • Preserving logs
  • Throttling networking traffic
  • Running a Lighthouse scan
  • Inspecting the Application state
  • Blocking requests
  • Troubleshooting webpages
  • CSS
  • CSS basics
  • Responsiveness
  • Sizes in CSS
  • Advanced CSS topics
  • CSS animations
  • Font families
  • CSS Grids
  • CSS Flexbox
  • CSS preprocessors
  • LESS
  • SASS
  • Building tools
  • CSS modules
  • Working with PostCSS
  • Introducing Tailwind
  • Tailwind
  • Colors in CSS
  • JavaScript and jQuery
  • jQuery
  • Images
  • Images
  • SVG
  • overview
  • Characters and encodings
  • Characters and encoding
  • Performance
  • How browser caching works
  • Core Web Vitals

JavaScript Basics

  • Basics
  • JavaScript built-in objects
  • JavaScript encapsulation
  • Working with objects
  • Casting
  • Using the DOM
  • Other browser APIs
  • Basic concepts
  • Read-only objects
  • JavaScript engines

Linux Fundamentals

  • Introduction
  • About Linux
  • Resources
  • Users and groups
  • Commands
  • Basic shell commands
  • Linux permissions
  • Creating shell scripts
  • Small bits
  • Assignment: Diffing and patching
  • Configuration formats
  • UNIX timestamp
  • Networking
  • Networking
  • Services
  • SSH
  • Ready-made stacks
  • Webservers
  • Assignment: Write a simple PHP script to use a remote API
  • PHP-FPM
  • MySQL database
  • Databases
  • ElasticSearch database
  • Redis
  • RabbitMQ
  • Varnish
  • Git versioning
  • Git essentials
  • Assignment: Create a git repository
  • Using GitHub
  • Assignment: Create a GitHub repository
  • Assignment: Upload your files
  • Advanced git usage
  • Git beyond the basics
  • Licensing
  • Open source licenses
  • Remote servers
  • Tools for working remotely
  • Using SSH
  • Windows tips
  • Windows Subsystem for Linux
  • MacOS tips
  • MacOS tools

Shopware 6 Administration Development

  • Introduction
  • Administration architecture
  • Common tasks in the Administration
  • Adding custom JavaScript
  • JavaScript in the Administration
  • Compiling the administration
  • Plugin configuration
  • Plugin configuration
  • Assignment: Add a plugin configuration
  • Vue architecture
  • Vue essentials
  • Vue components of the Shopware core
  • Assignment: Add a text editor to your plugin configuration
  • Registering Vue components
  • Add JS to your plugin
  • Assignment: Create a dummy JS file in your plugin
  • Registering Vue components
  • Twig JS
  • Assignment: Add a custom component to your plugin configuration
  • Custom component in plugin configuration
  • Assignment: Add a NPM-based component to your plugin configuration
  • Lazy loading of components
  • Working with the Shopware object
  • The Shopware object
  • Shopware.Directive
  • Shopware.Helper
  • Vue mixins
  • Shopware.Service & Shopware.ApiService
  • Provide/inject
  • Tips and tricks
  • Administration modules
  • Creating a module
  • Assignment: Create a simple module
  • Permissions
  • Lab Exercise
  • Data flow
  • Vuex state
  • Adding an Administration module
  • Admin API
  • Using the Admin API
  • Sync API
  • Creating an Admin API route
  • Assignment: Create **custom** Admin-API Route
  • Entities in the Administration
  • Data layer in Administration
  • Managing your entity in the Administration
  • Listing your entities
  • Admin entity detail page
  • Creating a new entity
  • The Dealers CRUD example
  • Webpack
  • Hot Module Reloading
  • Webpack essentials
  • Adding NPM packages to your JavaScript plugin
  • Adding TypeScript
  • Vue Single File Components
  • Customizing the Administration
  • Extending Vue components
  • Overriding Vue components
  • Changing a TwigJS template
  • Calling parent methods
  • Injecting into the Vue router
  • Extending the product grid
  • CMS customization
  • Working with CMS content
  • Creating a custom CMS block
  • Assignment: Add a Bootstrap jumbotron CMS Block
  • Creating a custom CMS element
  • Assignment: Create a custom CMS Element
  • Product customization
  • Creating a custom fieldset
  • Importing and exporting products
  • Admin extension SDK
  • Introduction
  • End-to-end testing
  • Introducing Cypress
  • Using Cypress in the Administration

Shopware 6 App Development

  • Shopware Apps basics
  • Introduction to
  • Setting up your development environment
  • Name your App Scripts properly
  • App manifest.xml
  • Converting a Shopware Theme to an app
  • Adding Twig templates to your App
  • Converting a Shopware Plugin to an app
  • Setting up a Shopware app
  • Validating your App
  • Updating the app in Shopware
  • Working with App Scripts
  • Dealing with App permissions
  • Shopware Apps side projects
  • App Scripts
  • Extending product page
  • Expose App configuration to Twig templates
  • Processing the cart with App Scripts
  • Executing App Scripts via the Store API
  • Adding custom fields to your Apps
  • A media Custom Field via App Scripts
  • Discovering the ServiceStubs
  • Developer tricks for App Scripts
  • Reusable scripts via Twig macros
  • Connecting to a SaaS from your Shopware Apps
  • Setup AppTemplate
  • Coding with the AppTemplate
  • Shopware Apps cookbook
  • Playing with permissions

Shopware 6 Technical Architecture

  • Overview
  • Shopware application
  • Shopware stack
  • Shopware versions
  • Licensing
  • Symfony in Shopware
  • Concepts
  • Snippets
  • Symfony configuration
  • Symfony Flex recipes
  • UUID
  • Running projects
  • Shopware requirements
  • Running projects
  • Version control
  • Project steps
  • Environment
  • Environment overview
  • Native Environments
  • Docker solutions
  • Using the core Docker Compose
  • ddev with Shopware
  • Using Dockware
  • Virtual or Native Environments?
  • Gitpod and Shopware
  • Kubernetes
  • Hypernode image
  • Possibility of a hybrid stack
  • Assignment: Setup your own development environment
  • Summary
  • Installation
  • Installation overview
  • Environment variables
  • Environment variables with Flex
  • Modify ENV variable values
  • Preparing for the installation
  • Installing the Production Template
  • Assignment: Install Shopware via `composer`
  • Setting up an existing project
  • Quiz: Installation
  • Post-install
  • Switch to `dev` mode
  • Install `shopware/dev-tools`
  • Assignment: Install the Shopware `dev-tools`
  • Modify admin user
  • First Run Wizard
  • Configuring Sales Channels
  • Getting demo data
  • Assignment: Install demo-data
  • Installing Shopware Store packages via composer
  • Redis
  • Assignment: Setup Redis
  • Disable all caches
  • Disable the autoupdater
  • Updates
  • **Updating** Shopware 6
  • Upgrading to Symfony Flex
  • Tools
  • Shopware console
  • Shopware CLI
  • Symfony CLI
  • Plugins
  • Some useful plugins
  • Using composer patches
  • Composer replacements
  • Composer plugins
  • Frosh Tools
  • Assignment: Install FroshTools
  • Frosh Development Helper
  • Tinker
  • Tinkerwell
  • Database tools
  • In production
  • Deploying Shopware
  • Deployment
  • Blue Green Deployment
  • Continuous integration
  • Deployment via artifact
  • Deployment with Deployer PHP
  • Deploying plugins
  • Git essentials
  • SSH usage
  • ElasticSearch
  • Message queue
  • Configuring mailers
  • Shopware `systemd` services
  • Shopware `supervisor` services
  • Keeping secrets
  • Performance
  • MySQL tuning
  • PHP tuning
  • HTTP Cache
  • Varnish
  • Symfony locking
  • Performance tricks
  • Monitoring tools
  • Profiling tools
  • Troubleshooting
  • Deprecated messages in CLI

Shopware 6 Frontend Development Basics

  • Introduction
  • Shopware 6 Frontend Development
  • Prerequisites
  • Terms used in this course
  • Getting started
  • Development setup
  • Assignment: Prepare your environment
  • Disable caching
  • Assignment: Disable caching
  • IDE setup
  • Assignment: Configure your IDE
  • Using the Symfony Profiler
  • Project and Directory structure
  • CLI tools
  • Creating a new theme
  • Assignment: Create a new theme
  • Theme configuration
  • Theming basics
  • Theming structure
  • Explaining the theme.json file
  • Assignment: Playing with the JSON
  • Theme inheritance
  • Working with assets
  • Assignment: Copy files from plugin folder
  • Assignment: Copy files from theme folder
  • Translations
  • Twig templating
  • Understanding Twig templating
  • Debugging Twig templates
  • Twig filters
  • Shopware-specific Twig tags
  • Twig template overrides
  • Assignment: Include your own template
  • Assignment: Override the logo
  • Assignment: Override some Twig template
  • Assignment: Show an icon
  • Assignment: Add a Bootstrap jumbotron
  • Working with assets in Twig
  • Assignment: Display an asset via Twig
  • Remove the phonenumber from the contact form
  • Adding a custom field to the footer
  • Assignment: Override the footer
  • Overriding a logo
  • Assignment: Override the logo
  • Using an SVG logo
  • Working with variables in Twig
  • CSS & SCSS
  • CSS strategy
  • Hot Module Reloading
  • Assignment: Enable Hot Module Reloading
  • Introducing SCSS
  • Internals of SCSS compilation
  • Modifying SCSS variables
  • Assignment: Modify some SCSS variables
  • Working with Twitter Bootstrap
  • Using theme.json variables in SCSS and Twig
  • Assignment: Add a variable to a SCSS file
  • Assignment: Add a variable to a Twig template
  • Working with assets in CSS
  • Assignment: Display asset via CSS (1/2)
  • Responsive webdesign
  • Adding FontAwesome icons
  • Using Tailwind instead of Bootstrap
  • Customizing pages
  • Snippets
  • Assignment: Add a snippet
  • Customizing the product details page
  • Assignment: Modify the product page
  • Adding a Custom Field to the product page
  • Assignment: Add a Custom Field
  • Adding a property to the product page
  • Assignment: Add a Property
  • Adding a tab to the product detail page
  • Assignment: Add a custom tab
  • Customizing the category page
  • Adding a custom field to a category
  • Assignment: Add a Custom Field
  • Customizing the homepage
  • Assignment: Add a custom Twig template
  • Accessing the request in Twig
  • Assignment: Use request details in Twig
  • Modifying the checkout
  • Adding a custom field to the checkout
  • Add a custom block with a shipping method
  • Assignment: Add a block to a shipment method
  • Checkout and sales
  • Cart architecture
  • Order state machines
  • Introduction to payment handlers
  • Modifying the revocation policy
  • Performance tuning
  • Performance metrics
  • Caching strategies
  • Optimizing images
  • CSS & JS bundling
  • Using a CDN
  • Minify HTML
  • Optimizing fonts
  • Advanced
  • Using `@Routes`
  • Customizing email templates
  • Working with CMS content
  • Using media entities
  • Assignment: Show a custom media image
  • Using flatpickr for the birthday field
  • 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
  • Assignment: Add a block to a shipment method
  • Other topics
  • Development tips
  • Setting up PHPStorm
  • Using a logger
  • Using Redis

Shopware 6 Frontend Development Advanced

  • Introduction
  • What Will Be Covered?
  • Essentials
  • Development setup
  • Creating a theme
  • Exercise: Create a theme
  • Creating a plugin
  • Exercise: Create a plugin
  • Twig essentials
  • Exercise: Override some Twig template
  • Advanced Twig
  • Adding new Twig variables
  • Using theme.json variables in SCSS and Twig
  • Using plugin variables (config.xml)
  • Adding global Twig variables
  • Adding a custom Twig filter
  • Adding a custom Twig function
  • Assignment: Create a custom function to expose the product repository
  • Extending the page
  • Pages and Pagelets
  • Assignment: Create an order counter per product
  • Extending the footer pagelet
  • Using the StorefrontRenderEvent
  • Add a middle name to a customer form
  • Assignment: Add a company field to the customer registration
  • JavaScript essentials
  • JavaScript in the Storefront
  • Assignment: Compile JS sources
  • Adding JavaScript to your Shopware plugin
  • Assignment: Create a custom JS plugin
  • Compiling custom NPM packages
  • Assignment: Implement a color picker
  • Using theme variables in JavaScript
  • Assignment: Add a variable to a JS plugin
  • Dealing with Viewports in your Shopware JavaScript
  • JavaScript advanced
  • JavaScript in the Storefront
  • Exercise: Compile JS sources
  • Adding JavaScript to your Shopware plugin
  • Exercise: Create a custom JS plugin
  • Using jQuery
  • Using plugin variables in JS
  • Debugging JavaScript
  • Overriding an existing JavaScript plugin
  • Overriding the OffCanvasCartPlugin options
  • Overriding Tiny Slider
  • Dealing with JavaScript events in Shopware 6
  • Common JavaScript utilities
  • Using AJAX in the Shopware storefront
  • Dealing with Viewports in your Shopware JavaScript
  • Using the DOM in your Shopware JS plugin
  • Webpack
  • Webpack essentials
  • Adding NPM packages to your JavaScript plugin
  • Adding TypeScript
  • Shopware Apps
  • Introduction to Shopware Apps
  • App manifest.xml
  • Shopware PWA
  • Introduction to Shopware PWA

Shopware 6 Technical Merchant

  • Introduction
  • Shopware overview
  • Shopware plans
  • Shopware versions
  • General administration
  • CMS
  • CMS overview
  • CMS pages
  • Assignment: Customize the product page
  • CMS sections
  • CMS blocks and elements
  • Assignment: Customize the homepage
  • External CMSes
  • Products
  • Products
  • Essential characteristics
  • Variants
  • Categories
  • Categories overview
  • Navigations
  • Assignment: Create a landing page for promoted products
  • Custom Fields
  • Custom Fields overview
  • Assignment: Create a Custom Field for a product
  • Sales
  • Sales in Shopware
  • Quiz: Sales
  • Extensions
  • Extension overview
  • Plugins
  • Themes
  • Apps
  • Going headless with Shopware
  • Logic building
  • Business Events overview
  • Flow Builder
  • Rule Builder

Shopware 6 PWA Development

  • Introduction
  • Vocabulary
  • Introducting Shopware PWA
  • Installation
  • 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 essentials
  • 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
  • Working with Nuxt.js
  • Nuxt.js introduction
  • Installing Nuxt.js
  • Nuxt.js theming
  • Nuxt.js architecture
  • NuxtJS Configuration
  • Nuxt.js modules
  • NuxtJS plugins
  • Customize routing
  • NuxtJS content module
  • Theming
  • 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
  • PWA plugins
  • 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
  • API communication
  • 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
  • Working with the CMS
  • First peek at CMS architecture
  • Overriding a CMS Block
  • Overriding a CMS Element
  • Jumbotron example
  • Customizing the theme
  • Customizing the category page
  • Customizing the product page
  • Using product functions
  • Checkout overview
  • Disable cart notifications
  • Advanced topics
  • Interceptors
  • Shopware PWA in production
  • Deployment
  • AJAX calls with SSR
  • Adding the right context
  • Deployment with SSG
  • Deployment with SSR
  • Tips and tricks
  • Building a PWA without Shopware PWA
  • Troubleshooting
  • Best practices