Scenario
By defaut SCA provide us 3 column for Shipping Address in one row in Checkout page, If we need to set 2 column or ( N number of column )in 1 row and if we will try to set with CSS, we will face alignment issue in different device So to solve this kind of issue we need to go with SCA Standard code as shown below.
Solution
we need to create the Extension
we need to extend the OrderWizardModulesAddress
_.extend(OrderWizardModuleAddress.prototype, {
childViews: _.extend({}, OrderWizardModuleAddress.prototype.childViews, {
‘Address.List’: function () {
return new BackboneCollectionView({
collection: this.getAddressesToShow(),
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 2 : Utils.isTabletDevice() ? 2 : 1),
rowTemplate: order_wizard_address_row_tpl,
cellTemplate: order_wizard_address_cell_tpl,
childView: AddressDetailsView,
childViewOptions: this.getAddressListOptions()
});
}
})
});
Before
After
