Virtuemart Shopping Cart reloads itself entirely after Order Confirmation

[precizor]

Joomla Version 3.9.7
Website: precizor.nl

Hello guys!
I have actually tried to find a solution for days, also tried to change some stuff in the core but no success. I am having a problem with the virtuemart shopping cart. Here's an overview:

1 - Lets say, we are on this page: https://precizor.nl/index.php/nl/shopping-cart-2 (shopping cart)

b - User has performed the following actions:
Added a Product to the Cart
Selected the Payment Method
Added his Shipment Detail
Enabled the tos checkbox

2 - User clicks the Confirm Order button and gets redirected here: https://precizor.nl/index.php/nl/webshop/cart/orderdone

3 - This new page that got loaded looks pretty much exactly the same.
The user can see a green box. (Looks like some kind of system message that failed to load)

4 - If the user clicks the Confirm button again, only then does he get redirected to the payment procedure.



Is there a way to skip this additional page? A couple of observations below:
1 - Once the additional order button has been clicked, the user always gets redirected directly (thus without seeing the additional page). This is ofcourse if he chooses to come back and change something.

2 – If in Configuration > User Fields > Tos > Default = 1, thus when the checkbox is enabled by default, this happens:
a – A different first page gets loaded: https://precizor.nl/index.php/nl/shopping-cart-2/checkout
b – Repeat 1b
c – User clicks the Confirm Order Button.
d – Gets redirected here: https://precizor.nl/index.php/nl/shopping-cart-2
e – Keeps getting redirected to the same page when ever he clicks on the order confirm button.

Thank you for reading. Any help would be extremely appreciated. Users are getting confused and think that there is a problem with the site and don't go through with their order.

[jenkinhill]

Very important - what VirtueMart version?

Is this an old or new site? Did it work before?

Test with the default VM template system by using Protostar instead of your Joomla template.

People have previously reported problems when using cloudflare and with SP pagebuilder and VirtueMart.

[precizor]

Thanks a lot for the reply jenkinhill

Virtuemart Version 3.4.2
PHP Version 7.2.18

The site was built last year. I don't recall any issues when I tested it then. I might have ignored the issue since it has been brought to my attention last month.

Test with Protostar:
The additional page did get loaded this time too. But this time I could see the green box loaded correctly saying: "checkout done, please confirm your order".

So my current template appears to be creating the problem with the green box. But seems like the additional page gets loaded by design.

A new observation: once the additional page has been loaded (checkout done):
If the user goes back to add something else to the cart without proceeding further, this checkout state remains active. So the additional page won't be loaded now. It happens to appear only once in every case according to my knowledge.

Thanks for reading. Any help would be extremely appreciated.

[AH]

I had a look at your site (Nice clear layout and design)

Regarding VM and the checkout

You are running a customised template and the behaviour of the checkout has clearly been modified

Your cart is not auto reloading via ajax when changing payment options and TOS in the checkout

For example:-

If I change payment method - the cart should reload with a rotating gif preventing further button presses until the reload is completed
Same for when I tick or untick TOS box

If your page auto reload functioned the box - NU AFREKENEN - would change to BEVESTIG BESTELLING

At present your customer has to press NU AFREKENEN first to force a page reload, to get to the BEVESTIG BESTELLING which is why they are getting confused


On checking the TOS box the page should reload and the confirm order button should change to a complete payment (or some name like that)  Please see the demo of VM for what the behaviour does (dont worry about the design - that is irrelevant)

In my store - I hide the checkout buttons until TOS has been checked - then show when TOS and other aspects are valid - however you need auto reload to function first

[precizor]

Hello AH!
Thanks a lot for your reply and the compliment.

The Ajax OPC function was indeed disabled from the backend configuration. After enabling, the page does reload when you select the payment and tos.

1 - After selecting the payment method and enabling the Tos checkbox, you see the button "Nu Afrekenen" (Checkout now) unchanged.

2 - Clicking it redirects to the shipment and shopper details form.

3 - After filling this form successfully, you get redirected back to the cart.

4 - The button now changes from "Nu Afrekenen" to "Bevestig Bestelling" (Confirm Order).

5 - This redirects again to the additional page. Since I've fixed the green box issue, it now does display "Checkout done, please confirm your order".

The users will be less confused now, but they still have to do the additional order confirmation. Thanks a lot for reading. Any other ideas to resolve this would be very appreciated.

[AH]

There is a fault in your template as far as I can tell

When adding addresses - you got to a new page and either save or get back to the cart without saving

You can chose shipping and agree TOS  (I am wondering where your payment option is ??)

The error can be seen when you uncheck TOS - the page should reload - it does not

Please consider testing using the protostar template - that way you can see what happens with no overrides

[precizor]

Hello AH!
Thanks for the reply and support!

I've checked the virtuemart demo: http://demo.virtuemart.net/
When you enable the Tos checkbox, you see the page being reloaded. (Loading gif)
But when you disable it, there is no loading animation. This behaviour matches with my website.

Ofcourse, it's possible that both the websites have the same issue. If it is, I have no idea how to fix it.

Here is a video preview of the experiment with the protostar template (Ajax OPC enabled). You can see that the additional page needs to be loaded once. Once the check out state is enabled, the additional page will not be loaded again.
https://precizor.nl/Preview.mp4

Thanks everyone for reading and bearing with me. Hopefully we can find something that works.

[AH]

Ok - the issue I believe is the sequence

You dont complete the address before confirm order - so VM "does an extra step"

But you are correct in the untick just changes the button and no page reload.

The second test is not good because session data is still set for the cart so you see the (confirm purchase) button straight away as all elements are completed.

Unfortunately this is default behaviour, Sorry this does not solve your site usability.

I modified the cart templates to hide all the payment / delivery and checkout button options until they customer completed an address so never have this issue

[precizor]

Hey AH!

I'm really surprised. Filling out the address before does actually skip the additional page. Despite performing the same actions, the sequence makes it result differently. The suggested solution of hiding certain options to force the sequence is very practical.

I didn't really get the explaination with the session data, which sounds important to understand what is causing the issue, but that's alright. Even in the worst case scenario if the additional page gets loaded, the user can now see a clear message to confirm the order, so that's good news, thanks to jenkinhill. Also thanks a lot AH for the support. With this I consider this issue resolved.

[AH]

Thanks for the feedback

This behaviour (when you have not entered an address and attempt to checkout) is to ensure that you are confirming your order.  The TOS button has already been checked so VM ensures that you have confirmed the order with the address that is now entered.

The session stuff is just that the cart data is held in session and if you return to the cart after "not completing" payment - then VM sees the cart as completed - and thus you see the confirm and pay button immediately with no extra confirm order step.

The cart data is cleared on successful payments by the payment plugin