Replace fullAddress with customAddressAttribute in the choose-address dropdown.

I'm using NopUltimatePluginCollection_3.7.148.18764 (RealOnePageCheckout).

I have a single custom address attribute named "Alias".

Alias is used as a quick reference to an address.  e.g., "Main Office", "Building 2"

I would like to use this custom address attribute in the dropdown to select addresses.

In the view \SevenSpikes.Nop.Plugins.RealOnePageCheckout\Views\RealOnePageCheckout\BillingAddress.chtml

Line 18:

<div class="choose-address">
    <select ng-model-options="{ updateOn: 'default change' }" ng-model="vm.billingData.selectedBillingAddress" ng-options="address.customProperties.fullAddress for address in vm.billingData.addresses track by address.id">
        <option value="" ng-if="false"></option>
    </select>
</div>

I want to replace address.customProperties.fullAddress with address.customAddressAttributes[0].???

I don't understand the model enough to finish this.


So the dropdownlist would look like... 

[New Address]
[Alias 1]
[Alias 2]
[Alias 3]

Any help with this would again be very much appreciated.

Thank you!

Hi,

You can use "address.customAddressAttributes[0].name", but this would give you the same result for each address. For example, if your custom address attribute is called "Alias", then each row in the dropdown would be "Alias". I'm not sure that this is what you need and if it is not the desired result, please explain a little bit more what do you need to be shown.

Looking forward to your reply!

I have a single custom address attribute called "Alias".

The attributeControlType = "TextBox".

I need the value of the custom address attribute to be populated in the address dropdown instead of the fullAddress.

So...

The dropdown option text (fullAddress) would be replaced with the custom address attribute value.

The dropdown option value would need remain the address id so the onchange functionality of the dropdown continues to work properly.

Something like this... ?

<div class="choose-address">
    <select ng-model-options="{ updateOn: 'default change' }" ng-model="vm.billingData.selectedBillingAddress" ng-options="address.customAddressAttributes.value for address in vm.billingData.addresses track by address.id">
        <option value="" ng-if="false"></option>
    </select>
</div>

I don't fully understand AngularJS, so it is difficult to explain.

Hi,

If you are sure that you will have a value for each of the addresses you can use this: address.customAddressAttributes[0].defaultValue . But keep in mind that if somehow there is no value for the attribute in one of the addresses the "null" value will be displayed instead.

P.S. - address.customAddressAttributes[0] means that it will get the first attribute from the collection.

Hope this helps!

Thank you!  Your suggestion works great, but I have one last issue.

This code...

        <div class="choose-address">
            <select ng-model-options="{ updateOn: 'default change' }" ng-model="vm.billingData.selectedBillingAddress" ng-options="address.customAddressAttributes[0].defaultValue for address in vm.billingData.addresses track by address.id">
                <option value="" ng-if="false"></option>
            </select>
        </div>

... generates this HTML

<select ng-model-options="{ updateOn: 'default change' }" ng-model="vm.billingData.selectedBillingAddress" ng-options="address.customAddressAttributes[0].defaultValue for address in vm.billingData.addresses track by address.id" class="ng-pristine ng-untouched ng-valid"><!-- ngIf: false --><option value="0" label="null">null</option><option value="1" selected="selected" label="TEST1">TEST1</option></select>
option value="2" selected="selected" label="TEST2">TEST2</option></select>
option value="3" selected="selected" label="TEST3">TEST3</option></select>

The three custom attributes are now there instead of the fullAddress, but the "New Address" option is now null.

How can I get the code to generate the below HTML?

<select ng-model-options="{ updateOn: 'default change' }" ng-model="vm.billingData.selectedBillingAddress" ng-options="address.customAddressAttributes[0].defaultValue for address in vm.billingData.addresses track by address.id" class="ng-pristine ng-untouched ng-valid"><!-- ngIf: false --><option value="0" label="New Address">New Address</option><option value="1" selected="selected" label="TEST1">TEST1</option></select>
option value="2" selected="selected" label="TEST2">TEST2</option></select>
option value="3" selected="selected" label="TEST3">TEST3</option></select>

Hi,

You cannot do that with the current implementation. However, here is a work-around:

1) Replace this:

address.customAddressAttributes[0].defaultValue

with this:

address.customAddressAttributes[0].defaultValue | addressName: address

2) Open app.min.js file and in the bottom of the file add this:

angular.module('realOnePageCheckout.filters')
    .filter("addressName", addressName);

function addressName() {
    return function (defaultValue, address) {

        if (defaultValue === null) {
            return address.customProperties['fullAddress'];
        }

        return defaultValue;
    };
}

Basically, if the some of the addresses do not have defaultValue the "fullAddress" property will be used. For the New Address entry in the dropdown, the "fullAddress" property is "New Address".

Hope this helps!

Brilliant!  Works great.

Thank you!