JJ.SiteEnhancer.Checkout.Entry.js
_.extend(OrderWizardModulePaymentMethodSelector.prototype, {
template: jj_order_wizard_paymentmethod_selector_module_tpl,
editAddressHandler: function (e) {
e.preventDefault();
const $target = jQuery(e.currentTarget);
const customTitle = $target.data(‘title’) || ‘Edit Address’;
// Store original methods before overriding
_.extend(AddressEditView.prototype, {
initialize: _.wrap(AddressEditView.prototype.initialize, function (fn, options) {
fn.apply(this, Array.prototype.slice.call(arguments, 1));
this.page_header = customTitle; // Set custom title dynamically
})
});
// Open the modal
const modalInstance = this.options.application.getLayout().showInModal(new AddressEditView());
// Restore original methods after modal closes
modalInstance.once(‘afterClose’, function () {
AddressEditView.prototype.initialize = originalInitialize;
console.log(‘Modal closed, AddressEditView restored’);
});
// Extend AddressEditView dynamically
},
selectAddress: function (e) {
// jQuery(‘.wizard-content .alert-error’).hide();
let addressId = jQuery(e.target).data(‘id’).toString();
this.setAddress(addressId);
this.render();
this.trigger(‘ready’, true);
},
setAddress: function (address_id) {
this.model.set(‘billaddress’, address_id);
this.addressId = address_id;
this.trigger(‘change:billaddress’, address_id);
this.render();
return this;
},
toggleSameAsShipping: function (e) {
const isChecked = jQuery(e.target).prop(‘checked’);
const shippingAddressId = this.model.get(‘shipaddress’);
let billingAddressId = this.model.get(‘billaddress’);
// Store the previous billing address if checkbox is checked
if (isChecked) {
this.model.set(‘previousBillingAddress’, billingAddressId);
this.model.set(‘billaddress’, shippingAddressId);
} else {
// Restore the previous billing address if checkbox is unchecked
const previousBillingAddress = this.model.get(‘previousBillingAddress’);
this.model.set(‘billaddress’, previousBillingAddress || ”);
}
// Store the checkbox state properly
this.model.set(‘isSameAsChecked’, isChecked);
this.render(); // Rerender the view to reflect changes
}
,
getAddressesToShow: function () {
let profile = ProfileModel.getInstance();
let addresses = profile.get(‘addresses’) || new Backbone.Collection();
let selectedBillingAddressId = this.model.get(‘billaddress’);
let updatedAddresses = new Backbone.Collection(addresses.models || []);
let selectedBillingAddress = addresses.get(selectedBillingAddressId);
if (selectedBillingAddressId && selectedBillingAddress) {
let newBillingAddress = selectedBillingAddress.clone();
newBillingAddress.set({
‘internalid’: “-1”,
‘isNew’: true,
});
updatedAddresses.add(newBillingAddress, { at: updatedAddresses.length });
}
return updatedAddresses;
},
getAddressListOptions: function () {
let profile = ProfileModel.getInstance();
let isLoggedIn = profile.get(‘isLoggedIn’) === ‘T’;
return {
isBilling: true,
selectMessage: this.selectMessage || ”,
hideDefaults: true,
selectedAddressId: this.model.get(‘billaddress’) || ”,
isSelected: false,
showSelector: true,
manage: this.manage,
isNew: this.model.get(‘isNew’) || false,
isbill: true,
hideActions: !isLoggedIn,
isbillpopup: true,
title: “Update Your Billing Address”,
new: “Add New Billing Address”
};
},
getContext: _.wrap(OrderWizardModulePaymentMethodSelector.prototype.getContext, function (fn) {
let context = fn.apply(this, Array.prototype.slice.call(arguments, 1));
let addresses = this.getAddressesToShow();
let selectedBillingAddress = this.model.get(‘billaddress’) || ”;
let billingAddress = selectedBillingAddress;
let shippingAddress = this.model.get(‘shipaddress’)|| ”;
let isSameAsSelected = !!(billingAddress && shippingAddress && billingAddress === shippingAddress);
return _.extend(context, {
isSameAsSelected: isSameAsSelected,
isSameAsEnabled: true,
isSameAsCheckBoxDisable: false,
sameAsMessage:”Same as shipping address”,
selectedBillingAddress: selectedBillingAddress,
hasAddresses: addresses.length > 0
});
})
});
jj_order_wizard_paymentmethod_selector_module.tpl
<div class=”order-wizard-paymentmethod-selector-module”>
<div class=”order-wizard-paymentmethod-selector-module-payment-method-selector-content”
id=”payment-method-selector-content”></div>
<!– Billing Address Modal –>
<div class=”order-wizard-address-modal-trigge custom-address-button”>
{{#if hasAddresses}}
<div class=”order-wizard-address-module-address-container”>
<!– <h2 class=”title “>Bill to Address:</h2> –>
{{#if isSameAsEnabled}}
<label class=”order-wizard-address-module-checkbox” style=”display: none;”>
<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}}
<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>
<div data-view=”Selected.Billing.Address”></div>
</div>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#billingAddressModal”>
{{translate ‘Change’}}
</button>
{{/if}}
</div>
<div id=”billingAddressModal” class=”modal fade custom-address” tabindex=”-1″ role=”dialog”
aria-labelledby=”billingAddressModalLabel” aria-hidden=”true”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h4 class=”modal-title” id=”billingAddressModalLabel”>{{translate ‘Change Your Billing Address’}}
</h4>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
<h5 id=”myAddress”>My Addresses</h5>
</div>
<div class=”modal-body”>
<div data-view=”Billing.Address.List” class=”billing-address-block”></div>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>{{translate ‘Close’}}</button>
</div>
</div>
</div>
</div>
</div>