Full Access to All Magento 2 On-Demand Training

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Included courses

Course content

Docker

Adobe PWA Studio Development

• PWA in general
• Introducing PWA
• Other PWA providers
• PWA Studio and extensibility
• Status of Magento GraphQL
• Architectural choices
• Hybrid React solutions
• Overview of PWA Studio
• Introduction to PWA Studio
• React essentials
• React essentials
• Redux essentials
• Apollo client
• Introducing Apollo client
• Getting started with Apollo Client
• Making Apollo calls
• Including GraphQL files
• Kickstart PWA Studio
• Minimum requirements
• Development tools
• Prepare your Magento instance
• Installing PWA Studio
• First look at PWA Studio
• Configuring PWA Studio
• Reviewing the .env file
• Upgrading PWA Studio
• Buildpack
• Overview of Buildpack
• Venia
• Introducing Venia
• Extending Venia
• Overriding components with the Fooman resolver
• Changing the logo
• Using prices
• mergeClasses
• Adding a new route
• Working with the Mask component
• Toasting
• Checkout in Venia
• Peregrine
• Peregrine overview
• Talons of Peregrine
• Example with product talon
• Routing in PWA Studio
• Context within PWA Studio
• Redux within PWA Studio
• Build it your own
• Build it without Venia
• Implementing Venia and Peregrine partially
• Target interception
• Target interception
• Creating a target interceptor
• Venia targets
• Peregrine targets
• Buildpack targets
• Targetables
• UPWARD
• Overview of UPWARD
• Running UPWARD
• UPWARD YAML configuration
• Automatic image optimization
• Running Venia without UPWARD
• In production
• In production
• Server Side Rendering

Magento 2 Technical Architecture

Magento 2 Backend Development I

• Prerequisites
• Design patterns
• Clean coding
• Object Calisthenics
• Magento basics
• Magento Admin Panel overview
• Configuration files
• Application entrypoints
• Global - Website - Store View (GWS)
• Product types
• Product attributes
• Order flow
• Theming basics
• Frontend landscape
• Magento and composer
• Requiring a composer package
• Semantic versioning
• Composer repositories
• Local composer repositories
• Magento composer plugins
• Magento installation
• Minimum system requirements
• Development platform
• Disabling Two Factor Authentication
• Installing Magento
• Installing sample data
• Upgrading Magento
• Development tools
• Development performance
• Deployment modes
• Deployment
• Deploying to production
• Using app:config commands
• Static Content Deployment
• Magento environment
• Developer Tools
• Setting up PHPStorm
• Running cron
• Using Magerun
• Cache clean vs flush
• Cache handling
• Changing the admin path
• Maintenance mode
• Redis caching
• Magento modules
• Installing a module
• Preparing for module creation
• Creating a module
• Composer file
• Module XML file
• Module registration
• Module commands
• Module entrypoints
• Adding Blocks via XML layout
• Using the store configuration
• Adding a simple CLI command
• Logging
• Creating a custom logger
• Architecture
• Areas in the Magento application
• Application layers
• Interfaces and Service Contracts
• Dependency Injection
• Sandbox script
• Introduction to Dependency Injection
• Object Manager
• DI preferences
• Injecting a Store Configuration value
• Injecting the current product
• DI types aka constructor argument replacement
• Virtual Types essentials
• DI factories
• Injecting URLs into your class
• Creating a custom factory
• DI proxies
• DI interceptor plugins
• Injecting the current customer session
• Injecting the layout into your class
• Catalog development
• Using the product repository
• Using product stock
• Console commands
• Adding console commands
• Controllers
• Frontend routes
• Action results
• Dealing with form keys
• Adding messages
• Adding complex messages
• Adding cronjobs
• Adding a cronjob
• Dealing with emails
• Creating an email template
• Caching
• Block caching
• Module setup
• Adding database changes via a module
• InstallSchema
• InstallData
• Declaritive schemas
• Declarative Schema patches
• Module samples
• Scenario: Add CMS Block to PHTML
• Scenario: Add product pricing per customer

Magento 2 Backend Development II

