4

I would like to add my own JS to this file to add a little customization to the checkout in Magento 2.

app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/list.js

I tried copying it to my theme folder but it Magento doesn't pick it up, it still uses the file above.

app/design/frontend/Holy/mytheme/Magento_Checkout/web/js/shipping-address/list.js

How can I override this file? I thought I could have easily overriden this in my theme?

Do I need to create a module for it? And in it's /frontend/layout/checkout_index_index.xml file add something like:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="address-list" xsi:type="array">
                                                            <item name="component" xsi:type="string">Holy_MyModule/js/view/shipping-address/list</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Then I guess I can create my JS file in

app/code/Holy/MyModule/view/frontend/web/js/view/shipping-address/list.js

But how can I make sure it picks up everything from Magento_Checkout? Is there something I need to add at the beginning of the file, in define block, Component.extend function, or the child functions like initChildren

4

If you need override js in your theme, just copy to your theme with corresponding path with same name

app\design\frontend\Vendor\theme-name\Magento-Checkout\web\js\view\shipping-address\list.js

For extend component in module
1. Create requirejs-config.js in Vendor\Module-Name\view\frontend

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/view/shipping-address/list': {
                'Vnecoms_Demo/js/view/shipping-address/list': true
            }
        }
    }

};

2. Create Vnecoms_Demo/view/frontend/web/js/view/shipping-address/list.js Follow name is your choice. Copy from original and modify with your demands
Ex:

/**
 * Copyright © 2017 Vnecoms, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/*global define*/
define([], function () {
    'use strict';

    return function (ListShipping) {
        return ListShipping.extend({
            defaults: {
                template: 'Magento_Checkout/shipping-address/list',
                rendererTemplates: [],
                isExtend: true,
                testVariable: 1
            },

            initialize: function () {
                console.log('my custom');
                this._super()
                    .initChildren();

            }
        });
    }
});

To apply new changes

rm pub/static/frontend/
rm pub/static/_requirejs/
rm var/cache/
rm var/generation/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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