OPC Tabs for Login/New Account

[toplakd]

Again I have played little with tabs, this time in OPC Login/New account.

yourtheme/js/order-opc.js needs to be modified if you wish that data from login form refreshes the customer login information in top navbar as that data is not refreshed by default with use of community theme OPC login form. Last line ".... // add this line to reload header with user info" should be added arround line 70 and arround line 200.

arround line 70
		// update token
            static_token = jsonData.token;
            updateNewAccountToAddressBlock(that.attr('data-adv-api'));
            $('#header-navbar-right-nav').load(' #header-navbar-right-nav > *');  // add this line to reload header with user info when login

arround line 200
            // force to refresh carrier list
            if (isGuest) {
              isLogged = 1;
              $('#opc_account_saved').fadeIn('slow');
              $('#submitAccount').hide();
              updateAddressSelection(advApiParam);
            } else
              updateNewAccountToAddressBlock(advApiParam);
              $('#header-navbar-right-nav').load(' #header-navbar-right-nav > *');  // add this line to reload header with user info when new account

Upload the file into your theme folder, and change the link to it in order-opc.tpl or rename it to order-opc-new-account.tpl and remove original.

 

order-opc-new-account-tab.tpl

Edited February 11, 2019 by toplakd

[nickon]

Nice!

Wondering how it would fit with my mod

 

I must find time to do some tb testing....

[toplakd]

I'm sure it will fit into it.

[nickon]

The product section is quite nice. I like the product name and price on as the header. I miss the total product quantity.

One thing I am considering on adding to my mod is to hide the content (not the title) of step 2 and 3 until the user login or sign up. Eg I find the "No carrier available confusing"

[toplakd]

Have left the work on OPC due to advanced payment issues on OPC.

So decided I will stay with 5 step checkout and minimize it to aka 3 step, so I'm working on this now.

Cart summary on payment page does not have option to change quantity, as this brings out issue with carrier over range and advanced payment,

which resoults with 0 shipping price if carrier is over range and payment can be completed without charged shipping.

Edited February 16, 2019 by toplakd

[nickon]

What problems did you get with opc. Is there a bug or something else?

Meanwhile I tried to hide the carrier section by adding under your code 

$('#order_carrier_content, #order_carrier_content').hide();

(where order_carrier_content is the carrier section) but it doesn't work

I must be missing something....

 

[toplakd]

Problem is only with advanced payment once carrier is out of range.

Once carrier is out of range, there is no shipping price but payment buttons work and one can proceed with order confirmation without any shipping.

One can not unload payment method or payment button and load it back once shipping range is within limits, as when reloading the event is lost on payment method and payment button.

So once event is lost, payment cant be selected and payment button does not work.

One can unload tos checkbox as its not connected to event.

Hiding with css is possible,  but this is not secure way to disable order payment process if carrier is out of range.

As said, this issue is only with advanced payment methods (AEUC).

Edited February 16, 2019 by toplakd

[DRMasterChief]

Following this very nice and interesting idea for a while,  thank you and congratulations to this work  :)   Such things will bring the community forward.

I wonder if this also works with a 3rd party Theme?  At the moment i did not have a test installation to try,  but what do you think? Will this work only with the original community Theme? 

thank you for a statement

[toplakd]

It all depends how theme was modified regarding the baselines from standard theme.

I know that on my own theme, nothing installs perfectly as I went way out of regular path.

Some screens of my mobile view of modded community theme.

Stil work in progress, so not yet in live shop.

That's Galaxy S5 360x640px view.

Navigation Header is fixed and takes 55px of visible area, so buttons are always in reach of the finger.

And Fancybox V3 is used for the pictures view as it alows finger sliding.

Edited February 18, 2019 by toplakd

[toplakd]

Slowly getting to finish.

Community-theme-default, with some adjustments.

This is how my work in progress product page looks on iphone 6/7/8

Home button 1st, 2nd button is for categories and search, Cart button is cart, and big guy button opens login/language/cms pages

 

[mike]

I must say thank you for sharing your job!

I'm testing the tpl file with TB v1.1.0, Niara theme, but unfortunately all translations for "Account" are gone!

Can you give any ideas to fix it?

[toplakd]

Yes. You have to translate it.