OpenCart Community

Posted: **Tue May 11, 2021 2:00 am**

These issues can be reproduced on the current Opencart 3 demo page using a mobile device or emulator.

1. Add product to cart and attempt to checkout. (FYI, On the demo site, the HP laptop appears to be the only product "in stock").
2. Register at checkout on a mobile device. When you click the continue button:
a. If an error message appears due to missing fields, you don't see it because the windows does not focus on the error. For example, missing the privacy checkbox
b. If everything validates, and you click the continue button, you are scrolled down the bottom of the page footer and the check out accordion effectively disappears. You can scroll up and continue, but I am finding customers are getting confused by this.

I'm wondering if anyone has a fix for these issues.

Posted: **Tue May 11, 2021 2:01 am**

Full OC version. URL.

Posted: **Tue May 11, 2021 2:06 am**

>These issues can be reproduced on the current Opencart 3 demo page using a mobile device or emulator.

Your site: https://demo.opencart.com/
It looks like you are running Version 3.0.1.1, but this issue is also reproducible on 3.0.3.2 and 3.0.3.6

Posted: **Tue May 11, 2021 4:15 am**

See: https://github.com/opencart/opencart/is ... -761699290

Posted: **Wed May 12, 2021 3:04 am**

Thank you! For anyone interested here's an ocmod for the issues in this thread and a typo that I encountered.

Code: Select all

<file path="catalog/view/theme/*/template/checkout/checkout.twig">
		<!-- Typo fix on shipping_address check box -->
		<operation error="skip">
			<search><![CDATA[var shipping_address = $('#payment-address input[name=\'shipping_address\']:checked').prop('value');]]></search>
			<add position="replace"><![CDATA[var shipping_address = $('#collapse-payment-address input[name=\'shipping_address\']:checked').prop('value');]]></add>
		</operation>
		<!-- Scroll up to errors on address/register forms -->
		<operation error="skip">
			<search><![CDATA[$('.text-danger').parent().addClass('has-error');]]></search>
			<add position="after"><![CDATA[$('html, body').animate({ scrollTop: $(".alert-danger:first, .has-error:first").offset().top}, 500);]]></add>
		</operation>
		<operation error="skip">
			<search><![CDATA[$('.text-danger').parent().parent().addClass('has-error');]]></search>
			<add position="after"><![CDATA[$('html, body').animate({ scrollTop: $(".alert-danger:first, .has-error:first").offset().top}, 500);]]></add>
		</operation>
		<!-- Accordion scroll issue -->
		<operation error="skip">
			<search><![CDATA[{{ footer }}]]></search>
			<add position="before"><![CDATA[<script>$('#accordion').on('shown.bs.collapse', function (e) { var offset = $(this).find('.panel-collapse.in').offset(); if (offset) {$('html,body').animate({scrollTop: $('.panel-collapse.in').offset().top - 55}, 250);}});</script>]]></add>
		</operation>
	</file>

OpenCart Community

Scroll issues during mobile checkout

Scroll issues during mobile checkout

Re: Scroll issues during mobile checkout

Re: Scroll issues during mobile checkout

Re: Scroll issues during mobile checkout

Re: Scroll issues during mobile checkout