Scroll to error issue with fixed header
-
Hi again
I have a position:fixed header on my site which has been causing issues with when the WooCommerce checkout page encounters an error and scrolls up to show the notice. Because a fixed header’s height is not part of the page flow, it doesn’t scroll up far enough to see the error notice, which ends up hidden beneath the header.I have solved the problem for most cases by overriding WooCommerce’s $.scroll_to_notices() function to take account of the header’s height. Very thoughtful of them to make this an overrideable jQuery method.
However, when the Stripe plugin wishes to report an error, it doesn’t use this function, but instead has its own version which duplicates the scrolling functionality… and because of how late it loads, it’s providing resistant to being overridden (and I am loath to modify the plugin files themselves).
In assets/js/frontend/wc-stripe(.min).js, the function wc_stripe.BaseGateway.prototype.submit_message() contains the following:
$('html, body').animate({ scrollTop: ($container.offset().top - 100) }, 1000);
Would you please consider replacing this with:
$.scroll_to_notices($container);
You’ll see in woocommerce.js that function is defined thus:
$.scroll_to_notices = function( scrollElement ) { if ( scrollElement.length ) { $( 'html, body' ).animate( { scrollTop: ( scrollElement.offset().top - 100 ) }, 1000 ); } };
Thus, it will behave exactly the same as the existing code, but for those of us overriding this function to deal with a fixed header or other quirk of site design, our custom version will then work correctly for Stripe errors as it does for other checkout errors.
Best regards,
Ben
- The topic ‘Scroll to error issue with fixed header’ is closed to new replies.