0

I have a custom payment module and I am trying to show a message on the payment page using jQuery. My JS file is being called on the shipping page but not when the user clicks on the next step and the payment page is loaded. I am assuming that since it is already loaded it isn't looking for the div. If I shift-refresh on the payment page my JS loads but I cannot target a div ID. I am assuming because my JS runs before the page is loaded.

Here is my js:

define(
[
    'jquery'
],
  function($) {
    'use strict';

    $('document').ready(function(){
       if ( $('#payroll-form').attr('id') )  {
        alert("payment-form loaded");
       }
       alert("disabled loaded");
    });
});

The alert won't run in the if statement, but does outside of the if statement. How can I get this to load on the payment step and target the div after it gets rendered?

UPDATE

I am using this code:

define(
[
    'jquery'
],
  function($) {
    'use strict';

    jQuery('document').ready(function(){
        jQuery("#shipping-method-buttons-container button").click(function() {
           if ( jQuery('#checkout-payment-method-load').length && !jQuery('#payroll-form').length)  {
            jQuery('#checkout-payment-method-load').prepend('<div id="payroll-form">This is test message</div>');
           }
           alert("Clicked");
        });

        alert("new disabled");
    });
});

The alert "new disabled" loads on the shipping page. The alert "Clicked" does not show on the payment page when clicking on the Next button. Even if I remove the IF statement and leave in the alert "Click" does not show. All the ID's listed above are on the page. I can see the source file in the console. For some reason, it still doesn't work.

2 Answers 2

0

I've reviewed and I think you should call jquery on select shipping button click.

Please review the below example and it is working in default Magento setup.

define(['jquery'], function($) {
    'use strict';

    jQuery('document').ready(function(){
        jQuery("#shipping-method-buttons-container button").click(function() { 
           if ( jQuery('#checkout-payment-method-load').length && !jQuery('.message-alert-custom').length)  {
            jQuery('#checkout-payment-method-load').prepend('<div class="message-alert-custom">This is test message</div>');
           }
        });
    });
});

Hope this helps you.

Please let me know if you have any doubts.

10
  • Sorry, nothing appears on the page. Essentially I need to check to see if #payroll-form was loaded and if not show a message saying it is unavailable.
    – stanhook
    Sep 26, 2019 at 17:42
  • @stanhook have you changed the id or class field which I have mentioned as an example as per your checkout page? if you then it should work. Else provide button id when it should fire action, search for payroll-form in the payment section and display the message(also provide the class or div id where you want to display) I will update in my answer and make it work for you.
    – Nits
    Sep 26, 2019 at 17:48
  • I tested your code exactly as is. My shipping page and payment page has the same ID as above. Do I need to change class="message-alert-custom" and .message-alert-custom to my class? I thought it was going to add that div to the page.
    – stanhook
    Sep 26, 2019 at 17:57
  • No, it's fine. Can you please check our JS changes are reflecting on the checkout page or not?
    – Nits
    Sep 26, 2019 at 17:59
  • I had added an alert outside of the click function so I would know it loaded. The alert shows on the shipment page and I also see it in the console. When I click the button the message doesn't show on the payment page.
    – stanhook
    Sep 26, 2019 at 18:12
1

I did it through a PHTML which I added in the before.body.end container.

I'm loading my JS after the Ajax load on the checkout page using this snippet below.

<script>
    require(['jquery', 'Magento_Customer/js/customer-data', 'domReady!'], function($) {
        'use strict';

        $(document).ajaxComplete(function( event, xhr, settings ) {
                console.log( settings.url );
        });
    });
</script>
1
  • Rafael Corrêa Gomes, thanks for code
    – Robinio
    Nov 28, 2019 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.