Autoplay
Autocomplete
Previous lesson
Complete and Continue
Customize the Magento 2 Checkout
Checkout initialization
Intro & prerequisites
Preview
1:21
Prepare your Magento environment for checkout development
Preview
3:28
Overview of the checkout layout rendering process
Preview
4:26
The bootstrapping process of Magento’s checkout
6:00
Create the skeleton of a custom checkout module
Preview
3:27
Checkout address form fields
Determine position of shipping address checkout fields
6:12
Reorder checkout field positions with XML
6:49
Reorder checkout field positions with a custom layout processor
14:43
Customize the customer configuration options for checkout
4:20
Add a built-in validation rule to a checkout address field
4:00
Add a custom input mask to a checkout field
7:15
Checkout steps
Add a new step to the checkout header
14:34
Create a button to navigate to the next checkout step
Preview
2:48
Move a component to another checkout step
6:35
Disable or remove a checkout UI Component
3:48
Validate component field on form submission
5:45
Refactor custom component code to use a core method
3:14
Challenge! Add a step to the end of the checkout process
Modifying checkout components & templates
Understanding regions and displaying components within loops
3:50
Move a component to an existing checkout region
6:03
Move a component to another checkout region
3:45
Challenge! Style a repositioned checkout component
Alternative method of overriding Knockout.js templates
2:34
Extend a custom checkout UI component
5:57
Challenge! Show the view/edit cart link in the sidebar
Challenge! Create a custom checkout UI Component for logged in users
Challenge! Add a new UI Component to the Order Summary checkout
Challenge! Customize the email step for logged in users
Checkout config providers
What is window.checkoutConfig and is it a good practice?
1:42
Add to window.checkoutConfig with a checkout config provider
Preview
3:51
Add a CMS block to the sidebar with a checkout config provider
5:57
Install a CMS Block programmatically
3:47
Custom shipping address attributes
Create a new customer address EAV attribute
15:12
How customer EAV attributes are stored in the database
3:30
Update the customer address HTML template for a new attribute
5:54
How custom customer attributes are rendered at checkout
4:15
Scope the shipping address attribute as a custom attribute
9:59
Add the new frontend attribute as a shipping address extension attribute
10:32
Add the new backend attribute as a shipping address extension attribute
2:40
Create database columns to store extension attribute data
5:13
Save new extension attribute data to the database
12:18
Hide a custom attributes from the billing address renderer
6:10
Hide a custom attributes from the billing address form
3:27
Completion
Downloadable archive of the CustomCheckout module
Course feedback & certificate for the Customize M2 Checkout course
Create a button to navigate to the next checkout step
View source code
Complete and Continue
Extra lesson content locked
Enroll to access all lessons, source code & comments.
Enroll now to Unlock