wc-donation / wc-donation-platform

Donation Platform for WooCommerce unleashes the power of WooCommerce for your online fundraising, crowdfunding & crowdsponsoring
https://www.wc-donation.com/
GNU General Public License v2.0
41 stars 10 forks source link

[Feature Request] Auto-scroll to top of form when using back and next #56

Closed kkmiller09 closed 6 months ago

kkmiller09 commented 9 months ago

As users navigate forward and backward through the steps, they expect to scroll to the top of the step that is now visible.

Using Demo Style 1 https://wcdp.jonh.eu/demos/demo-style-1/. Tap Next to Step two, scroll to the bottom of the form as if you filled it all out. Tap Next and notice you are at the bottom of Step 3 and have to scroll up to fill out the first entry fields. In our case, users are missing the check box to pay for transaction fees.

The same issue applies to the back button, going from Step 2 back to Step 1 you have to scroll up to modify the amount.

jonas-hoebenreich commented 9 months ago

Hi, thanks for the suggestion :) Unfortunately, scroll to top cannot be implemented completely straight forward, as the donation form could be covered by a header (which varies in height depending on the page). However, I am keeping the idea in the backlog and if someone from the community would like to implement this, he/she is of course very welcome. Best, Jonas

kkmiller09 commented 9 months ago

Thank you, I'm new to this plug-in today but I absolutely love it so far. I don't feel like I know it well enough to test out all the scenarios, however for a form Demo1 style, these two lines of JS added to the bottom of the wcdp_steps function seems to work for us. It would be great if it can get rolled into the plug-in at some point but I understand there are probably more scenarios than ours to deal with that may add complexity.

    var elem = document.getElementById("wcdp");
    elem.scrollIntoView();
jonas-hoebenreich commented 9 months ago

Oh great idea. scrollIntoView actually takes care of other elements (mostly the header) that could cover the donation form. I will add this to the codebase :)

github-actions[bot] commented 6 months ago

Hello! It seems like this issue hasn't seen any activity for a while. Is it still relevant? If so, feel free to update us and we'll be happy to assist!