コンテンツへスキップ
メニュー
この質問にフラグが付けられました
1 返信
246 ビュー

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.


アバター
破棄
著作者 最善の回答

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.



アバター
破棄
関連投稿 返信 ビュー 活動
1
1月 19
3511
2
12月 22
2745
0
7月 25
266
1
7月 25
5039
0
7月 25
599