I'm developing a payment gateway module for Odoo 18. The module includes several JavaScript files that are currently loaded on all frontend pages, but these files are only used on the payment page /shop/payment.
What is the best practice in Odoo 18 to load JavaScript files conditionally, only when the user accesses the /shop/payment page?
Context:
Some data from current manifest.py:
'data': [
'security/ir.model.access.csv',
'views/payment_form_templates.xml',
],
'assets': {
'web.assets_frontend': [
'cards_gateway/static/src/js/payment_form.js',
'cards_gateway/static/src/scss/payment_form.scss',
],
Current payment_form.js structure:
/** @odoo-module **/
import { rpc } from '@web/core/network/rpc';
import publicWidget from '@web/legacy/js/public/public_widget';
publicWidget.registry.PaymentForm.include({
events: Object.assign({}, publicWidget.registry.PaymentForm.prototype.events, {
'change select[name="o_cards_brand"]': '_onCardBrandChange',
'change select[name="o_cards_installments"]': '_onInstallmentsChange'
}),
/**
* @override
*/
async start() {
await this._super(...arguments);
this.cardsState = {
amount: undefined,
providerId: undefined,
currency: undefined,
selectedCardBrand: undefined,
selectedInstallments: undefined,
interestRate: 0.0
};
if (this.paymentContext) {
this.cardsState.amount = this.paymentContext.amount;
this.cardsState.providerId = this.paymentContext.providerId;
this.cardsState.currency = this.paymentContext.currencyId;
}
},
All others functions....
});
export default publicWidget.registry.PaymentForm;
Goals:
- Avoid loading JS files unnecessarily on all pages.
- Maintain compatibility with Odoo 18's assets and module system.
- Follow best practices recommended by Odoo SA and OCA.
- Make the solution scalable for other similar modules.
- What approach do you recommend to achieve conditional loading of JavaScript files in Odoo 18?
Thanks in advance.
