I need help with checkout customization. Can someone give me some links to resourses with information about Magento 2 checkout customization? I am all ready readed developer guide and docs, but i still dont understand how to show additional parameters depending on the chosen shipment method.
1 Answer
Overview the frontend technology stacks
Require JS
We also need to know how to override the Js and template html via Require Js. For example, we will override the shipping js and shipping html template:
vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js
vendor/magento/module-checkout/view/frontend/web/template/shipping.html
In your custom module, create requirejs-config.js
:
var config = {
map: {
'*': {
'Magento_Checkout/js/view/shipping':
'Vendor_YourModule/js/view/shipping', // <= Override the Js
'Magento_Checkout/template/shipping.html':
'Vendor_YourModule/template/shipping.html' // <= Override the html template
}
}
};
KnockoutJs Template
For example, go to vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js
:
......
return Component.extend({
defaults: {
template: 'Magento_Checkout/shipping'
},
......
On the checkout page, Magento will be rendered by using Knockout templates.
We can find the Knockout template under pub/static
orvendor/magento/module-checkout/view/frontend/web/template
. We can use Require Js to override these templates.
Layout render and how to debug
One of the most important skills of a good developer is the debugging skill:
Debug Magento 2 checkout jsLayout
Magento will load and merge the layout from checkout_index_index.xml
.
Take a look these files to see more details:
vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml
vendor/magento/module-checkout/view/frontend/templates/onepage.phtml
Practical examples
Please, practice some good samples:
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_overview.html
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_customize.html
We can follow the logic of checkout agreements - vendor/magento/module-checkout-agreements
to add more content: add a static block, static content, etc.
-
1Do you know how to manipulate the values when passed to the server side? Jun 20, 2017 at 8:14
-
could you please check this magento.stackexchange.com/questions/316585/… Jul 5, 2020 at 8:55