5

I want to display the company name from customer address on checkout page in Magento2.1

It should be visible in shipping address section as well as side bar.

How can I do it?Screen1

enter image description here

6

To add company name or any other address field in

For add new field in shipping adress section, override vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

For add new field in sidebar ship to section, override vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html

For override create requirejs-config.js at

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/shipping-address/address-renderer/default.html':
                'Vendor_Module/template/shipping-address/address-renderer/default.html',

            'Magento_Checkout/template/shipping-information/address-renderer/default.html':
                'Vendor_Module/template/shipping-information/address-renderer/default.html'
        }
    }
};

Now add <!-- ko text: address().company --><!-- /ko --> in overrided file where you want to display company field.

like in

app/code/Vendor/Module/view/frontend/web/template/shipping-information/address-renderer/default.html

<div class="shipping-address-item" data-bind="css: isSelected() ? 'selected-item' : 'not-selected-item'">
    <!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
    <!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
    <!-- ko text: address().street --><!-- /ko --><br/>
    <!-- ko text: address().company -->
    <!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
    <!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
    <!-- ko text: address().telephone --><!-- /ko --><br/>
    <!-- ko foreach: { data: address().customAttributes, as: 'element' } -->
        <!-- ko foreach: { data: Object.keys(element), as: 'attribute' } -->
            <!-- ko text: element[attribute].value --><!-- /ko -->
         <!-- /ko -->
    <!-- /ko -->
    <!-- ko if: (address().isEditable()) -->
    <button type="button"
            class="action edit-address-link"
            data-bind="click: editAddress, visible: address().isEditable()">
        <span data-bind="i18n: 'Edit'"></span>
    </button>
    <!-- /ko -->
    <button type="button" data-bind="click: selectAddress" class="action action-select-shipping-item">
        <span data-bind="i18n: 'Ship Here'"></span>
    </button>
</div>
| improve this answer | |
  • already ShiperHQ_Shiper module is overriding it so I overridden ShiperHQ_Shiper in requirejs-config.js but not working – Nagendra Kodi Jun 29 '18 at 10:00
  • hi prince, could you please help for requirejs file, it gives error "Magento_Checkout/template/shipping-address/address-renderer/default.html" not found, well I have placed 'Vendor_Module/template/shipping-address/address-renderer/default.html', under my module successfully – SagarPPanchal May 21 at 8:30
4

You can simply override the knockout template file in your module

/magentoroot/vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

The address object is already has the data you want so just add this line

<!-- ko text: address().company --><!-- /ko --><br/>

Full Code

<div class="shipping-address-item" data-bind="css: isSelected() ? 'selected-item' : 'not-selected-item'">
    <!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
    <!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
    <!-- ko text: address().company --><!-- /ko --><br/> 
    <!-- ko text: address().street --><!-- /ko --><br/>
    <!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko -->  
    <!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
    <!-- ko text: address().telephone --><!-- /ko --><br/>
    <!-- ko foreach: { data: address().customAttributes, as: 'element' } -->
        <!-- ko foreach: { data: Object.keys(element), as: 'attribute' } -->
            <!-- ko text: element[attribute].value --><!-- /ko -->
         <!-- /ko -->
    <!-- /ko -->
    <!-- ko if: (address().isEditable()) -->
    <button type="button"
            class="action edit-address-link"
            data-bind="click: editAddress, visible: address().isEditable()">
        <span data-bind="i18n: 'Edit'"></span>
    </button>
    <!-- /ko -->
    <button type="button" data-bind="click: selectAddress" class="action action-select-shipping-item">
        <span data-bind="i18n: 'Ship Here'"></span>
    </button>
</div>
| improve this answer | |
  • no need to require.js file for this ?, as I tried this, but its now working, any other changes we have to do for the same ? – SagarPPanchal May 21 at 6:35
1

To bring company name in shipping address section, @princepatel answer is fine. However, we need to put condition to check whether its empty. So i will provide with that specific condition.

To bring the company name in shipping address section in checkout page override

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

to

/app/design/frontend/your-vendor-name/your-theme-name/Magento_Checkout/web/template/shipping-address/address-renderer/default.html

Then add

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="shipping-address-item" css="'selected-item' : isSelected() , 'not-selected-item':!isSelected()">
    <text args="address().prefix"/> <text args="address().firstname"/> <text args="address().middlename"/>
    <text args="address().lastname"/> <text args="address().suffix"/><br/>
    <if args="address().company">
        <text args="address().company"/><br/>
    </if>
    <text args="_.values(address().street).join(', ')"/><br/>
    <text args="address().city "/>, <span text="address().region"></span> <text args="address().postcode"/><br/>
    <text args="getCountryName(address().countryId)"/><br/>
    <a if="address().telephone" attr="'href': 'tel:' + address().telephone" text="address().telephone"></a><br/>

    <each args="data: address().customAttributes, as: 'element'">
        <each args="data: Object.keys(element), as: 'attribute'">
            <if args="typeof element[attribute] === 'object'">
                <if args="element[attribute].label">
                    <text args="element[attribute].label"/>
                </if>
                <ifnot args="element[attribute].label">
                    <if args="element[attribute].value">
                        <text args="element[attribute].value"/>
                    </if>
                </ifnot>
            </if>
            <if args="typeof element[attribute] === 'string'">
                <text args="element[attribute]"/>
            </if><br/>
        </each>
    </each>

    <button visible="address().isEditable()" type="button"
            class="action edit-address-link"
            click="editAddress">
        <span translate="'Edit'"></span>
    </button>
    <!-- ko if: (!isSelected()) -->
    <button type="button" click="selectAddress" class="action action-select-shipping-item">
        <span translate="'Ship Here'"></span>
    </button>
    <!-- /ko -->
</div>

To bring the company name in shipping address residing under order summary section, override

vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html

to

/app/design/frontend/your-vendor-name/your-theme-name/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

Then add

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<if args="visible()">
    <text args="address().prefix"/> <text args="address().firstname"/> <text args="address().middlename"/>
    <text args="address().lastname"/> <text args="address().suffix"/><br/>
    <if args="address().company">
        <text args="address().company"/><br/> 
    </if>
    <text args="_.values(address().street).join(', ')"/><br/>
    <text args="address().city "/>, <span text="address().region"></span> <text args="address().postcode"/><br/>
    <text args="getCountryName(address().countryId)"/><br/>
    <a if="address().telephone" attr="'href': 'tel:' + address().telephone" text="address().telephone"></a><br/>

    <each args="data: address().customAttributes, as: 'element'">
        <each args="data: Object.keys(element), as: 'attribute'">
            <if args="typeof element[attribute] === 'object'">
                <if args="element[attribute].label">
                    <text args="element[attribute].label"/>
                </if>
                <ifnot args="element[attribute].label">
                    <if args="element[attribute].value">
                        <text args="element[attribute].value"/>
                    </if>
                </ifnot>
            </if>
            <if args="typeof element[attribute] === 'string'">
                <text args="element[attribute]"/>
            </if><br/>
        </each>
    </each>
</if>

This helps in removing empty space if a company name not exists.

| improve this answer | |
  • this is not working, is we have to add requirejsconfig file for this @ Shyam Krishna Sreekumar ? – SagarPPanchal May 22 at 6:30

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.