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

Improve this question

1 Answer 1

Reset to default
5

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/
Improve this answer

Your Answer

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

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