On the checkout page of the website the complete list of the address is displayed be default. Instead, we need to show only the selected address and hide all the unselected addresses in the address section.
In case customers need to update their selected address, provide a dropdown section, which shows the complete list of addresses linked to their account.
Upon making a new selection, only the newly chosen address will be displayed.
If no address is selected for a customer, then the entire list of addresses will be shown in the address section.
JavaScript file.
_.extend(OrderWizardModuleAddress.prototype, {
template: jj_checkoutpageupdate_selectedmodule_tpl,
childViews: _.extend(OrderWizardModuleAddress.prototype.childViews, {
'Shipping.Address.List': function () {
return new BackboneCollectionView({
collection: this.getAddressesToShow(),
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),
rowTemplate: order_wizard_address_row_tpl,
cellTemplate: order_wizard_address_cell_tpl,
childView: AddressDetailsView,
childViewOptions: this.getAddressListOptions()
});
},
'Billing.Address.List': function () {
return new BackboneCollectionView({
collection: this.getAddressesToShow(),
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),
rowTemplate: order_wizard_address_row_tpl,
cellTemplate: order_wizard_address_cell_tpl,
childView: AddressDetailsView,
childViewOptions: this.getAddressListOptions()
});
},
'Selected.Shipping.Address': function () {
var selectedAddress = this.addressId;
var addressList = this.getAddressesToShow();
this.selectedShipAdd = addressList.find(item => item.id === selectedAddress);
if (!!selectedAddress) {
addressList = addressList.find(item => item.id === selectedAddress);
} else {
addressList = this.getAddressesToShow();
}
return new BackboneCollectionView({
collection: addressList,
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),
rowTemplate: order_wizard_address_row_tpl,
cellTemplate: order_wizard_address_cell_tpl,
childView: AddressDetailsView,
childViewOptions: this.getAddressListOptions()
});
},
'Selected.Billing.Address': function () {
var selectedAddress = this.addressId;
var addressList = this.getAddressesToShow();
this.selectedBillAdd = addressList.find(item => item.id === selectedAddress);
if (!!selectedAddress) {
addressList = addressList.find(item => item.id === selectedAddress);
} else {
addressList = this.getAddressesToShow();
}
return new BackboneCollectionView({
collection: addressList,
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),
rowTemplate: order_wizard_address_row_tpl,
cellTemplate: order_wizard_address_cell_tpl,
childView: AddressDetailsView,
childViewOptions: this.getAddressListOptions()
});
},
}),
getContext: _.wrap(OrderWizardModuleAddress.prototype.getContext, function (fn) {
try {
var original = fn.apply(this, _.toArray(arguments).slice(1));
var adressSection = original.manageValue;
if (adressSection === 'shipaddress') {
original.isShipping = true;
original.showChangeShipAddOption = !!this.addressId ? true : false;
} else if (adressSection === 'billaddress') {
original.isBilling = true;
original.showChangeBillAddOption = !!this.addressId ? true : false;
} else {
original.isShipping = false;
original.isBilling = false;
}
original.showDefAddsList = this.addresses && this.addresses.length < 2 || false
return original;
} catch (e) {
console.log('error@OrderWizardModuleAddress', e);
}
}),
});
Template file.
<div class="order-wizard-address-module">
<div class="order-wizard-address-module-show-addresses-container">
{{#if showTitle}}
<h3 class="order-wizard-address-module-title">
{{title}}
</h3>
{{/if}}
{{#if isSameAsEnabled}}
<label class="order-wizard-address-module-checkbox">
<input {{#if isSameAsCheckBoxDisable}}disabled="disabled" {{/if}} type="checkbox" name="same-as-address"
data-action="same-as" value="1" {{#if isSameAsSelected}}checked{{/if}}>
{{sameAsMessage}}
</label>
{{/if}}
{{#if showAddressList}}
<div id="order-wizard-address-module-placeholder" {{#if showManageValue}}data-manage="{{manageValue}}" {{/if}}
class="order-wizard-address-module-list-placeholder">
<div class="order-wizard-address-module-address-container">
{{#if showDefAddsList}}
<div data-view="Address.List"></div>
{{else}}
{{#if isShipping}}
{{#if showChangeShipAddOption}}
<div class="order-wizard-address-module-address-container">
<div data-view="Selected.Shipping.Address"></div>
</div>
<div class="order-wizard-address-expander-head" id="shipping-address-list-selection">
<a class="order-wizard-address-expander-head-toggle collapsed" data-toggle="collapse"
data-target="#shippin-address-list" aria-expanded="false" aria-controls="shippin-address-list">
{{translate 'Change Address'}}
<i class="order-wizard-paymentmethod-giftcertificates-module-expander-icon"></i>
</a>
</div>
<div id="shippin-address-list" class="order-wizard-address-list-section collapse"
data-action="shippin-address-list">
<div class="order-wizard-address-module-expander-container">
<div data-view="Shipping.Address.List" class="shipping-address-block"></div>
</div>
</div>
{{else}}
<div data-view="Address.List"></div>
{{/if}}
{{/if}}
{{#if isBilling}}
{{#if showChangeBillAddOption}}
<div class="order-wizard-address-module-address-container">
<div data-view="Selected.Billing.Address"></div>
</div>
<div class="order-wizard-address-expander-head" id="billing-address-list-selection">
<a class="order-wizard-address-expander-head-toggle collapsed" data-toggle="collapse"
data-target="#billing-address-list" aria-expanded="false" aria-controls="billing-address-list">
{{translate 'Change Address'}}
<i class="order-wizard-paymentmethod-giftcertificates-module-expander-icon"></i>
</a>
</div>
<div id="billing-address-list" class="order-wizard-address-list-section collapse"
data-action="billing-address-list">
<div class="order-wizard-address-module-expander-container">
<div data-view="Billing.Address.List" class="biling-address-block"></div>
</div>
</div>
{{else}}
<div data-view="Address.List"></div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{else}}
<div id="address-module-form-placeholder" {{#if showManageValue}}data-manage="{{manageValue}}" {{/if}}
class="order-wizard-address-module-form-placeholder">
<div data-view="New.Address.Form"></div>
{{#if showSaveButton}}
<div class="order-wizard-address-module-form-actions">
<button type="submit" class="order-wizard-address-module-save-button" data-action="submit">
{{translate 'Save Address'}}
</button>
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>