Shopware 6 Frontend Development I - On Demand Training

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Included courses

Course content

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