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

[rubben1985]

Yes, thats it. I never thought about that option!

I activated but seems to be incomplete (country, adress...?):

 

Could be derived from the steps modification?

[AndyC]

Only asking ,are your localization/countries addresses filled out properly

[rubben1985]

 

On 6/5/2020 at 10:39 PM, AndyC said:

Only asking ,are your localization/countries addresses filled out properly

What do you mean? Could you be more precise? I mean, with standard registration all works well and i can fill everything. With this option i do not why it shows less fields to complete so adress is not complete. Could be that the modifications affect to show the fields in this step?

[AndyC]

Does it look like my example

Edited June 9, 2020 by AndyC

[rubben1985]

@AndyC Thanks, that section was not the problem but I just solve it.

In case it happens to anyone, My store is multistore, and I am using a one page checkout. Well, this one page checkout was interfering with the css code. It did not interfere when the adresse creation was in a second step, but it did with the standard creation+adresse page.

Solved it!

[Wartin]

On 5/8/2020 at 3:44 PM, toplakd said:

But I can send you my modded community theme for testing, which is more mobile friendly.

Hello @toplakd. First of all thanks for this mod, it's really more clean and nice to see less steps. I'm just trying it in a backup installation and it works perfect.

I just notice that you hid the order-steps bar when we are in shipping. I found it weird, so I uncommented:

<!-- 
ALZA Removing order steps from carrierer template for 3 page checkout
    {include file="$tpl_dir./order-steps.tpl"}
-->

And changed the name of that step to:

          {l s='Address & shipping'}

in order-steps.tpl

 

I'm trying to make it more mobile friendly, and liked your screenshots, could you send me your community theme mod, please? I'm using Niara, but can compare and try to adapt it.

Thanks!

[toplakd]

There is no Shipping step, as its part of Address step, so disabled showing steps under carrier, as carrier template is called from address template.

 

 

Edited June 21, 2020 by toplakd

[Wartin]

35 minutes ago, toplakd said:

There is no Shipping step, as its part of Address step, so disabled showing steps under carrier, as carrier template is called from address template.

Oh, I realized how it's supposed to be, as seen in your first post image. Something is wrong here, as in Address it's not appearing the carriers below, and I can press 'next', it goes to the old carriers page (without step number in URL) . Let me investigate more.

 

EDIT: cache issues.... after reading in you where is included carrier in order-address i went to that file, write something and save... and now it takes the changes.  excelent.

Thanks for the link!!

 

 

Edited June 21, 2020 by Wartin
i found my problem

[Wartin]

On 4/5/2020 at 7:24 PM, AndyC said:

Quick question ..Was looking on mobile and the terms conditions tick box was tiny

Hello.

Here in Niara the checkbox doesn't appear.

I compared the original order-carrier.tpl and it has a <span> around the terms and conditions phrase, like this

                <span class="label-text">
                {l s='I agree to the terms of service and will adhere to them unconditionally.'}
                </span>

 

Now the checkbox appears. I attach my complete file, themes/niara/order-carrier.tpl, with this change (line 354)

 

order-carrier.tpl

[Wartin]

I had troubles with js in second step. If I press 'Read terms and conditions' link the modal didn't appear, but loaded in a new page. It didn't check if terms and conditions was checked and loaded step 3 if it wasn't.

I saw you added functions from order-carrier.js to order-address.js, but for some reason didn't work in my almost ready shop (but yes in another brand new TB). So I added this to the override (override/controllers/front/OrderController.php), maybe could be used only this and not the js addition to order-address.

    public function setMedia()
    {
        parent::setMedia();
        if ($this->step == 1) {
            $this->addJS(_THEME_JS_DIR_.'order-carrier.js');
        }
    }

 

Edited June 22, 2020 by Wartin

[Wartin]

One more :)

I had to change some things to make it work well. I'll send my files, maybe it's useful.

1) In Niara, as I said above, checkboxes didn't appear. Just after radio buttons there is always a <span> tag, unlike Community. If it's not there, the radio button is not shown. this is true in 'Accept terms', select delivery address and in carrier selection.

2) Instead of adding all the functions from order-carrier.js to order-address.js, I added those two files to the override
override/controllers/front/OrderController.php

    public function setMedia()
    {
        parent::setMedia();
        if ($this->step == 1) {
            $this->addJS(_THEME_JS_DIR_.'order-address.js');
            $this->addJS(_THEME_JS_DIR_.'order-carrier.js');
        }
    }

3) In Step 2, I had an error in js console with updateExtraCarrier (did't find it, as it's in cart-summary.js). I added that function at the end of order-carrier.js.

 

It's really cleaner to have 3 steps, maybe these changes are useful for somebody using Niara. If you find something wrong, please tell me. To use it, just like parents', make backup of your files and uncompress the .zip file in your shops' /

3step-niara.zip

[rubben1985]

@toplakd Do you know how to hide, in adress step, the invoice address section  IF the "use same adress for invoice" is checked? 

So invoice adress is visible, only if people uncheck the box.

I do not know if this is possible, but could be something like: if the span class="checked" the apply display:none to the address_invoice id

Just saying from the ignorance.

 

Hiding that section when the checkbox is checked, that step would be cleaner most of the time as most o f the people do not uncheck.. 

Edited July 18, 2020 by rubben1985

[lovelygifts]

Hiya, sorry I wasn't being ignorant; I've only just read my emails and seen the notification.

