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

0

3 Answers 3

8

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>
6
  • already ShiperHQ_Shiper module is overriding it so I overridden ShiperHQ_Shiper in requirejs-config.js but not working Jun 29, 2018 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 May 21, 2020 at 8:30
  • @Prince Patel, Can I display the loggedin customer mail id in the place of the company name?
    – Ramya
    Sep 29, 2020 at 13:43
  • @Ramya Yes, you can. Sep 30, 2020 at 6:14
  • @PrincePatel, Can you please explain this?.In my html I have added this code <p data-bind="html: getCustomAttributeVal()"></p> In js file, getCustomAttributeVal: function() { return "my customer attribute value"; } Actually, I want one customer attribute value. So I'm wondering to get the value in Mageplaza_Osc/js/view/shipping-address/address-renderer/default.js
    – Ramya
    Sep 30, 2020 at 6:18
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>
1
  • 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 ? May 21, 2020 at 6:35
3

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.

1
  • this is not working, is we have to add requirejsconfig file for this @ Shyam Krishna Sreekumar ? May 22, 2020 at 6:30

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.