Faster login with bootstrap modal

ArtcoInc · January 30, 2015

Not too long ago, there was a thread here that was discussing whether to indicate the required fields in a form, or the optional fields. Some one linked to a website where there were discussions on all sorts of User Interface (UI) stuff:

http://uxmovement.com/forms/always-mark-optional-form-fields-not-required-ones/

While browsing around that site, I found a posting about making logging in faster and easier using a pop-up box ...

http://uxmovement.com/forms/dropdown-login-boxes-for-faster-login/

There is already an add-on for osC that uses this idea, but it was for an older version of osC, and it used jQuery.

http://addons.oscommerce.com/info/8169

So, I thought I'd try adapting this idea to use a Bootstrap Modal (besides, the jQuery version didn't work well in Bootstrap when the screen was in Extra-Small mode).

I wrote this for 234bs-gold. This replaces only one template file ... no core changes.

catalog/includes/modules/content/navigation/templates/navbar.php (see attached file)

navbar.php

I had @@Tsimi look at this, and he cleaned up the user interface, making it more bootstrap-ish ;)

For this proof-of-concept, we put some language definitions in this file ... they should be moved to the appropriate language file.

Two areas for further improvement ...

1) I don't have any means of testing if SSL is used when the customer logs in. Can anyone else check this for us?

2) I thought about having a 'Remember Me' check box in the log in modal, but do not know how to implement that.

Feedback welcome ...

Malcolm

root123 · January 31, 2015

Great contribution !!!!!

♥Tsimi · January 31, 2015

@@ArtcoInc

For the Remember Me function, maybe this add-on would be something.

http://addons.oscommerce.com/info/2087

i did some test install and it "seem" to work but i am not a crack when it comes to session and cookies stuff.

Maybe Dev. or other person which has good experience with such parts of osC could take a look at it.

root123 · January 31, 2015

@ how to replace the login.php with the navbar.php for which i want to replace the old login.php page with this popup u make ? thanks !!

De Dokta · January 31, 2015

@@ArtcoInc

Just tested! :thumbsup:

burt · February 1, 2015

Possibly Interesting Concept;

<div class="modal fade" id="ModalLogin" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <?php
          $page_content = $oscTemplate->getContent('login');
          echo $page_content;
          ?>
        </div>
      </div>
    </div>
  </div>
</div>

Thoughts ?

♥Tsimi · February 1, 2015

@@burt

Does it work?

burt · February 1, 2015

Seems to, and the best part is that it is a direct copy of the contents of the login page, which I quite like for consistency.

ArtcoInc · February 1, 2015

@@burt

This is why I do this ... :)

I have an idea ... I try it out ... if it works, I share it ...

If it leads you to having another (better(?)) idea, take it and run with it :D

Malcolm

burt · February 1, 2015

@@ArtcoInc - code is up there ^^ take it and play with it, see if you like it, the addon is yours..

♥Tsimi · February 1, 2015

@@burt

That looks good G!

How does it behave on sm or xs view?

root123 · February 2, 2015

@@burt

in catalog/checkout_shipping.php at line #16

// if the customer is not logged on, redirect them to the login page
if (!tep_session_is_registered('customer_id')) {
$navigation->set_snapshot();
tep_redirect(tep_href_link(FILENAME_LOGIN, '', 'SSL'));
}

how to make it same with the modal login page...it redirects to the old login.php page...?

burt · February 2, 2015

@@burt

That looks good G!

How does it behave on sm or xs view?

It acts exactly as the normal login page ... one box drops below the other...

♥Tsimi · February 4, 2015

Workaround for other Login links and checkout redirect
------------------------------------------------------------------------

There are other Login links that need to be recoded so that the Modal shows up.

The following files contain those links.

create_account.php
index.php

The index.php part can be left out if you are anyway removing the greeting message on the start page.

The other issue that I have been lightly discussing with @@ArtcoInc is the redirect issue when you are not logged in, put items in the cart and then want to checkout.
One way would be to recode the checkout button/link but then the customer needs to click the checkout button twice which will cause more confusion.
So I came up with the following "temporary" solution. Dirty but it works.

Create a new page (login_redirect.php) with a "back to shopping" and "checkout button".
Then change the redirect inside the checkout_shipping.php to that new file.
If anyone has a better solution please come forth with it.

What I am gonna show here is not state of the art coding so any improvement to it is greatly appreciated.

Download new files:

