Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Faster login with bootstrap modal


Recommended Posts

@@auzStar

 

 

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

 

That was it! Thanks. Everything is good now.

 

 

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

 

 

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

 

Dominic you are a genius! You gave me a good hint. :thumbsup:

 

Easy way: You could add the modal code inside the footer.php. The footer get's loaded on all pages.

Correct way?: I quickly created a content module with this modal code inside it.

 

navbar.php
 

<?php echo '<a style="cursor:pointer;" data-toggle="modal" data-target="#ModalLogin">' . HEADER_ACCOUNT_LOGIN . '</a>';?>

create_account.php
 

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

index.php (remove last </div>)
 

<div class="contentContainer">
  <div class="alert alert-info">
    <?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="#ModalLogin">' . TEXT_GREETING_GUEST2 . '</a>' . TEXT_GREETING_GUEST3 . ' <a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . TEXT_GREETING_GUEST4 . '</a>?';
    }
    ?>    
  </div>
</div>

create the following new files

 

catalog/includes/modules/content/footer/cm_footer_modal.php

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_footer_modal {
    var $code;
    var $group;
    var $title;
    var $description;
    var $enabled = false;

    function cm_footer_modal() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_FOOTER_MODAL_TITLE;
      $this->description = MODULE_CONTENT_FOOTER_MODAL_DESCRIPTION;

      if ( defined('MODULE_CONTENT_FOOTER_MODAL_STATUS') ) {
        $this->enabled = (MODULE_CONTENT_FOOTER_MODAL_STATUS == 'True');
      }
    }

    function execute() {
      global $oscTemplate;
      
           ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/modal.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_FOOTER_MODAL_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Login Modal', 'MODULE_CONTENT_FOOTER_MODAL_STATUS', 'True', 'Do you want to enable the Generic Text content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_FOOTER_MODAL_STATUS');
    }
  }


catalog/includes/modules/content/footer/templates/modal.php

<div class="modal fade" id="ModalLogin" 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> <!-- /.modal-header -->
	<div class="modal-body">
	 <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>
	  </div> <!-- /.modal-body -->
  </div> <!-- /.modal-content --> 
</div> <!-- /.modal-dialog --> 
</div> <!-- /.Modal Login --> 

catalog/includes/languages/english/modules/content/footer/cm_footer_modal.php

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2015 osCommerce

  Released under the GNU General Public License
*/

  define('MODULE_CONTENT_FOOTER_MODAL_TITLE', 'Login Modal');
  define('MODULE_CONTENT_FOOTER_MODAL_DESCRIPTION', 'Shows a Login Modal');



Now we have one Modal for all pages. Or anywhere where "#ModalLogin" is called.

The modules Enable true/false setting is not needed actually. Once the module is loaded it doesn't matter if true or false the modal shows anyway.

Link to comment
Share on other sites

  • Replies 101
  • Created
  • Last Reply

For all those that use the login_redirect.php

 

Replace the whole contents of the file with this

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2015 osCommerce

  Released under the GNU General Public License
*/

  require('includes/application_top.php');

  require(DIR_WS_LANGUAGES . $language . '/' . 'login_redirect.php');

  $breadcrumb->add(NAVBAR_TITLE, tep_href_link('login_redirect.php', '', 'SSL'));

  require(DIR_WS_INCLUDES . 'template_top.php');
?>

<div class="page-header">
  <h1><?php echo HEADING_TITLE; ?></h1>
</div>

<div class="row" style="margin-bottom:20px;">
    <div class="col-xs-6 col-sm-6">
		<?php echo tep_draw_button(IMAGE_BUTTON_BACK_SHOPPING, 'glyphicon glyphicon-chevron-left', tep_href_link(FILENAME_DEFAULT), 'primary', NULL, 'btn-default'); ?>
    </div>
    <div class="col-xs-6 col-sm-6 text-right">
		<?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?>
    </div>
</div>


<?php
  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>