I'm not a programmer so I wouldn't know how to hide the 'checked' section without knowing if I'm causing other issues. 

I will have a Google and see what I can find. Thanks for the heads up. :)

[Wartin]

On 7/18/2020 at 10:00 AM, rubben1985 said:

Hiding that section when the checkbox is checked, that step would be cleaner most of the time as most o f the people do not uncheck.. 

This could be a good one! As if it's marked, is not needed to show both addresses below. 

If you want to try, when you check the box there is an javascript event. There you could write this 'display:none' to that <div class="row"> where the addresses are. You will have to put it an ID, as if you click again you have to toggle display to unset.

[rubben1985]

thanks Wartin but Unfortanetely I do not any idea of javascript.... Only basic css. Lest hope someone knows how to do it!

[Wartin]

34 minutes ago, rubben1985 said:

thanks Wartin but Unfortanetely I do not any idea of javascript.... Only basic css. Lest hope someone knows how to do it!

Well, you could try this, it worked :)

Go to /theme/niara/order-address.tpl (or your themes' tpl) where the checkbox is and add data-toggle and data-target like this:

 <input type="checkbox" name="same" data-toggle="collapse" data-target="#addresses" id="addressesAreEquals" value="1"{if $cart->id_address_invoice == $cart->id_address_delivery || $addresses|@count == 1} checked="checked"{/if}>

Now go to the div class="row" (it was line number 58 here) and change it to:

 <div id="addresses" class="row collapse">

Now the addresses start collapsed, but if you *unselect* "use the same address..." it magically appears.

Too much work for a Sunday :)

Have a nice day, buen fin de semana ;)

Edited July 19, 2020 by Wartin

[rubben1985]

It really worked!!!

In case someone needs it, I attache the file with the modifications made to the tpl file from the PANDA version.

order-addressNEW.tpl

[AndyC]

Was intrigued by the new addition and had a look. OK I see now , if you use the tick it is there .. Makes sense now

thanks for the improvement ... Now if someone could just get rid of the "In Stock / Availability " boxes it would be great for me as i still haven't sorted that bit out

Edited July 19, 2020 by AndyC

[Wartin]

On 7/19/2020 at 7:00 PM, rubben1985 said:

It really worked!!!

Hi!

I realized that with our changes the real address is never showed, except if you need to use different addresses.

I change the template to make the address and city show with the name of the address

Now the dropdown shows "My address: street 1341 (city)" of each address.

in theme/niara/order-address.tpl I changed what is in between <option> and </option>

            <option value="{$address.id_address|intval}"{if $address.id_address == $cart->id_address_delivery} selected="selected"{/if}>
              {$address.alias|escape:'html':'UTF-8'}: {$address.address1|escape:'html':'UTF-8'} ({$address.city|escape:'html':'UTF-8'})
            </option>

Bye!

[rubben1985]

I realized something is wrong in the way some modules are loaded. Not sure but maybe is because the way carrier and address steps are now only one step?

The problem I found is this one (i recorded a video)

https://www.loom.com/share/f8e87a47111340c8bd33752d4f80662a

 

If it would be something from the module (wich i did not modified) should happen in all the steps of the checkout but it is only in the 2nd step.

Im a little lost here. I already try contacting @Jonny from Sunnytoo but they do not know where the issue is. Maybe someone more use to theses modifications will know...

 

Any ideas?

Edited August 28, 2020 by rubben1985

[Wartin]

Hello!

It's kind of difficult to know where the problem is... but indeed the 'sort of' part of thread's name is because it's a nice hack.

In order to see where the problem is you could set up a new TB installation (w/niara) and check if your module works fine there. Then, comparing templates with browser console maybe you can see how can you fix it.

 

[toplakd]

You need to change the third party module behaviour for how it injects itself into that page.

"sort of" in the name was added because it does not work on native install without used override.

Mixing third party hacks and modules can always bring out some issues 🙂 where both work when installed separately, but having issues if installed together.

[rubben1985]

34 minutes ago, toplakd said:

You need to change the third party module behaviour for how it injects itself into that page.

"sort of" in the name was added because it does not work on native install without used override.

Mixing third party hacks and modules can always bring out some issues 🙂 where both work when installed separately, but having issues if installed together.

Any orientation how to modify how the module inyect itself? Or anything I can tell the developer so he knows what to do? I already contact but without any additional instructions he was not able to solve it

[Wartin]

HI

You could start searching for .tpl of the steps, and there see where the module starts. As it's working OK in step one, maybe you can find what's wrong in second step.

Oh, don't forget setting debug mode ON in 'Parámetros avanzados' -> 'Rendimiento' (it's called 'modo depuración' in spanish). With that on you can see exactly where one module starts in html code.

Good luck.

[rubben1985]

10 hours ago, Wartin said:

You could start searching for .tpl of the steps, and there see where the module starts. As it's working OK in step one, maybe you can find what's wrong in second step.

I try to find something on these:

order-address.tpl 
order-address-advanced.tpl  
order-carrier.tpl
order-steps.tpl 

But not result (without coding knowledge I just logic to try to find something that calls my attention). I suppose it has to be there because should not be something related with shipping cart or the module "sidebar" because in that case they should always be show the same way. But in those tpl, I do not find where load the module...

I suppose (just for logic) that unifying 2 steps in 1, is related. But I do not know more that that.