When you click on the “Confirm” button, at the end of booking, and you didn’t fill a required field(s), the field(s) gets highlighted with a small writing underneath. “Please enter…” or “This field is required”. However, you have to manually scroll up to see it. The page should be scrolled up automatically.
Can this be done? It's quite confusing when you click the "Confirm" button and nothing happens.
You would be able to achieve this with some custom JS. For example, scrolling services into view for the Amelia Catalog view is achieved with this code:
<script>window.beforeBookingLoaded = function () {document.getElementById('am-service-booking').scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});}</script>
You would need to find the correct selector instead of "am-service-booking", and the right JS hook instead of "beforeBookingLoaded".
This particular error has this class: "el-form-item__error"
So, you would need to create a custom script that scrolls that class into view after it comes up.
Probably with an event listener, you would be able to do this, but this isn't included in the provided support for the plugin, so we are limited to help you with that. If we had an example of this, I would've gladly shared it with you.
Thanks for your reply. The mentioned functionality is part of user experience and I think it should work out of the box without adding any custom code. Can you please add this request to the developers, please?
Hello,
When you click on the “Confirm” button, at the end of booking, and you didn’t fill a required field(s), the field(s) gets highlighted with a small writing underneath. “Please enter…” or “This field is required”. However, you have to manually scroll up to see it. The page should be scrolled up automatically.
Can this be done? It's quite confusing when you click the "Confirm" button and nothing happens.
Many thanks in advance.
Cheers,
Richard
Hello Richard,
I will confirm with the team what we can do and get back to you early next week.
Hi Den,
Thanks very much for that. Looking forward to hearing from you.
Regards,
Richard
Hi Richard,
You would be able to achieve this with some custom JS. For example, scrolling services into view for the Amelia Catalog view is achieved with this code:
<script>window.beforeBookingLoaded = function () {document.getElementById('am-service-booking').scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});}</script>You would need to find the correct selector instead of "am-service-booking", and the right JS hook instead of "beforeBookingLoaded".
This particular error has this class: "el-form-item__error"
So, you would need to create a custom script that scrolls that class into view after it comes up.
Probably with an event listener, you would be able to do this, but this isn't included in the provided support for the plugin, so we are limited to help you with that. If we had an example of this, I would've gladly shared it with you.
Hi Den,
Thanks for your reply. The mentioned functionality is part of user experience and I think it should work out of the box without adding any custom code. Can you please add this request to the developers, please?
Many thanks,
Richard
Hi Richard,
Sure thing.
It would be useful if you could submit your opinion here as well:
https://wpamelia.cnflx.io/boards/feature-requests
Hi Den,
Thanks for forwarding my request to the developers. I've just done that too at the link you had provided.
Cheers,
Richard