<script type="text/javascript">
    $(window).load(function(){
        $('#ModalLogin').modal('show');
    });
</script>

that uses the same modal as inside the module or footer depends where you added the modal.

Link to comment
Share on other sites

@@Tsimi

 

:thumbsup: to new changes.

 

I tested the redirecting in product_reviews_write.php using the redirect code changes used in checkout_shipping.php but when it redirects to login_redirect.php the modal appears ok but there's a "Checkout" button there. Wondering if that button is really needed?

 

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

@@auzStar

 

Yeah it is there on purpose.

If the customer closes the modal by accident he still has the choice to try and checkout again or continue shopping. ;)

At first I wanted to remove the possibility to close the modal but then the customer would be stuck there. :wacko:

 

One more thing I need to explain. To all out there that think to use the modal from the navbar.php, it won't work on xs or sm view mode when the navbar is collapsed.

The modal can only be called when in md or lg view mode when the navbar is open. That is why i wrote this work around and thanks to Dominic that gave the great idea to

add the modal somewhere where it is always accessible no matter if xs, sm, md or lg view mode.

Link to comment
Share on other sites

Another idea, why not have the modal link in the navbar always available even when in XS/SM etc.

To add a whole new (pretty much defunct) page seems a bit awkward? 

 

Yeah that should work. Then there would be no need to add the modal code inside the footer or for the modal content module.

But you still need the redirect page if you want to have the modal when clicking on the checkout button.

Link to comment
Share on other sites

Another idea, why not have the modal link in the navbar always available even when in XS/SM etc.

 

As I originally wrote this, the modal is always available from the navbar. When the screen is in MD or LG mode, just click on the login button. When the screen is in XS or SM mode, you need to click on the (for lack of a better term) 'hamburger icon' to expand the minimized navigation menu. Now you can click on the login button, and the modal works.

 

What @@Tsimi has discovered is, if you try to use the modal to log in *elsewhere* in osC (right now, I am trying to use this in the shopping cart, for example), and if the screen is in XS or SM mode, the modal won't work (the screen kind of locks up, and you have to expand the screen to MD or LG mode to see what's going on).

 

But, if you are in XS or SM mode, and if you click on the hamburger icon to expand the navigation menu *before* you use the modal elsewhere in osC, the modal pops up fine.

 

So, it seems that for the modal to work, it has to be defined in something that is visible. And, it seem that when the navigation menu is minimized, items in it aren't visible. So, it probably makes sense to define the modal somewhere else that *is* always visible (such as the footer, as Tsimi has done).

 

My original code was basically a 'proof of concept'. I am pleased that others have added their ideas and improvements.

 

Malcolm

Link to comment
Share on other sites

In this case, what you do is have the modal link always showing even if the navbar is XS and therefore "closed".  There are examples of this at the bootstrap site and if you want to see a live example of such see the "call us" link in the navbar of the Gablehause template.

 

As for modal <> checkout button, this is solved by testing the $customer_id, if it's unset (ie not logged in), have the button point at the modal.  If it is set, have it as a standard button that points at checkout_shipping.  We covered the basis of that idea in a chat, not sure if it was tested though.

 

Go one step further...is it possible to instantiate a modal at the top of checkout shipping (rather than redirect to login/create_account page).  

 

It seems awkward to require a whole new page just to have a usable popup window.

Link to comment
Share on other sites

@@burt

 

In this case, what you do is have the modal link always showing even if the navbar is XS and therefore "closed".  There are examples of this at the bootstrap site and if you want to see a live example of such see the "call us" link in the navbar of the Gablehause template.

 

In your Gablehause template, you have the "call us" to the far left, and is excluded when the menu collapses. How can I keep the login/account button where it is (in the middle of the nav menu), but be excluded when the menu collapses? When the menu is collapsed, I'd like the login/account button to the left of the hamburger icon.

 

 