• Events and observers
• Event observer
• Finding events
• Dispatching events
• Observer or Plugins
• Controllers and routing
• Routing overview
• Backend routes
• Routing
• CMS parts
• CMS Blocks
• CMS pages
• CSP
• CSP
• Advanced frontend topics
• Adding a custom page type
• Widgets
• Class patterns
• Data objects
• Builder pattern
• No more Helpers
• Database operations
• Declarative schemas
• Data models
• Resource models
• AbstractModel or AbstractExtensibleModel?
• Collections
• Repositories
• Creating your own repository
• EAV attributes
• Creating an EAV entity
• About attributes
• Attribute models
• Working with the configuration
• Attribute sets
• Category attributes
• Manual SQL queries
• Future changes in database layer
• Caching
• Caching backends
• Caching types
• Adding a custom cache type
• core-cache-config
• Extension attributes
• Extension Attributes
• Example product extension attribute
• Adminhtml
• Backend routes
• Adding Store Configuration settings
• ACL rules
• Adding a menu item
• Basics of adding UiComponents
• Extending a UiComponent grid
• Creating a UIComponent grid
• Hyva admin
• REST API
• Web APIs
• Backend of the checkout
• ConfigProviders for window.checkoutConfig
• Adding a new Layout Processor
• Layout processors
• The Vault
• Misc
• Accessing the filesystem
• Unit tests
• Unit Tests
• Integration Tests
• Integration testing
• MFTF
• Magento Functional Testing Framework (MFTF)
• Live Tests
• Overview of Live Tests
• Setup of live tests
• End-to-End testing
• An overview of End-to-End testing
• Cypress

Magento 2 Backend Development III

• Block caching
• Block caching
• Cache tags in Blocks
• Cache keys in Block
• Advanced Block caching
• Full Page Cache
• Full Page Cache in Magento
• Varnish
• Introducing Varnish
• Setting up Magento and Varnish
• Troubleshooting Varnish
• Edge Side Includes
• VCL configuration
• Tips when using Varnish
• ElasticSearch
• Introduction to ElasticSearch
• Terminology
• Connecting to ElasticSearch
• Installing ElasticSearch
• ElasticSearch in PHP
• ElasticSearch in Magento
• Aggregation APIs
• Clustering ElasticSearch
• Scaling tips for ElasticSearch
• ELK stack
• Kibana
• Indexing
• Indexing overview
• Where to look for indexing
• How indexing works
• Tuning indexing
• Creating a custom indexer
• Message Queue
• Introducing message queuing
• AMQP
• Magento message queue
• Multi Source Inventory
• Multi Source Inventory overview
• Reservations
• Source Selection Algorithms
• Configuring MSI
• Simplest setup of MSI
• Coding samples with MSI

Magento 2 GraphQL

• GraphQL basics
• Introduction to GraphQL
• GraphQL clients
• GraphQL queries
• GraphQL mutations
• GraphQL call types
• GraphQL fragments
• GraphQL directives
• GraphQL schema discovery and introspection
• Magento GraphQL API
• Introducing the Magento GraphQL API
• Adding a custom GraphQL endpoint
• Extending the GraphQL storeConfig endpoint
• Resolver $context argument
• GraphQL resolvers
• Testing GraphQL endpoints
• GraphQL URL resolving
• GraphQL caching
• Exception handling
• Tips and tricks with the GraphQL API

Magento - Hyvä Themes

• Introduction
• Introduction to Hyvä Themes
• Overview of Hyvä theme packages
• Overview of Hyvä modules
• Hyvä admin
• Quick start
• Project kickstart
• Requirements for Hyvä
• Development tools for Hyvä
• Installation of Hyvä packages
• Creating a new Hyva theme
• Extending the `Hyva/default` theme
• Discovering the theme
• Using browser syncing
• Tailwind CSS
• Introducing Tailwind CSS
• Quick start without Hyva
• Using Windy for Tailwind CSS development
• Hyvä build modes
• Tailwind configuration file
• Configuring breakpoints
• Configuring colors
• Tailwind and PostCSS
• Purging CSS classes
• Configuring fonts
• Tailwind plugins
• Using the prose plugin
• Using apply
• Tips and tricks
• Just-In-Time compilation
• Hyva_CmsTailwindJit module
• Extending Tailwind
• Tailwind 3 upgrade
• Using PHPStorm for Tailwind development
• ViewModel classes
• Using ViewModels
• Creating a ViewModel for Hyva
• Working with icons
• Alpine JS
• Introducing AlpineJS
• Basic syntax
• `x-model` directive
• Magics
• The `$el` magic
• The `$nextTick` magic
• `x-ref` directive
• Watching variables
• `x-cloak` directive
• `x-spread` directive
• State management in AlpineJS
• Copying a slider from alptail
• Events in AlpineJS
• Hyva private content
• Depending on `window.hyva`
• Loading a CMS Block via GraphQL
• MageWire
• Installation
• Example module with MageWire
• Checkout with Hyva
• Checkout options
• Hyvä checkout aka React checkout
• Customizing the React checkout
• Fixing the cart ID
• Fix duplicate React versions
• Fix the vendor folder
• Overriding components
• React or Preact developer tools
• React checkout architecture
• Using context in the React checkout
• Using the React checkout in production
• Dealing with CORS issues
• Compatibility modules
• Compatibility modules
• Rewriting Luma scripts to Alpine
• Using compatibility modules
• Creating a custom compatibility module
• Converting an Example Widget module
• 11-widgets
• Introduction to Hyvä widgets
• Tips & tricks
• Performance tuning
• Setting equal heights

