How to display company name on checkout page in Magento 2.1?
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>
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>
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.