As for modal <> checkout button, this is solved by testing the $customer_id, if it's unset (ie not logged in), have the button point at the modal.  If it is set, have it as a standard button that points at checkout_shipping.  We covered the basis of that idea in a chat, not sure if it was tested though.
 
I have been working on this in shopping_cart.php. By testing for $customer_id, the 'Checkout" button goes either to checkout_shipping.php or it pops up the modal.
 
<?php
    if (tep_session_is_registered('customer_id')) {
?>

      <?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?>

<?php
    } else {
      $navigation->set_snapshot();
?>

      <?php echo '<a style="cursor:pointer;" data-toggle="modal" data-target="#ModalLogin">' . tep_draw_button(IMAGE_BUTTON_CHECKOUT, "glyphicon glyphicon-chevron-right", NULL, "primary", NULL, "btn-success") . '</a>';?>

<?php
    }
?>
 
My problem is, once I return from the modal, how to redirect to checkout_shipping.php.
 
Malcolm
Link to comment
Share on other sites

As noted above, I'm trying to test if a customer is logged in when clicking on the Checkout button in the shopping cart:

<!-- Begin Modal Login -->

<?php
    $LoginViaModal = 'false';
    if (tep_session_is_registered('customer_id')) {
?>
      <?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon glyphicon-chevron-right',tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?>

<?php
    } else {
      $navigation->set_snapshot();
?>

      <?php echo '<a style="cursor:pointer;" data-toggle="modal" data-target="#ModalLogin">' . tep_draw_button(IMAGE_BUTTON_CHECKOUT, "glyphicon glyphicon-chevron-right", NULL, "primary", NULL, "btn-success") . '</a>';?>
      <?php $LoginViaModal = 'true'; ?>

<?php
    }
?>

<?php
    if ($LoginViaModal = 'true') {
      if (tep_session_is_registered('customer_id')) {
        tep_redirect(tep_href_link(FILENAME_CHECKOUT_SHIPPING));
      }
    }
?>

<!-- End Modal Login -->

There are two problems with this ...

 

1) If the customer is not logged in, they can add all the items they want to the cart. When they click on Checkout, the modal pops up, they log in, and are redirected to checkout_shipping.php. *BUT*, if they try to go back to the shopping cart, they immediately get redirected again to checkout_shipping, and can not view or edit what's in their cart.

 

2) If the customer *is* logged in, once they add an item to their cart, they are immediately redirected to checkout_shipping.

 

Any ideas?

 

Malcolm

Link to comment
Share on other sites

@@burt

 

 

 
Have you set $LoginViaModal to true anywhere?  I see it now, yes.
 