First upload the two new files

catalog/login_redirect.php
catalog/languages/english/login_redirect.php

Now let's start with the file modifications.

-------------------------------------------------------
Inside the catalog/checkout_shipping.php
-------------------------------------------------------

find this code

// if the customer is not logged on, redirect them to the login page
  if (!tep_session_is_registered('customer_id')) {
    $navigation->set_snapshot();
    tep_redirect(tep_href_link(FILENAME_LOGIN, '', 'SSL'));
  }

and replace with this

// if the customer is not logged on, redirect them to the login page
  if (!tep_session_is_registered('customer_id')) {
    $navigation->set_snapshot();
    tep_redirect(tep_href_link('login_redirect.php', '', 'SSL'));
  }

----------------------------------------------------
Inside the catalog/create_account.php
----------------------------------------------------

Look for this code

<p><?php echo sprintf(TEXT_ORIGIN_LOGIN, tep_href_link(FILENAME_LOGIN, tep_get_all_get_params(), 'SSL')); ?><span class="inputRequirement pull-right text-right"><?php echo FORM_REQUIRED_INFORMATION; ?></span></p>

and replace with

<p><?php echo TEXT_ORIGIN_LOGIN . '<a style="cursor:pointer;" data-toggle="modal" data-target="#ModalLoginCreateAccount">' . TEXT_ORIGIN_LOGIN2 . '</a>'; ?><span class="inputRequirement pull-right text-right"><?php echo FORM_REQUIRED_INFORMATION; ?></span></p>

  <div class="modal fade" id="ModalLoginCreateAccount" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 class="modal-title-site text-center" ><?php echo TEXT_LOGIN_MODAL . ' ' . STORE_NAME; ?> </h3>
      </div>
         <div class="modal-body">
        <div class="row">
            <div class="login-form <?php echo (MODULE_CONTENT_LOGIN_FORM_CONTENT_WIDTH == 'Half') ? 'col-sm-6' : 'col-sm-12'; ?>">
              <div class="panel panel-success">
                <div class="panel-body">
                  <h2><?php echo MODULE_CONTENT_LOGIN_HEADING_RETURNING_CUSTOMER; ?></h2>

                  <p class="alert alert-success"><?php echo MODULE_CONTENT_LOGIN_TEXT_RETURNING_CUSTOMER; ?></p>

                  <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'), 'post', '', true); ?>

                    <div class="form-group">
                      <?php echo tep_draw_input_field('email_address', NULL, 'autofocus="autofocus" required id="inputEmail" placeholder="' . ENTRY_EMAIL_ADDRESS . '"', 'email'); ?>
                    </div>

                    <div class="form-group">
                      <?php echo tep_draw_password_field('password', NULL, 'required aria-required="true" id="inputPassword" placeholder="' . ENTRY_PASSWORD . '"'); ?>
                    </div>

                    <p class="text-right"><?php echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'glyphicon glyphicon-log-in', null, 'primary', NULL, 'btn-success btn-block'); ?></p>

                  </form>
                </div>
              </div>

              <p><?php echo '<a class="btn btn-default" role="button" href="' . tep_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . MODULE_CONTENT_LOGIN_TEXT_PASSWORD_FORGOTTEN . '</a>'; ?></p>
            </div> <!-- LOGIN PART END //-->
            <div class="create-account-link <?php echo (MODULE_CONTENT_CREATE_ACCOUNT_LINK_CONTENT_WIDTH == 'Half') ? 'col-sm-6' : 'col-sm-12'; ?>">
              <div class="panel panel-info">
                <div class="panel-body">
                  <h2><?php echo MODULE_CONTENT_LOGIN_HEADING_NEW_CUSTOMER; ?></h2>

                  <p class="alert alert-info"><?php echo MODULE_CONTENT_LOGIN_TEXT_NEW_CUSTOMER; ?></p>
                  <p><?php echo MODULE_CONTENT_LOGIN_TEXT_NEW_CUSTOMER_INTRODUCTION; ?></p>

                  <p class="text-right"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'glyphicon glyphicon-chevron-right', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), null, null, 'btn-primary btn-block'); ?></p>
                </div>
              </div>
            </div> <!-- CREATE ACCOUNT PART END //-->
         </div><!-- /.row -->
      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

--------------------------------------------------------------------------------------
inside the catalog/includes/languages/english/create_account.php
--------------------------------------------------------------------------------------

