Prestashop: Checkout proceeds automatically from carrier selection to payment selection

[teemumantynen]

I'm developing a shipment module. My plan is to use the displayCarrierExtraContent -hook to display additional info and input fields when a customer selects a particular carrier by clicking its radio button during checkout. This has worked fine with PS 1.7.2 - 1.7.4 and my earlier shipping modules.

But lately I've been using PS 1.7.5.0 to develop my latest shipping module. To my great surprise I noticed that when during checkcout I selected a carrier, the checkout process automatically proceeded to payment method selection without me clicking the continue-button. I didn't have a chance to read additional carrier info or use my module's additional input fields. Neither did I have a chance to type order comment or make selections about recycled packaging or gift wrap.

I have two languages (id 1 English, id 2 Finnish) in my 1.7.5.0 test installation. English is the default language. When I first notices the problem, I had been using Finnish the whole time during my development project.

While I was trying to figure out what could cause this behavior, I changed FO UI language from Finnish to English and immediately noticed that checkout functioned as I hoped it would function, ie. checkout did not automatically proceed from carrier selection to payment method selection.

I changed back to Finnish, and now it too functions as I had hoped! AFAIK I hadn't done anything else than changed the UI language using PrestaShop's language selector.

To further test the problem I have changed language back and forth, logged in and out, reopened browser and used wholly different browser, but I can't reproduce the problematic behavior anymore. Ie. now the checkout process works as I wish it would but I have no idea how.

Because I can't reproduce the "bug", this isn't exactly a bug report. But hopefully my report will benefit someone if this problem arises somewhere else. I'm not the only one who has noticed this behavior:
https://stackoverflow.com/questions/54255061/disable-automatic-continue-to-the-payment-step

Thank you.

PrestaShop: 1.7.5.0
Theme: classic
PHP Version 7.1.26
WWW-server: Apache 2.4.29
Firefox 65.0 (used during the initial finding and during further tests)
Google Chrome 72.0 (used during further tests)

[khouloudbelguith]

Hi @teemumantynen,

Thanks for your report.
Could you please provide me a demo module to test it.
Thanks!

[teemumantynen]

Hi @khouloudbelguith,
The module I'm developing requires a third party API key and unfortunately I'm not in liberty to hand it over. But I have a similar module later down in todo-pipeline which doesn't have such limitation.
Thank you.

[teemumantynen]

Hi @khouloudbelguith,
I learned how to reproduce the problem. Testing it doesn't require any custom modules.

Checkout works fine, ie. it doesn't proceed automatically from carrier selection to payment selection, when user starts the checkout process for the first time with a new cart.

But once the user has proceeded manually from carrier selection to payment selection, and then decides to go back to change the carrier selection, the checkout process starts to act problematically ie. it starts to proceed automatically.

Please see this screencast where I demonstrate how to reproduce this issue:
https://youtu.be/t_ZB_jfWTt0

PrestaShop 1.7.4.4 does not do this. User can go back to carrier selection any number of times, and the checkout doesn't start to proceed automatically.

This change between 1.7.4.4 and 1.7.5.0 may be a conscious desing decision. If it is, it is a very unfortunate decision IMHO, and will cause great problems for existing shipping modules. There should be a way to disable this behavior, or better yet, it should be an option that needs to be activated consciously.

To reiterate, the problem is that if a shipping module uses the displayCarrierExtraContent -hook to present additional information or additional input fields, the user doesn't have a chance to interact with this "carrier extra content" if the checkout process proceeds automatically to next step as soon as a carrier is selected. The user should always have a chance to change the carrier selection multiple times and have a change to freely interact with "carrier extra content", and only proceed to the next step once she/he clicks the Continue-button.

Thank you.

[khouloudbelguith]

@teemumantynen, thanks for these clarifications.
I manage to reproduce the issue with PS1.7.5.0.
With PS1.7.4.4 => OK.
I’ll add this to the debug roadmap so that it’s fixed. If you have already fixed it on your end or if you think you can do it, please do send us a pull request!
Thanks!

[marionf]

@teemumantynen

It's the wanted behavior, otherwise specific carrier cart rule not apply dynamically when choosing carrier during checkout

[teemumantynen]

@marionf
But clearly the wanted behavior leads to unwanted consequences, right?

[tomlev]

