Search code examples
phpfrontendsmartycheckoutprestashop-1.7

Checkout step shipping after address - Prestashop 1.7

Task

My task is to re-map steps on checkout page in different groups but same order steps to fix UX and align better with expectation. This sound as valid solution and won't change logic behind.

First page is ready: We have login and register as one step.

Second step is to confirm address and after that shipping method.

Third step I will use as payment select.

Last one will be summary.

Issue

Right now payment is with summary and shipping method is on separated step.

No documentation, just code and no hint how this can be achieved.

Very complex process of wiring and I just need frontend to be more elastic to my needs.

Is somewhere some clue how frontend can be modify in this area (steps on checkout)? How this UI change can be properly done in code?

Screen of issue

[Step 3 - payment and summary is joined]

Screen of design that I try to achieve

[Screen of design - step 2] (shipping method is by default gray - only on project to showcase 2 steps together how they are join in one dot)

[Screen of design - step 3]

Any hint is welcome to resolve problem and it add as documentation to checkout step manipulation on frontend.

Solution

  • I don’t quite understand exactly what you want to achieve.

    "Right now payment is with summary and shipping method is on separated step."

    is this an issue?

    If you do not want to completely rethink checkout (like OPC modules), you need to follow the PrestShop checkout steps.

    If you do not want to display something in the same step as currently have in PrestaShop (for example do you want to ask for phone number on Personal Information step, not on Address step), the best solution is to:

    1. Modify the checkout step TPL files, and add the additional input field (for example add an phone_number input to Personal Information step)
    2. Save the additional input to a JavaScript variable (even with setCookie)
    3. Hide the input in its original step (hide the phone_number input from Address step)
    4. Set the saved JS value to original(hidden) input

    But if you can tell us exactly what modifications you would like, maybe we can help you more.