I've created a module to customise some of the functionality of the checkout in Magento 2.

In the template I'm using to override app/code/Magento/Checkout/view/frontend/web/template/shipping-address/list.html I would like to create and access a new element called addressSummary which just needs to be a concatenation of address().firstname & address().company.

<!-- ko foreach: { data: elems, as: 'element' } -->
    <li data-bind="click: selectAddress, visible: !isQuoteAddressLocked" class="action item">
        <!-- ko text: address().firstname --><!-- /ko --> <!-- ko text: address().company --><!-- /ko -->
        <!-- ko text: address().addressSummary --><!-- /ko -->
<!-- /ko -->

I can add them easily with <!-- ko text: address().firstname --><!-- /ko --> <!-- ko text: address().company --><!-- /ko --> but I need to have them in a single property so I can hopefully filter them later.


This sounds like the perfect use case for a computed observable.

Example using first and last name

this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
}, this);
| improve this answer | |
  • Thanks, How could I use this in the template or from the Magento-Checkout\web\js\view\shipping-address\list.js which I'm overriding? – Holly Jul 4 '17 at 15:08
  • I don't have enough time to look into that sorry, having a quick glance I don't know if that's the best file to do this in as it doesn't seem to contain the customers firstname – Ben Crook Jul 4 '17 at 15:33
  • magento/module-checkout/view/frontend/web/js/model/shipping-rate-processor/new-address.js may be a better bet as it contains the user's name and address. – Ben Crook Jul 4 '17 at 15:35

In the end I was able to add it to a function which called itself, in my module's 'web\js\view\shipping-address\list.js'

], function (ko, utils, layout, ListView, addressList) {
   'use strict';

   return ListView.extend({
       defaults: {
           template: 'Holy_Addresses/shipping-address/list'

       updateElems: function () {

           _.each(addressList._latestValue, function(address) {
               address.addressSummary = address.company + ' ' + address.lastname;

           return this;

Works pretty nicely. I just needed to make sure addressList was listed the define function.

Magento_Checkout/js/view/shipping-address/list.js is called after my file. With...

addressList.subscribe(function (changes) {
        var self = this;

        changes.forEach(function (change) {
            if (change.status === 'added') {
                self.createRendererComponent(change.value, change.index);

utils.extend(rendererComponent, {
   address: ko.observable(address)
| improve this answer | |

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.