find this code

define('TEXT_ORIGIN_LOGIN', '<font color="#FF0000"><small><strong>NOTE:</strong></small></font> If you already have an account with us, please login at the <a href="%s"><u>login page</u></a>.');

and replace with this

define('TEXT_ORIGIN_LOGIN', '<font color="#FF0000"><small><strong>NOTE:</strong></small></font> If you already have an account with us please ');
define('TEXT_ORIGIN_LOGIN2', 'login here.');

---------------------------------------
inside the catalog/index.php
---------------------------------------

Look for this code

 <?php echo tep_customer_greeting(); ?>

and replace with this

<?php    
    if (tep_session_is_registered('customer_first_name') && tep_session_is_registered('customer_id')) {
      echo sprintf(TEXT_GREETING_PERSONAL, tep_output_string_protected($customer_first_name), tep_href_link(FILENAME_PRODUCTS_NEW));
    } else {
      echo TEXT_GREETING_GUEST1 . ' <a style="cursor:pointer;" data-toggle="modal" data-target="#ModalLoginIndex">' . TEXT_GREETING_GUEST2 . '</a>' . TEXT_GREETING_GUEST3 . ' <a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . TEXT_GREETING_GUEST4 . '</a>?';
    }
?>    
  </div>
 
<div class="modal fade" id="ModalLoginIndex" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 class="modal-title-site text-center" ><?php echo TEXT_LOGIN_MODAL . ' ' . STORE_NAME; ?> </h3>
      </div>
         <div class="modal-body">
        <div class="row">
            <div class="login-form <?php echo (MODULE_CONTENT_LOGIN_FORM_CONTENT_WIDTH == 'Half') ? 'col-sm-6' : 'col-sm-12'; ?>">
              <div class="panel panel-success">
                <div class="panel-body">
                  <h2><?php echo MODULE_CONTENT_LOGIN_HEADING_RETURNING_CUSTOMER; ?></h2>

                  <p class="alert alert-success"><?php echo MODULE_CONTENT_LOGIN_TEXT_RETURNING_CUSTOMER; ?></p>

                  <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'), 'post', '', true); ?>

                    <div class="form-group">
                      <?php echo tep_draw_input_field('email_address', NULL, 'autofocus="autofocus" required id="inputEmail" placeholder="' . ENTRY_EMAIL_ADDRESS . '"', 'email'); ?>
                    </div>

                    <div class="form-group">
                      <?php echo tep_draw_password_field('password', NULL, 'required aria-required="true" id="inputPassword" placeholder="' . ENTRY_PASSWORD . '"'); ?>
                    </div>

                    <p class="text-right"><?php echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'glyphicon glyphicon-log-in', null, 'primary', NULL, 'btn-success btn-block'); ?></p>

                  </form>
                </div>
              </div>

              <p><?php echo '<a class="btn btn-default" role="button" href="' . tep_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . MODULE_CONTENT_LOGIN_TEXT_PASSWORD_FORGOTTEN . '</a>'; ?></p>
            </div> <!-- LOGIN PART END //-->
            <div class="create-account-link <?php echo (MODULE_CONTENT_CREATE_ACCOUNT_LINK_CONTENT_WIDTH == 'Half') ? 'col-sm-6' : 'col-sm-12'; ?>">
              <div class="panel panel-info">
                <div class="panel-body">
                  <h2><?php echo MODULE_CONTENT_LOGIN_HEADING_NEW_CUSTOMER; ?></h2>

                  <p class="alert alert-info"><?php echo MODULE_CONTENT_LOGIN_TEXT_NEW_CUSTOMER; ?></p>
                  <p><?php echo MODULE_CONTENT_LOGIN_TEXT_NEW_CUSTOMER_INTRODUCTION; ?></p>

                  <p class="text-right"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'glyphicon glyphicon-chevron-right', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), null, null, 'btn-primary btn-block'); ?></p>
                </div>
              </div>
            </div> <!-- CREATE ACCOUNT PART END //-->
        </div><!-- /.row -->
      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

--------------------------------------------------------
inside the includes/languages/english.php
--------------------------------------------------------

add this

define('TEXT_GREETING_GUEST1', 'Welcome Guest! Would you like to');
define('TEXT_GREETING_GUEST2', 'log yourself in');
define('TEXT_GREETING_GUEST3', '? Or would you prefer to');
define('TEXT_GREETING_GUEST4', 'create an account');
define('TEXT_LOGIN_MODAL', 'Log in to');
define('IMAGE_BUTTON_BACK_SHOPPING', 'Back to Shopping');

