Magento2 Checkout Customization – Modify Shipping Methods

checkoutmagento2shipping-methods

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.

Best Answer

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.

Related Topic