Customize the Magento 2 Checkout
Checkout initialization
-
Intro & prerequisitesPreview(1:21)
-
Prepare your Magento environment for checkout developmentPreview(3:28)
-
Overview of the checkout layout rendering processPreview(4:26)
-
The bootstrapping process of Magento’s checkoutPreview(6:00)
-
Create the skeleton of a custom checkout modulePreview(3:27)
Checkout address form fields
-
Determine position of shipping address checkout fieldsLocked(6:12)
-
Reorder checkout field positions with XMLLocked(6:49)
-
Reorder checkout field positions with a custom layout processorLocked(14:43)
-
Customize the customer configuration options for checkoutLocked(4:20)
-
Add a built-in validation rule to a checkout address fieldLocked(4:00)
-
Add a custom input mask to a checkout fieldLocked(7:15)
Checkout steps
-
Add a new step to the checkout headerLocked(14:34)
-
Create a button to navigate to the next checkout stepLocked(2:48)
-
Move a component to another checkout stepLocked(6:35)
-
Disable or remove a checkout UI ComponentLocked(3:48)
-
Validate component field on form submissionLocked(5:45)
-
Refactor custom component code to use a core methodLocked(3:14)
-
Challenge! Add a step to the end of the checkout processLocked
Modifying checkout components & templates
-
Understanding regions and displaying components within loopsLocked(3:50)
-
Move a component to an existing checkout regionLocked(6:03)
-
Move a component to another checkout regionLocked(3:45)
-
Challenge! Style a repositioned checkout componentLocked
-
Alternative method of overriding Knockout.js templatesLocked(2:34)
-
Extend a custom checkout UI componentLocked(5:57)
-
Challenge! Show the view/edit cart link in the sidebarLocked
-
Challenge! Create a custom checkout UI Component for logged in usersLocked
-
Challenge! Add a new UI Component to the Order Summary checkoutLocked
-
Challenge! Customize the email step for logged in usersLocked
Checkout config providers
Custom shipping address attributes
-
Create a new customer address EAV attributeLocked(15:12)
-
How customer EAV attributes are stored in the databaseLocked(3:30)
-
Update the customer address HTML template for a new attributeLocked(5:54)
-
How custom customer attributes are rendered at checkoutLocked(4:15)
-
Scope the shipping address attribute as a custom attributeLocked(9:59)
-
Add the new frontend attribute as a shipping address extension attributeLocked(10:32)
-
Add the new backend attribute as a shipping address extension attributeLocked(2:40)
-
Create database columns to store extension attribute dataLocked(5:13)
-
Save new extension attribute data to the databaseLocked(12:18)
-
Hide a custom attributes from the billing address rendererLocked(6:10)
-
Hide a custom attributes from the billing address formLocked(3:27)
How custom customer attributes are rendered at checkout
If you're already enrolled, log in to access this lesson.
Enroll in Course to Unlock