3 page checkout (sort of) for Community-Default-Theme

[toplakd]

UPDATED April 5. 2020 Thirty bees Bleeding edge 1.1.0-1.1.x

Have updated the 3 page checkout package that can be used on Community-Theme-Default

Package is prepared for Standard or Advanced checkout (AEUC Module). 5 step checkout has to be selected.

What was changed in files:
order-address.tpl     (removed proceed & back buttons, included call for order-carrier.tpl)
order-address-advanced.tpl     (replaced everything for showing the addresses correctly)
order-carrier.tpl     (removed showing additional steps in middle of the page, corrected backlinks on continue button)
order-steps.tpl     (changed 5 steps into 3 steps, default cursor on active & not_completed steps)
shopping-cart.tpl     (made changes for classic or advanced payment checkout - AEUC Module)
shopping-cart-advanced.tpl     (removed everything, and calling shopping-cart.tpl
order-paymet-classic.tpl     (corrected backlinks on continue button)
order-paymet-advanced.tpl     (moving shopping-cart.tpl (not using advanced) above terms, corrected backlinks on continue button)

order-address.js     (included all lines from order-carrier.js + included a line to refresh carrier when selecting addresses with or without tax included).

Order-Controller.php     (assigns carrier to address page)

Changes are also commented in the files, so one can see what was changed.

Files are attached in .zip package.
One should upload them into main directory and unpack them.

After that you have to delete /cache/class_index.php because of the override.

 

3page.zip

Edited April 6, 2020 by toplakd

[toplakd]

Package is ready. Included are 3 zip files which need to be extracted.

IMPORTANT:
Do make backup first.
Test it on backup shop, and if you like it apply it to live shop.
It works with standard 5 step checkout on standard payment checkout or advance checkout page enabled (Advanced EU compliance)
Tested on Thirty bees Community-theme-default and Free Niara template from community member Tommat

For PS based themes uses order-steps.tpl that are attached separately. Description about it few posts below.

Replace following files
/themes/community-theme-default/
order-address.tpl       (included order-carrier.tpl and disabled original bottom buttons, as the ones from carrier are used)
order-carrier.tpl       (hiding double order-steps)
order-payment-advanced.tpl    (changed back step number from 2 to 1, added advanced payment checkout buttons)
order-payment-classic-tpl     (changed back step number from 2 to 1)
order-steps.tpl         (changed 5 steps into 3) - for themes based on thirtybees default theme.
shopping-cart.tpl       (added stuff for payment step - addresses, hiding double order-steps, disabling quantity edit on payment page.)

Replace following files
/themes/community-theme-default/js/
order-address.js        (included all lines from order-carrier.js + included a line to refresh carrier when selecting addresses with or without tax included marked with /* alza comment)

Copy files to:
/override/controller/front/
OrderController.php     (created OrderControler.php override and moved carrier into address step)

Ater all 3 steps are done, don't forget to delete following file to make sure override will start working:
/cache/class_index.php

01-tpl-files.zip

order-address.js.zip

OrderController.php.zip

order-steps(ps-themes).tpl

Edited March 3, 2019 by toplakd

[DRMasterChief]

Hello, great to hear that you have finished this thing.  I am also interested in such a solution, as the OPC did not work 100% for us  (regarding some regulations by law...),  and the 5PC is a little boring for customers  :)  

I do not use the Standard Theme,  so i have to check and compare your files with our Theme files.  Unfortunately not very easy...  you do not have marked all changes with your  out-commented hint for the 3PC,  so my question is:

In 

order-payment-advanced.tpl    line 33,  do you have inserted this?

{include file="$tpl_dir./shopping-cart.tpl" cannotModify=1 }

 

I have a lot to compare,  and maybe do you have the exact list of changes for each file?  I dont want to ask for wonders or make any demands, but maybe you have this and i can go on quicker and make it work with our Theme.  Otherwise i have to compare your files with the standard Theme files and then again these files with our Theme files.....   uuuurrrrggghhh....  

 

Edited March 2, 2019 by DRMasterChief

[toplakd]

Will write more when im home.

Not all changes are needed if doing customization of own template, as current files support standard 5steps and advanced 5 steps with aeuc modules.

[toplakd]

2 hours ago, DRMasterChief said:

order-payment-advanced.tpl    line 33,  do you have inserted this?

{include file="$tpl_dir./shopping-cart.tpl" cannotModify=1 }

Yes, this was added, so shopping cart on payment page does not allow changing quantity, and in same moment the sentence is used to hide the payment buttons payment step shopping cart, as shopping cart is moved to top in the payment step.

So payment buttons in advanced-payment are under the payment/terms selection and have been added to advanced-payment.

And no, I did not comment a lot on templates.

[toplakd]

Little more detailed -  how to mod your non community-default theme from 5 order-steps to 3 order-steps.:

1. You need order-address.js and OrderController.php from package in the mentioned directories.

2. change order-steps.tpl accordingly to be like the one in provided package.

3. add {include file="$tpl_dir./order-carrier.tpl"} to the bottom of order-address.tpl to include the carrier on address page (the .php. and .js files cover the needeed functions)

4. In order-address.tpl remove original order address buttons (back and proceed) as the ones from order-carrier.tpl will be used.

5. In order-carrier.tpl disable or delete {include file="$tpl_dir./order-steps.tpl"} to prevent showing additional order steps in the middle of the page.

6. In order-carrier.tpl search for step= and change the number to step=0 so the back button will bring you back to cart summary

7a. If classis payment checkout is used, open order-payment-classic.tpl, search for step= and change the number to step=1, so the back button will bring you back to address step.

7b. if Advanced EU checkout page is enabled, open order-payment-advanced.tpl, search for step= and change the number to step=1, so the back button will bring you back to address step.

 

This is the most basic 5step to 3 step conversion.

1st step - cart summary page

2nd step - login-address-carrier page

3rd step - payment page

Edited March 2, 2019 by toplakd

[DRMasterChief]

Congratulations for this idea and finishing this work!  

We have a  order-carrier-opc-advanced.tpl  in the Theme, which i also have to modify maybe?!

I am struggling with order-steps,  our Theme contains the following from line 35:

 

{if !$opc && ((!isset($back) || empty($back)) || (isset($back) && preg_match("/[&?]step=/", $back)))}
<!-- Steps -->
<ul class="step clearfix" id="order_step">
    <li class="{if $current_step=='summary'}step_current {elseif $current_step=='login'}step_done_last step_done{else}{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}step_done{else}step_todo{/if}{/if} first">
        {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}
        <a href="{$link->getPageLink('order', true)}">
            <em>01.</em> {l s='Summary'}
        </a>
        {else}
            <span><em>01.</em> {l s='Summary'}</span>
        {/if}
    </li>
    <li class="{if $current_step=='login'}step_current{elseif $current_step=='address'}step_done step_done_last{else}{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}step_done{else}step_todo{/if}{/if} second">
        {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}
        <a href="{$link->getPageLink('order', true, NULL, "{$smarty.capture.url_back}&step=1{if $multi_shipping}&multi-shipping={$multi_shipping}{/if}")|escape:'html':'UTF-8'}">
            <em>02.</em> {l s='Sign in'}
        </a>
        {else}
            <span><em>02.</em> {l s='Sign in'}</span>
        {/if}
    </li>
    <li class="{if $current_step=='address'}step_current{elseif $current_step=='shipping'}step_done step_done_last{else}{if $current_step=='payment' || $current_step=='shipping'}step_done{else}step_todo{/if}{/if} third">
        {if $current_step=='payment' || $current_step=='shipping'}
        <a href="{$link->getPageLink('order', true, NULL, "{$smarty.capture.url_back}&step=1{if $multi_shipping}&multi-shipping={$multi_shipping}{/if}")|escape:'html':'UTF-8'}">
            <em>03.</em> {l s='Address'}
        </a>
        {else}
            <span><em>03.</em> {l s='Address'}</span>
        {/if}
    </li>
    <li class="{if $current_step=='shipping'}step_current{else}{if $current_step=='payment'}step_done step_done_last{else}step_todo{/if}{/if} four">
        {if $current_step=='payment'}
        <a href="{$link->getPageLink('order', true, NULL, "{$smarty.capture.url_back}&step=2{if $multi_shipping}&multi-shipping={$multi_shipping}{/if}")|escape:'html':'UTF-8'}">
            <em>04.</em> {l s='Shipping'}
        </a>
        {else}
            <span><em>04.</em> {l s='Shipping'}</span>
        {/if}
    </li>
    <li id="step_end" class="{if $current_step=='payment'}step_current{else}step_todo{/if} last">
        <span><em>05.</em> {l s='Payment'}</span>
    </li>
</ul>
<!-- /Steps -->
{/if}

 

Edited March 2, 2019 by DRMasterChief

[toplakd]

Edited post.

For PS based themes following order-steps.tpl can be used.

Styling is edited and inline so it will not conflict any other styling in page, and can also be moved to global css.

order-steps(ps-themes).tpl

Edited March 3, 2019 by toplakd

[toplakd]

For themes based on PS themes I've edited order-steps.tpl , read post above this one.

Picture of 2nd step out of 3 on free Niara theme from community member Tommat (advanced checkout page enabled - AEUC module)

Edited March 3, 2019 by toplakd

[rubben1985]

@toplakd i have compared the order-payment-advanced.tpl with the original and it seems that the modifications for this files are wrong in the previous explanation, at least in my case. I did not find any step but there was more code. Just in case is a mistyping 🙂

By the way I tried your modifications with success!! Thanks a lot!!

For anyone using PANDA I attach my modified files. I recommend to check it before because I am not a developer but it seems to work fine for me. The only thing I did not try it was to use it with EU compliance module activated because I do not use it yet. I hope it helps!

3 steps checkout for panda template and TB.rar

Edited April 3, 2020 by rubben1985

[toplakd]

I think modificatons were made on 1.0.7 template, so some things could have changed in last versions.

Most important are the override files, rest is than playing with templates and css.

Maybe i will find some time to check the files for latest version of community theme and niara.

 

[rubben1985]

Something I noticed is that putting the mouse cursor in next step indicator it changes to a "hand icon" but it does not allow to click because the previous step is not completed. It is posible however to click only to a previous step, but the hand icon is always the same, being possible to click or not

Do you think is is possible to set that the han only appear when is actually possible to click? (to go back) Just to improve UX.

[toplakd]

Yes.

This is possible to change, copy this into order-steps.tpl

<style>
.nav-justified > .not-completed, .active > a {
    cursor: default;
    pointer-events: none;
}
</style>

 

That way on Active step and on Not-Completed steps, the pointer stays default, and no empty javascript link is shown.

Edited April 5, 2020 by toplakd

[AndyC]

On 4/3/2020 at 8:18 PM, rubben1985 said:

@toplakd i have compared the order-payment-advanced.tpl with the original and it seems that the modifications for this files are wrong in the previous explanation, at least in my case. I did not find any step but there was more code. Just in case is a mistyping 🙂

By the way I tried your modifications with success!! Thanks a lot!!

For anyone using PANDA I attach my modified files. I recommend to check it before because I am not a developer but it seems to work fine for me. The only thing I did not try it was to use it with EU compliance module activated because I do not use it yet. I hope it helps!

3 steps checkout for panda template and TB.rar 23.64 kB · 3 downloads

Hi As my knowband checkout is rubbish and failing terribly I thought I would try this as  I have panda. I used this post and all goes well until I get to carriers.As you can see by image there is nothing there.. I went though all the files again to make sure I did it right ..Even tried changing OrderController.php to orderController.php.

If I put it back into 1 step checkout all is OK ..What could be the issue

[toplakd]

After you uploaded the OrderController.php into /overrides/Controller/Front

you have to delete /cache/class_index.php

[AndyC]

Thanks,Tried that .But found another issue ..Happened to log out and can't log back in with facebook 😞

[toplakd]

Have updated very first post of this thread with most recent files and description.

Edited April 5, 2020 by toplakd

[AndyC]

Great work ..Working perfectly for me ,including facebook log in ..Although I now do realize I had the order-address.js in the wrong place 😁

[AndyC]

Quick question ..Was looking on mobile and the terms conditions tick box was tiny and hard to see also any chance you can force payment boxes to a size limit

[toplakd]

Mobile experience is not good on any of thirty bees default theme.

For good mobile view a lot of things have to be changed. Mostly css styling for different media widths ...

Once done it can look similar to this picture

[AndyC]

That is pretty neat 🙂 ...I understand ,I suppose what I have is better then a no working solution..

What upset me most it must have been down for ages before I found out. return customer took the time to call me and tell me. I bought chex hoping it would work but it's falls well short on my site

[AndyC]

Hi. another quick question 🙂 how can I remove the Availability "in stock" from payment page.. I've removed it in the summery page with

 {assign var='PS_STOCK_MANAGEMENT' value=false} to shopping-cart.tpl

tia

[rubben1985]

On 4/5/2020 at 4:13 PM, toplakd said:

Yes.

This is possible to change, copy this into order-steps.tpl

<style>
.nav-justified > .not-completed, .active > a {
    cursor: default;
    pointer-events: none;
}
</style>

 

That way on Active step and on Not-Completed steps, the pointer stays default, and no empty javascript link is shown.

I just tried and maybe because my template is not the community I modified a little the code to make it work in my case:

.steps_3 .not-completed, .active > a {
    cursor: default;
    pointer-events: none;
}

 

[rubben1985]

a person from UX told me that would be interesting to delete the email field in "create an account" div (authentication-login.tpl) and only show that in the next step (anyway it is shown there too) because it makes easier not to introduce the email until later once the address has been completed too.

Do you know how to delete that email field?

To hide the email field is easy for a novice like me (i could hide it or just delete the section, but the button to continue "create account" needs the field to be complete it to continue and show next screen.

Do you know hot to make that TB allow no to introduce an email and even like that going to next screen when doing click? (in the next screen of course, email field should be mandatory, no problem with that)

[toplakd]

Maybe this way