if ($LoginViaModal = 'true') {

here you are not comparing apples to apples.  Fix that before moving on.  change = to ==

 

 

$LoginViaModal was set to 'true' in line 15 of the above code.

 

Changing the = to == in line 22 solved the automatic redirect problem. Thank you!  *But* ...

 

Now, if the customer was not logged in, clicks on Checkout, and logs in through the modal, they are dropped back into the shopping cart, and have to click on Checkout once again.

 

The Bootstrap Modal has 5 events:

 

show.bs.modal           <- fires immediately when the modal is triggered

shown.bs.modal         <- fires once the modal is displayed

hide.bs.modal            <- fires immediately when the modal is triggered to close

hidden.bs.modal        <- fires once the modal is closed

loaded.bs.modal        <- having to do with remote content ... not applicable here

 

I have monitored all of these events. When the customer clicks on the Checkout button, the show.bs.modal and shown.bs.modal events trigger as they should. If the customer cancels out of the modal (clicking on the X in the top right), the modal closes, and the hide.bs.modal and hidden.bs.modal events trigger as they should.

 

If the customer clicks on the Checkout button, fills in their information, then clicks on the Log In button, the modal closes, *but* neither the hide.bs.modal nor the hidden.bs.modal events trigger. It seems that the submit function within the form in the modal cancels any of the remaining triggers.

 

 

So, I tried something else. I modified the Log In button within the modal to see if I could capture the event associated with it

<button id="myModalLogIn" class="btn-block btn-lg btn-primary">Log In</button>

Then, I was successful in capturing that event (this is in shopping-cart.php, after calling the modal):

<script>
  $('#myModalLogIn').click(function() {
    alert("The 'Log In' button was pressed.");
  });
</script>

But, all I can do is get it to do is pop up the alert. I haven't been able to get it to issue the redirect, or to modify the variable $LoginViaModal, or anything else.

 

Malcolm

Link to comment
Share on other sites

*update*

 

In my prior post  http://www.oscommerce.com/forums/topic/399771-faster-login-with-bootstrap-modal/?p=1714556

I had some code in line 15 that set the variable $LoginViaModal to 'true'.

 

What I failed to realize was that this was not conditionally set when and if the modal fired. :blush:  But rather, whenever the customer enters the shopping cart and is not logged in, the IF statement branches to here, and this is automatically set to 'true'.

 

So, this won't work for my conditional testing :(

 

Back to work ... :wacko:

 

Malcolm

Link to comment
Share on other sites

Hi

 

I think you could strip the $loginviamodal stuff right out and try:

 

$navigation->set_snapshot(FILENAME_CHECKOUT_SHIPPING);

 

If the modal login acts the same way as login.php then that may work as the navigation reckons you started at checkout_shipping.php

Link to comment
Share on other sites

Hi @@ArtcoInc

 

Just tried the Faster Login and one thing I notice is that in my user.cc I have

 body {    
  /* background:width: 1200px;margin:0 auto;-overflow-y:scroll;-ms-overflow-style:scrollbar;
}
@@media (max-width: 1200px) {
body {
    width: 100%;
}
}

 

However what seems to happen is that when using the drop down login the width of the site dimishes by about 20px, then when logged in the widith returns to the correct size.

 

Do I need to change the css or something.

 

Cheers

Grandpa

Link to comment
Share on other sites

@@grandpaj

 

There was an issue as Malcolm explained but that should have been solved with the Bootstrap version 3.2.x and higher.

There is though another issue left unsolved even with the latest version 3.3.2. When you have a fixed navbar at the top that navbar shifts to the right for about 15px when a modal is open. The rest of the page is OK and doesn't shift only the fixed navbar.

Link to comment
Share on other sites

  • 2 months later...

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 ?

Its working for me

:thumbsup:

Link to comment
Share on other sites

Works great even with PayPal Login module.

I just changed to fit better the content with half sized modules:

            		<div class="modal-dialog">

to:

            		<div class="modal-dialog modal-lg">
Link to comment
Share on other sites

Modal login in shopping_cart.php (navbar modification also required):

  <div class="buttonSet">
  <?php
  // if the customer is not logged on, pop-up the login modules
  if (!tep_session_is_registered('customer_id')) {
    $navigation->set_snapshot(array('mode' => 'SSL', 'page' => FILENAME_CHECKOUT_SHIPPING));
  	?>
    <div class="text-right"><div class="btn btn-primary btn-success" data-toggle="modal" data-target="#ModalLogin"><span class="glyphicon glyphicon-chevron-right"></span><?php echo ' ' . IMAGE_BUTTON_CHECKOUT;?></div></div>
    <?php
  } else {
  	?>
    <div class="text-right"><?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?></div>
    <?php
  }
  ?>
  </div>

Link to comment
Share on other sites

@@raiwa

 

When you do this, after the Modal pops up and the customer logs in, to where does it return the customer? Directly to Checkout, or back to the Shopping Cart?

 

I tried for a long time to have it send the customer to Checkout, rather than having them click the Checkout button twice, but was never able to get it to work for me.

 

Malcolm

Link to comment
Share on other sites

Malcolm @@ArtcoInc,

 

Yes, to checkout_shipping. This is done here:

   $navigation->set_snapshot(array('mode' => 'SSL', 'page' => FILENAME_CHECKOUT_SHIPPING));
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...