Hi @teemumantynen

the concerned PR is this one : https://github.com/PrestaShop/PrestaShop/pull/11015

When going back to carrier selection from payment step, and selecting another carrier, the page is now reloaded, in its current step (which is payment one)
it is needed as some prices are not correctly updated if the page is not refreshed

[teemumantynen]

Hi @tomlev
IMHO it would be a lot better to refresh the page when customer clicks Continue-button on carrier selection step, not immediately after they have selected a carriers. This automatic refresh prevents the customer from interacting with "carrier extra content" such as input fields for shipping collection point selection.

[Dov1s]

Same thing, impossible to have any additional carrier info selection due to this new "feature".

I am not sure if something like this is good for UX. When selecting/changing carrier customer might want to look them through one more time, especially when there are more than 2 or 3 options available.

Update total values can be done via AJAX, so page reload is really due to laziness. "Easy solution" which gets even more problems.

For those who are working on modules, you can just prevent it by renaming form ID:
$('#js-delivery').attr('id', 'js-delivery-blocked'); or whatever ID value. Clicking on button and confirming form this way will still work as it should.

[teemumantynen]

One more thing how this new behavior breaks the process of how shipping modules used to work.

When customer clicks Continue-button in checkout's carrier selection, hook actionValidateStepComplete is executed. This hook lets shipping module to validate carrier selection data including input fields in "carrier extra content". If shipping module invalidates carrier selection, clicking Continue-button doesn't take customer to payment selection, but returns her/him to carrier selection, where shipping module can then for example display error message so that the customer can input correct data.

But. The new automatic page reload does not trigger hook actionValidateStepComplete and thus shipping module can't validate carrier selection data.

[bilfeldt]

@teemumantynen On a side note, might I ask how you are saving any input values you are showing using the displayCarrierExtraContent hook? So if you are using this hook to let the customer choose some kind of addon, how do you save the customers selection?

Thanks.

[colinegin]

Hello all,

After discussion with the UX & dev team, here are what we plan to develop.

The main difference vs current behaviour is that the user will always have to click on "Continue" to go from Step X to Step X+1, no matter if :

• he/she goes in the different steps for the first time
• he/she went to the step X and decided to go back to X-1 or X-2 to check or modify the information stored.

This means that :
1) The next steps after the current step are no longer clickable (only Continue button allows to go to the next step)
2) There should be a "Continue" button in the Personal information step (in case the logged in user goes back to the 1st step)
3) Green checks and "Modify" CTAs should be removed in the steps following the user current one.

Do not hesitate if you have any feedbacks !

Have a nice day,

Coline

[vjnunez]

Hey guys! im experiencing the same issue and need to apply the recent patch to solve this (im developing a carrier module with extra fields in that step). How should i proceed? Is it safe to use the 1.7.6.x branch and update my prestashop entirely? Right now im on the latest stable release 1.7.5.1.

[vjnunez]

@teemumantynen did you find a workaround for 1.7.5? i would appreciate it so much! it would save me from doing the tedious PS upgrade and all the implications.

[danirios93]

@vjnunez did you manage to fix this? I got the same behavior. Thanks

[vjnunez]

no, im still waiting for someone to help me out with that :(

[danirios93]

@vjnunez
For the moment I just added this javascript code and it works. Howvever price of the courier only updates when pressing continue button, not a big issue thought.

[danirios93]

@vjnunez
Solved by editing the core.js file (This fix allows to still update prices on live site -ajax- before pressing continue)

themes/core.js in line 161:

- .replaceWith(e.preview),(0,r.default)(".js-cart-payment-step-refresh")
+ .replaceWith(e.preview),(0,r.default)(".anytextyouwant")

[vjnunez]

Thanks @danirios93! Im gonna try that.

On 17 April 2019 at 03:56:42, danirios93 ([email protected]) wrote:

@vjnunez https://github.com/vjnunez
Solved by editing the core.js file

themes/core.js in line 161:

• .replaceWith(e.preview),(0,r.default)(".js-cart-payment-step-refresh")+
  .replaceWith(e.preview),(0,r.default)(".anytextyouwant")

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/PrestaShop/PrestaShop/issues/12456#issuecomment-483907272,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAkDjvuRZnfWo0TtCbXHToszDwBoUsUjks5vhn9agaJpZM4alH23
.