JJ.AddressFilter.AddressFilter.js (Entry Point)
mountToApp: function (container) {
var environment = container.getComponent(‘Environment’);
var configuration = environment && environment.getConfig ? environment.getConfig() : {};
var shippingConfig = configuration.AddressFilter || {};
var enabled = shippingConfig.enabled || true;
if (!enabled) {
return;
}
_.extend(OrderWizardModuleAddress.prototype, {
events: _.extend({}, OrderWizardModuleAddress.prototype.events, {
“keyup .address-filter-input”: “onAddressFilter”,
“click .toggle-address-list”: “onToggleAddressList”,
}),
initialize: _.wrap(
OrderWizardModuleAddress.prototype.initialize,
function (fn) {
fn.apply(this, _.toArray(arguments).slice(1));
// store original
this.originalAddressCollection = this.getAddressCollection();
// create filtered clone
this.filteredAddressCollection = this.originalAddressCollection.clone();
// add synthetic entry
this.filteredAddressCollection.add(
new this.originalAddressCollection.model({
internalid: –1,
fullname: “Add New Address”,
isSynthetic: true
})
);
// render template HTML
try {
this.filterHTML = Utils.renderTemplate(jj_address_filter_tpl, {});
} catch (e) {
this.filterHTML = jj_address_filter_tpl;
}
}
),
//——————————————————————
// ① THE FIX: Override getAddressesToShow()
//——————————————————————
getAddressesToShow: function () {
return this.filteredAddressCollection; // <<< THIS IS THE FIX
},
//——————————————————————
// ① THE FIX: Toggle Address List visibility
//——————————————————————
onToggleAddressList: function () {
console.log(“Toggling address list visibility”);
this.isListCollapsed = !this.isListCollapsed;
jQuery(“#order-wizard-address-module-placeholder”).toggle()
},
//——————————————————————
// Filter logic
//——————————————————————
onAddressFilter: function (e) {
const q = jQuery(e.currentTarget).val().toLowerCase();
const filtered = this.originalAddressCollection.filter(function (addr) {
const t =
(addr.get(“fullname”) || “”) +
” “ +
(addr.get(“addr1”) || “”) +
” “ +
(addr.get(“city”) || “”) +
” “ +
(addr.get(“state”) || “”) +
” “ +
(addr.get(“zip”) || “”);
return t.toLowerCase().includes(q);
});
// synthetic
filtered.push(
new this.originalAddressCollection.model({
internalid: –1,
fullname: “Add New Address”,
isSynthetic: true
})
);
// update your internal collection too
this.filteredAddressCollection.reset(filtered);
console.log(“Filter applied, updating Address.List view…”);
//——————————————————————
// 🔥 IMPORTANT PART: RE-RENDER ONLY Address.List VIEW
//——————————————————————
// get the live instance rendered by SCA
const listView =
this.childViewInstances &&
(this.childViewInstances[“Address.List”]);
if (this.addressListView) {
this.addressListView.render()
} else {
console.warn(“Address.List child view not found.”);
}
},
getAddressListView: function () {
this.addressListView = new BackboneCollectionView({
collection: this.filteredAddressCollection,
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(),
});
return this.addressListView;
},
childViews: _.extend(
{},
OrderWizardModuleAddress.prototype.childViews,
{
‘Address.List’: function () {
return this.getAddressListView();
},
}
),
//——————————————————————
// Insert filter input box before Address.List
//——————————————————————
render: _.wrap(
OrderWizardModuleAddress.prototype.render,
function (fn) {
fn.apply(this, _.toArray(arguments).slice(1));
const $place = this.$(“.order-wizard-address-module-list-placeholder”);
if ($place.length && !this.$(“.address-filter-input”).length) {
$place.before(this.filterHTML);
this.delegateEvents();
}
return this;
}
)
});
}
jj_address_filter.tpl (Template)
<a href=”#” class=”toggle-address-list”>Show/Hide Address List
<i class=”order-wizard-paymentmethod-giftcertificates-module-expander-icon”></i>
</a>
<div class=”jj-address-filter-box” style=”margin-bottom: 10px;”>
<input type=”text”
class=”address-filter-input”
placeholder=”Search for an address…”
style=”width: 100%; padding: 10px; border: 1px solid #ccc;” />
</div>