Skip to Content
This question has been flagged
javascriptwebsite_saleWebsite
1 Respondre
1902 Vistes
Avatar
Diego Naranjo

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.


Avatar
Descartar
Avatar
Diego Naranjo
Autor Best Answer

I have found the solution, I share it:

Conditional Loading with a Dedicated Helper File

We implemented a strategy using Odoo's asset loading capabilities:

Conditional Execution in payment_form.js:

The main payment_form.js (a lightweight entry point in web.assets_frontend) now checks the current page. If it's /shop/payment, it dynamically loads a heavier helper file:

const isInPaymentPage = window.location.pathname.includes('/shop/payment');
if (isInPaymentPage) {
    loadJS("/cards_gateway/static/src/js/payment_form_helper.js").then(() => {
        // ... then extend publicWidget.registry.PaymentForm
    });
}

Dedicated Helper File (payment_form_helper.js):

All specific, heavier logic (e.g., currency formatting, error handling, transaction preparation, and detailed UI updates) was moved here.

Global Exposure: Functions are in an object (cardsPaymentHelpers) exposed to window for accessibility by payment_form.js.

Dependency Passing: rpc and _t (translation) are passed as arguments to helper functions, maintaining modularity without ES6 imports in the helper.

Benefits:

Reduced Initial Load: Lighter payment_form.js loads everywhere; heavy logic is deferred.

Improved Performance: Faster page loads on non-payment pages.


Clear Separation of Concerns: Clean orchestration in payment_form.js, detailed logic in payment_form_helper.js.

Scalability & Compatibility: Easily adaptable for other page-specific JS, leveraging standard Odoo features while optimizing.



Avatar
Descartar
Related Posts Respostes Vistes Activitat
how to inherit _onCarrierUpdateAnswer() to update some info on selecting delivery carrier
javascript website_sale odoo11community
Avatar
Avatar
1
de gen. 19
4381
[v15] header: change selector for cart popup Solved
javascript inheritance override website_sale
Avatar
Avatar
2
de des. 22
3615
Error While Installing Accounting Module in Odoo 19 Enterprise (Works on Another PC)
javascript
Avatar
0
de nov. 25
195
Cannot import @website_sale/js/utils
javascript
Avatar
Avatar
2
de nov. 25
838
Cómo cerrar una transferencia interna al recibirla desde la vista de código de barras stock.picking
javascript
Avatar
0
de jul. 25
1289