[12.0] website_js_below_the_fold: odoo.define is not a function on /payment/process

[mgielissen]

When processing a payment in the webshop, /payment/process gives an error in webconsole:

process:298 Uncaught TypeError: odoo.define is not a function
at process:298

<script> odoo.define('payment.processing_bootstrap', function(require) { ...</script>

[eversatis]

I have the same issue which cause payment/process stuck and no jump to confirmation page.

[eversatis]

Why no one pay attention to this issue? the module is good in speed performance but it cause payment issues. I can reproduce it in the odoo runbot. So it is definitely an bug. Is there anyway not put the js below the fold on payment page?

[eversatis]

@tarteo Could you have look into the issue please. Thank you

[ska-ibees]

Yes, I can confirm this issue.
/payment/process is only one example. Same issue could happen with any page having inline JS script which requires JS bundles as dependency.

[tarteo]

@frankmiao2015

Why no one pay attention to this issue? the module is good in speed performance but it cause payment issues. I can reproduce it in the odoo runbot. So it is definitely an bug. Is there anyway not put the js below the fold on payment page?

This is a community where nobody is obligated to work on something...
I never used the Odoo e-commerce module so this issue never occurred to me. I will fix this when I need it for a project myself.
If this bug is so obstructive why don't you fix it yourself?

[ska-ibees]

@tarteo First of all thanks for sharing your hard work with the community. Yes, we should try to solve things by over own first. A way to learn... but you know common problems with the newbies like me...

@mgielissen @frankmiao2015

I would like to share a workaround... I have successfuly tested it. But please do your testing and let me know if you find any issues.
The main reason for this error is that "odoo.define" needs odoo's javascript modules to load first.
Since, website_js_below_the_fold is putting js assets after the wrapwrap div (). So any script depending upon odoo's js assets will fail.

Now the workaround for the payment process page!
Looking at the example of im_live chat script. We need to execute payment script after DOMContentLoaded. Means execute this script when browser finishes downloading all the resources.
For further reading: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

To achieve this, please add below code in your theme or any custom module.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="payment_page_fix" inherit_id="payment.payment_process_page">
<xpath expr="//script" position="replace">

<script>
            document.addEventListener("DOMContentLoaded", function(event) {
                odoo.define('payment.processing_bootstrap', function(require) {
                    var PaymentProcessing = require('payment.processing');
                    var processingWidget = new PaymentProcessing(null, <t t-esc="payment_tx_ids"/>);
                    processingWidget.attachTo($('.o_payment_processing'));
                });
            });
   </script>

</xpath>
</template>
</odoo>

[eversatis]

@tarteo First, I should say sorry to disturb you by the @ action and this time again. But I did not mean that you are obligated on the thing. I was just trying to draw your attention in case you did not aware of the issue. As for the fix, honestly speaking, I barely have no knowledge on js. I am new to coding as well as github. I simply tried the @function by the author key word and in luck found you. I will not be so rude anymore in the future to @ someone who is not care for sure. Anyway, Thanks for your contribution.

@go4site I applied your fix on my theme template. It works for all payments now. Thank you very much!

[ska-ibees]

You are welcome @frankmiao2015 . Happy to help!

[flotho]

@go4site , I confirm that your patch s working.
Maybe the module has to had a little rewrite so that this inheritance could be handled properly by the module.
What's you point of view ?

[bizzappdev]

meanwhile, don't you think so it would be great to add this as known issue in the module readme?

[ska-ibees]

@flotho @bizzappdev
Sorry for the late reply.
I agree with both of you. In fact, this impact is very critical as it affects payment flow and you do not know unless you test it.

I hope Tarteo reads it and adds my code in the module or at least adds this as known issue in the module readme.

[ivantodorovich]

Yeap, just found the same issue..

I've created this PR to fix it: #736

[eLBati]

So, this issue can be closed?

[ivantodorovich]

Yes it can!

[baba75]

On a fresh database with these modules installed:
website_event
website_event_sale
website_js_below_the_fold_payment
website_lazy_load_image

The event registration button is not working for public user. (But it works when logged in as a standard user)

[github-actions]

There hasn't been any activity on this issue in the past 6 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 30 days.
If you want this issue to never become stale, please ask a PSC member to apply the "no stale" label.