Magento 2 Luma Frontend Development

• Basics
• Introduction to Magento 2 frontend development
• Development tools
• Development performance
• Deployment modes
• Static Content Deployment
• Setting the DocumentRoot in the Apache webserver
• Creating a basic theme
• Theme location
• Creating a theme
• Parent themes
• Theme inheritance
• Theme structure
• Theme vs module
• PHTML and HTML templates
• Introduction to PHTML templates
• Using the MageSpecialist DevTools
• Using mage2tv/cache-clean
• Overriding a PHTML template
• Creating a new template
• PHTML vs HTML templates
• Debugging PHTML templates
• XML layout
• XML layout concepts
• Comparison with Magento 1
• XML layout essentials
• Review of homepage demo
• Handles and handle types
• Understanding page layouts
• Adding labels to containers
• Using containers
• The head section in the layout
• Blocks in the layout
• Layout updates
• Moving elements
• Removing elements
• Rendering child elements in blocks
• Reordering elements
• Using block templates
• Block arguments in the XML layout
• Overriding layout
• Overriding the logo
• Text blocks
• Troubleshooting layout issues
• Multilinguality
• Setting up Store Views for translation
• Translating content
• Translating system strings
• How JavaScript translations work
• Block & View Model classes
• Using ViewModels
• ViewModels vs Blocks
• Extending `AbstractBlock`
• Working with CMS Blocks
• Email templates
• Customizing email templates
• Adding a block to an email template
• Using Yireo EmailTester
• CSS, LESS, Sass
• CSS strategies
• How CSS is added via the XML layout
• LESS basics
• To copy Fotorama into a LESS file
• Removing calendar.css and others
• One single CSS or separate CSS files?
• Understanding the @magento_import directive
• Example module with some LESS
• LESS compilers
• Debugging var/view_preprocessed/
• CSS responsiveness - the Magento way
• Best practices for overriding LESS files
• Using Grunt for LESS compilation
• Using subodha his Gulp
• Frontend performance
• Caching blocks

Magento 2 Luma JavaScript Development

• JavaScript
• ES6 Strict Mode
• JavaScript encapsulation
• Invocation patterns
• Binding the keyword this
• Module pattern
• RequireJS
• How JavaScript translations work
• AMD standard
• RequireJS basics
• RequireJS config per Magento module
• RequireJS configuration
• RequireJS rewrites
• RequireJS shims
• RequireJS mixins
• Component initializations
• Return values of RequireJS modules
• Example: Changing the background color
• Changing options of the StoreView switcher
• Dynamic dependencies
• KnockoutJS
• Introduction to Knockout.js
• Knockout Context Debugger browser plugin
• Binding Knockout the Magento way
• Binding variables in Knockout
• Text input with Knockout observable
• Using ko.observableArray
• Simple counter with Knockout
• Interacting with Knockout ViewModels
• Interacting with Magento uiComponents
• Simple KO ViewModel linking
• Analysing the customer greeting
• Subscribing to the minicart
• Knockout Components
• State component with Knockout
• Using the uiRegistry
• Definition of UiComponents
• Advanced UiComponent
• Knockout HTML templates
• Analysing the minicart
• Rendering child components
• Adding extra info to the minicart
• Extending the checkout
• ConfigProviders for window.checkoutConfig
• Adding a new Layout Processor
• Layout processors
• Adding a child component to the checkout
• Adding a new step in checkout
• Component configuration
• Adding a CMS block in checkout
• Data sources in the checkout
• ZIP code validation
• Payment validators
• Observer quote changes
• Calling upon `checkoutProvider`
• Private content
• Definition of Private Content
• Dealing with `customerData`
• Example for using `customerData`
• Add a new customerData section
• How `customerData` sections get their data
• Showing `customer().lastname` in a Knockout template
• Depersonalizer

Frontend development generics

• Images
• Images
• Characters and encodings
• Characters and encoding