I tried to use burts alternative modal code but that didn't work. It always showed the contents twice so 2x returning customer and 2x create account panels. No clue why.

auzStar · February 4, 2015

@@Tsimi

Just curious, you may have a valid reason, but why are you dumping all that code into the files and not using burts code from above, which does it all in 2 lines?

Sorry. Please ignore. I just read your last line. :x

auzStar · February 4, 2015

I tried to use burts alternative modal code but that didn't work. It always showed the contents twice so 2x returning customer and 2x create account panels. No clue why.

@@Tsimi

Try with this code inside the modal:

I haven't tried with your code but it worked when I tested while at the original login page where the same issue was happening using the navbar login.

                      <div class="row">
                        <?php
                        if ($oscTemplate->hasContent('login')) {
                          $page_content = implode("\n", $oscTemplate->_content['login']);
                        } else {
                          $page_content = $oscTemplate->getContent('login');
                        }
                        echo $page_content;
                        ?>
                      </div>

burt · February 4, 2015

Strange it works perfect for me. Is it just on the login page that the modal shows the login contents twice ?

auzStar · February 4, 2015

@@burt

@@Tsimi's saying it's happening at the other locations where he's trying to get the login modal to work, I haven't tried his code yet but just out of curiosity I tested at login page just to see what happens. Same thing happens, it duplicates. I tried the work around above which seems to work.

burt · February 4, 2015

Weird. Could you try changing the two lines of code to 1 line:

<?php
echo $oscTemplate->getContent('login');
?>

auzStar · February 4, 2015

Weird. Could you try changing the two lines of code to 1 line:
<?php
echo $oscTemplate->getContent('login');
?>

@@burt

No good. I thought so since I'd already tried storing it using a different variable name.

burt · February 4, 2015

V strange how it works OK at my shop. Oh well, one for the Mystery Machine to solve.

burt · February 4, 2015

Further testing, the only place I can see a double login is when the modal opens over the login.php page - all other pages are fine...

@@auzStar - Your code at http://forums.oscommerce.com/topic/399771-faster-login-with-bootstrap-modal/?p=1714333 solves that :thumbsup: sweet

♥Tsimi · February 4, 2015

Thanks for the help guys.

@@auzStar

Tested your code and it works good inside the navbar.php and create_account.php but it messes up the layout when used inside the index.php

The left is gone and the right column drops down below all the middle body content.

@@burt

Tried your code too, didn't work out. Double content inside the modal.

Another reason why i have to put the modal inside the create_account and index is the modal won't show inside the xs or sm view if i use the same id as the modal used in the navbar.php i think that happens because the navbar collapses and therefore the modal is hidden.

Only when you expand the menu on sm or xs the modal would show. That is why this work around. You could remove both text inside the index and crate account page then you don't need any of this. Except for the redirect part.

auzStar · February 4, 2015

Further testing, the only place I can see a double login is when the modal opens over the login.php page - all other pages are fine...

@@auzStar - Your code at http://forums.oscommerce.com/topic/399771-faster-login-with-bootstrap-modal/?p=1714333 solves that :thumbsup: sweet

Thanks @@burt,

Originally I had in place "if at login page don't show navbar login" in case you happen to stumble across the login page and that avoided the doubling of the modal content, but I took that out for testing purposes, to see if there was another solution to help @@Tsimi out.

Lambros, I haven't tried all your code yet, I'll try to help with the issue with the layout in the index.php.

cheers

auzStar · February 4, 2015

@@Tsimi

All good. Works using burt's code with my hack.

The issue with the index is an extra </div> gets added at the end after replacing the code. Remove that and it's ok.

Write Review is another place the redirect could be used. There's probably others too.

You're right about it being dirty though. Don't like the re-direct, that's the point of using a modal i.e. no page loads. Works for now :D

Really, all the buttons/links that take you somewhere that requires you to be logged in need to be recoded to call the modal when not logged in.

The modal that sits in the navbar probably needs to be placed somewhere that's accessible from everywhere so multiple modals can be avoided and one id is only needed (I think that can be done, need to test).

But all this is requiring some changes to core code. Most likely will be easier when everything goes modular :-.

cheers (off to bed now) :)

Archived

Faster login with bootstrap modal

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites