First Name and Last Name Not Saving or Reflecting in Address List (Billing Modal)
- When adding a billing address via the modal view, users enter First Name and Last Name.
- These fields are split from fullname, but the backend (and SCA profile model) expects fullname or addressee.
- After clicking “Save”:
- The modal remains open or closes without updating the address list.
- New address doesn’t show in the payment method selector until refresh or re-navigation.
Root Cause
fullname is not updated on the model before saving.
Backbone model bindings ([name=”firstname”]: firstname) were commented out or missing.
Address list not refreshed on address save event (address:saved).
Solution
1. Extend AddressModel to auto-update fullname on change:
AddressModel.prototype.initialize = _.wrap(
AddressModel.prototype.initialize,
function (fn) {
fn.apply(this, Array.prototype.slice.call(arguments, 1));
this.on(“change:firstname change:lastname”, function () {
const first = this.get(“firstname”) || “”;
const last = this.get(“lastname”) || “”;
const fullname = (first + ” ” + last).trim();
this.set({
fullname: fullname,
addressee: fullname,
}, { silent: true });
});
}
);
2. Ensure AddressEditView.prototype.bindings includes:
AddressEditView.prototype.bindings = _.extend({}, AddressEditView.prototype.bindings, {
‘[name=”firstname”]’: ‘firstname’,
‘[name=”lastname”]’: ‘lastname’
});
3. In AddressEditView.saveForm, trigger profile fetch and event:
return savePromise
.done(() => {
ProfileModel.getInstance().fetch().done(() => {
Backbone.Events.trigger(“address:saved”);
$(‘.modal.in’).modal(‘hide’);
$(‘.modal-backdrop’).remove();
$(‘body’).removeClass(‘modal-open’);
});
});
4. In OrderWizardModulePaymentMethodSelector.initialize:
this.listenTo(Backbone.Events, ‘address:saved’, this.reRenderPaymentMethodSelector);
And implement:
reRenderPaymentMethodSelector: function () {
ProfileModel.getInstance().fetch().done(() => {
this.render();
});