We are having a problem with checkout in which the customer completes all four checkout steps, but then they click away from the page without clicking “Place Order.” Later, they are upset because their product never arrives.
While this is certainly a “user error,” it happens enough that we’d like to improve the interface to prevent it. We would like to ask for user confirmation “Are you sure you want to navigate away from this page?”
I’d like this to happen only if they get as far as step four of checkout. Does anyone have any suggestions? For further detail, here is what I have tried so far.
Gave the summary_form a class of “cm-check-changes” in step_four.tpl. Nothing happened when I did this.
Tried this code in step_four.tpl, line 120, but it gives me the confirmation before step_four appears, and the bottom of step four is not displayed (i.e. comment box, cart totals, and second Place Order button)
{literal}<br />
<script type="text/javascript"><br />
var celm = jQuery.lastClickedElement;<br />
window.onbeforeunload = confirm('You have not placed your order. Are you sure you want to leave this page?');<br />
</script><br />
{/literal}
```<br />
<br />
3. Tried this code in step_four.tpl, line 120, but it gives me a continuous "Loading..." box at the top of the page<br />
```php
{literal}<br />
<script type="text/javascript"><br />
var celm = jQuery.lastClickedElement;<br />
window.onbeforeunload = if ($('#step_four_body').hasClass('step-body-active') ) confirm('You have not placed your order. Are you sure you want to leave this page?');<br />
</script><br />
{/literal}
Very good question, i have the exact same problem, some people don’t realize they haven’t placed the order and then complain of never receiving it, does anyone have a solution…please?
Turns out that I was on the right track, but limited by my lack of javascript/jquery knowledge. Here is what you can do to prompt a user about leaving checkout if they have completed the checkout process.
Open /skins/your_skin_name/customer/views/checkout/components/steps/step_four.tpl
{* Prompt user if they attempt to navigate away from page before placing a completed order *}
{literal}
{/literal}
2. That puts the code to create a prompt, but if you stop there, they will get a prompt whatever they click, including if they click Place Order! To prevent this, I added a class “ok_to_click” to the Place Order buttons.
[quote name=‘customfx’]I think closing off the tab/windows is probably the biggest issue here rather than navigating back to another page of the shop.[/QUOTE]
I completely agree. I have been toying with this myself and going back and forth with support, and I ended up going a bit off mission! I had initially tried to reverse engineer that same code, but kept getting slightly off behavior.
I went back to the drawing board a bit, and I think I found out what I was doing wrong - I needed to wrap my code within a “$(document).ready(function() { }”. In any case - here is the new/improved - it appears to allow clicks on Place Order buttons, BUT if you click on anything else (even browser back button) or attempt to close the window/tab, it will prompt you with the message. Give it a try and let me know if I missed anything.
```php
{* Prompt user if they attempt to navigate away from page before placing a completed order *}
[quote name=‘mirnitagl’]Has anyone tried this for 2.0.14 ? what file must be modified? can not locate step_four.tpl[/QUOTE]
It should work just fine, but you can find the code for step_four inside /skins/your_skin_name/customer/views/checkout/components/checkout_steps.tpl. You may run into trouble since the steps are all in one file - you might get that prompt when people are just typing “continue” to get from step 2 to step 3, for example.
If that happens, you can try putting the code in an if statement, like this:
{if $edit_step == "step_four"}
//paste code here
{/if}
