1

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 1

3

Overview the frontend technology stacks

Require JS

http://requirejs.org/

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

http://knockoutjs.com/

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.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.