Doesn’t work in Customer Payment Page

I found within “/assets/js/frontend/wc-checkout-terms-popup.js” on line 5 is $( document.body ).bind( 'updated_checkout', this.terms_update ); that binds the ‘updated_checkout’ trigger to the ‘terms_update’ function.

The ‘updated_checkout’ trigger is apparently found in “/woocommerce/assets/js/frontend/checkout.js”, which is within the ‘update_checkout_action’ function. Unfortunately, I cannot find any trigger for the Customer Payment Page.

I’ll appreciate it if you can shed some light on this issue. Thanks in advance.

I’ve tried a few jQuery scripts, and all of them failed. Wasted 3 days trying to figure out why the modal popup size cannot be altered. Even applying CSS was in vain.

Eventually, I came across this GitHub page, which I hope may work. I’m yet to find the time to test it out.

Perhaps you can take the lead to try it out first @pthpndr

• This reply was modified 5 years, 11 months ago by Jason Wong.

@pthpndr

I’ve tested the JS function from the GitHub, and sadly it doesn’t work.
In the end, I’ve concatenated my original jQuery script to the following.

// Trigger 'updated_checkout' event in Order-Pay page. Add action at priority 300.
function wctp_trigger_updated_checkout_order_pay() {
	if ( is_wc_endpoint_url( 'order-pay' ) ) {
?>
  <script>
  jQuery(function($) {
    $( 'body' ).trigger( 'updated_checkout' );

    /* trigger when window has resized */
    $(window).resize(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	// get current width of browser viewport

      // if newWidth is less than 650 pixels
      if (newWidth < 650) {
        var popupWidth = newWidth - 20;
        termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
        termsLink.setAttribute('href', termsNewUrl);
      }
    //  alert(termsNewUrl);
    });

    /* trigger when page is ready */
    $(window).load(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	// get current width of browser viewport

      // if newWidth is less than 650 pixels
      if (newWidth < 650) {
        var popupWidth = newWidth - 20;
        termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
        termsLink.setAttribute('href', termsNewUrl);
      }
    //  alert(termsNewUrl);
    });

  });
  </script>
<?php
	}
}
add_action( 'wp_footer', 'wctp_trigger_updated_checkout_order_pay', 300 );

It overwrites the width for the popup window when it detects the viewport width is less than 650 pixels. Although the HREF for the Terms and Conditions anchor gets overwritten, it’s unfortunate that the parameters aren’t parsed. There’s a definite problem with the tb_parseQuery function in thickbox.js as the parameter values are always set at default.

This requires further investigation as to why tb_parseQuery isn’t parsing the HREF parameter values.

@pthpndr I tried out what you discovered, and it was the answer to our problem.

The following snippet is what I’ve put together for the “Order Pay” page, which eventually worked.

// Trigger 'updated_checkout' event in Order-Pay page. Add action at priority 300.
function wctp_trigger_updated_checkout_order_pay() {
	if ( is_wc_endpoint_url( 'order-pay' ) ) {
?>
  <script>
  jQuery(function($) {
    $( 'body' ).trigger( 'updated_checkout' );

    /* when checkout terms anchor tag is clicked */
    $('a.wc-checkout-terms-open-modal').click(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	 // get current width of browser viewport
      var popupWidth = 600;  // reset to default value minus 30px

      // if newWidth is less than 630 pixels
      if (newWidth < 630)  popupWidth = newWidth - 50;

      termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
      termsNewUrl = termsNewUrl.replace("#TB_inline", "/TB_inline");
      termsLink.setAttribute('href', termsNewUrl);

      tb_show( "Terms & Conditions", termsNewUrl );  // re-initiate tb_show()
    });

  });
  </script>
<?php
	}
}
add_action( 'wp_footer', 'wctp_trigger_updated_checkout_order_pay', 300 );

What a huge relief !! I hope it’ll work for you too.

You’re welcome, @pthpndr

Don’t forget to add the other snippet for the “Checkout” page.