Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Modal Destination, and Modal within Modal


Recommended Posts

A) Some time ago, I adopted a Modal Logon system ...

This pops up a Modal whenever a customer logs into the store. I've modified all of the places where a customer can log in: from the header, the footer, or the shopping cart 'checkout' button, in order to trigger the popup Login Modal.

In the basic implementation, when the customer logs in through the modal popup, they end up in one of two places:

1) If they have items in their shopping cart, they end up at shopping_cart.php

2) Otherwise, they end up at index.php

I would prefer that they if they do not have anything in their cart, they return to whatever page they were viewing before they logged in. However, this is minor compared to ...

B) I am now trying to implement @burt's Navbar Popup Cart module, which is a Navbar Module consisting of a Modal popup that displays the contents of the Shopping Cart, and offers the customer the options of 1) viewing the cart, 2) continue shopping, or 3) checkout.

59c7e86011e4c_ScreenCapture-NavbarPopupCart.JPG.3a03c79f8d0ae18e6835813c813ebe95.JPG

I am trying to modify this modal popup to trigger my Login Modal if: 1) they click the Checkout button, and 2) they are not currently logged in.

I have been able to get the Checkout button to trigger the Login Modal, but ...

1a) The Login Modal now appears behind the Popup Cart Modal.

59c7f2becd35c_ScreenCapture-09-24-2017-A.JPG.5a903b98e92dd7fb22fcd4d8ae6906a6.JPG

I have been able to resolve this if I close the Popup Cart Modal when I trigger the Login Modal. However, the resulting Login Modal now will not scroll vertically with the page. So, if the customer needs to access the bottom of the Login Modal (say, they are on a smart phone), they can't scroll down.

1b) I might be able to keep the Popup Cart Modal open, and assign the Login Modal a different z-level, but I haven't tried this yet.

2) (and this is the main reason for this question!) Once the customer logs in through the Login Modal (after coming from the Popup Cart Modal), they end up at shopping_cart.php (see A1 above), where they have to click Checkout again. I would prefer that they end up at checkout_shipping.php.

I do not want to change the Login Modal to always go to checkout_shipping.php if there are items in the cart, but rather only if they login having gone through the Popup Cart Modal first.

So, my question is: Is there a way to specify where the customer end up after logging in through the Login Modal, based on other criteria? I have tried to include a set_snapshot() within the modal,

$navigation->set_snapshot(array('mode' => 'SSL', 'page' => 'checkout_shipping.php'));

but it returns an error ...

 Fatal error: Call to a member function set_snapshot() on a non-object in C:\wamp\www\catalog-m5\includes\modules\navbar_modules\templates\popup_cart.php on line 

TIA

Malcolm

Link to comment
Share on other sites

Link to comment
Share on other sites

Adding this to user.css :

.modal {
  overflow-y:auto;
}

allows the 2nd modal to scroll vertically (after the first modal has closed), but within its own 'frame' (for lack of a better word). The rest of the page is static.

Still looking ...

Malcolm

Link to comment
Share on other sites

We might just have a winner ...

Adding this to the Popup Cart Modal code ...

<script>
// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});
</script>

seems to be working ... More testing to come ... :cool:

Malcolm

Link to comment
Share on other sites

Alas, close, but no cigar ... :unsure:

The above code works, but ...

If I open the Popup Cart Modal, and then open the Login Modal, then *cancel* the Login Modal, the <body> gets a "padding-right: 17px", shifting the entire page. 17px just happens to be the width of the vertical scroll bar on the right side of the screen.

Successive  'Open' > 'Open' > 'Cancel' sequences adds an additional, accumulative  17px. Doing a page refresh gets rid of it, but .... I'd rather not have it happen in the first place.

Adding this:

.body, body.model-open {
  padding-right: 0px !important;
}

to user.css doesn't help.

Still testing ...

Malcolm

Link to comment
Share on other sites

I tried adding a page refresh to the 'Cancel' button in the Login Modal. It works, but ...

When you click on the 'Cancel' button,

1) the Modal closes

2) the page still has shifted to the left

3) after a short period of time (a second, or two, or three), the page refreshes, and moves back where it belongs.

Still searching and testing ...

Malcolm

Link to comment
Share on other sites

Ok this seems to be working. Everything seems to align where it is supposed to align, scroll where it is supposed to scroll, etc. The screen does 'jitter' a bit when the Modals open and close, but other than that ...

<script>
// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});

// Fix extra 17px padding for vertical scrollbar
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});
</script>

So, unless anyone can suggest any improvements, I think I'm going to consider this closed.

Thanks, and I hope this helps anyone else trying to do something like this.

Malcolm

Link to comment
Share on other sites

OK, interesting topic...I like these topics where (a) it's something new, and (b) it requires investigations.  

https://getbootstrap.com/docs/3.3/javascript/#modals

The first "alert" point is this;

Multiple open modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

But there is no mention of what "custom code" would be required...

So, let's look at finding that Custom Code.  A google brings me here:

https://stackoverflow.com/questions/19305821/multiple-modals-overlay

and that first image looks much like the problem you're having...so I'd first try their code.  This fiddle looks good (other than the awful modal loading effects); http://jsfiddle.net/CxdUQ/

Anyone got more to add?  Different ideas or viewpoints?

Link to comment
Share on other sites

Thanks, @burt

I too have been all over the web searching for answers. Yes, I found the "Multiple open models not supported" statement. And, the first function (is that what it's called in javascript? I have no clue) in the <script> code I've posted above addresses that (I think it, or a variation of it, is even shown in the link you posted).

In my case, I saw no problem closing the first modal when opening the second. The customer had opened the Cart model to display what was in their cart. They then clicked on the 'Checkout' button. If logged in, they go straight to checkout. If not, they need to log in. So, up pops the Login modal. I didn't see the need to keep the Cart model open underneath.

My second issue was how to make sure that the customer ended up at checkout after the logged in. @raiwa pointed me in the right direction there.

My last issue was a cosmetic issue, also well documented on the web. Many 'solutions' were posted, but none worked for me. I finally found the answer I posted above. I've actually found another similar bit of code that also works:

$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});

- vs -

$('.modal').on('hide.bs.modal', function (e) {
  e.stopPropagation();
  $('body').css('padding-right','');
});

but not knowing anything about javascript, I'm not well equipped to judge which one is better.

As a 'problem', this definitely stretched the limits of my coding and problem solving abilities. Like I said, I hope that this also helps anyone else trying to do something like this too.

Malcolm

Link to comment
Share on other sites

  • 2 weeks later...

@raiwa

Along a similar note ...

I'm modifying the 'checkout' button in shopping_cart.php to also check to see if the customer is logged in. (yes, I probably could modify checkout_shipping.php to pop up the modal instead, but ...)

If they are logged in, they continue to checkout_shipping.php as they are supposed to. If not, up pops the Login Modal:

(below is from my modified shopping cart.php)

/* If the customer is not logged in, pop-up the login modal. Added 10/03/2017 */

    if (!tep_session_is_registered('customer_id')) {
      $navigation->set_snapshot(array('mode' => 'SSL', 'page' => 'checkout_shipping.php' ));
?>

      <div class="buttonSet">
        <div class="text-right">
          <?php echo '<a class="btn btn-success" data-toggle="modal" href="#ModalLogin">' . '<span class="fa fa-angle-right"></span> ' . IMAGE_BUTTON_CHECKOUT . ' </a>' ; ?>
        </div>
      </div>

<?php

/* If the customer *IS* logged in, continue to Checkout_Shipping */

    } else {
?>

      <div class="buttonSet">
        <div class="text-right">
          <?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'fa fa-angle-right', tep_href_link('checkout_shipping.php', '', 'SSL'), 'primary', NULL, 'btn-success'); ?>
        </div>
      </div>

<?php
    }

It does pop up the Modal if the customer is not logged in, but does *not* take them to checkout_shipping.php after they log in. Instead, it returns them to shopping_cart.php.

I don't see a Globals list in shopping_cart.php. Any suggestions of where to go from here?

TIA

Malcolm

Link to comment
Share on other sites

Hello Malcolm @ArtcoInc,

If I well remember there is javascript involved for to set the snapshot.

Please see this post and following:

https://www.oscommerce.com/forums/topic/399771-faster-login-with-bootstrap-modal/?do=findComment&comment=1728743

I have also 2 additional files for snapshot:

ext/content/header/login_modal/clear_snapshot.php
ext/content/header/login_modal/set_snapshot.php

hope this helps
Rainer

 

Link to comment
Share on other sites

@ArtcoInc, sorry, long time ago I did this implementation and I do not remember all the details

Please PM a mail contact, I'll send you all my files, so you can have a look.

 

The javascript was posted here:

On 21/5/2015 at 6:29 AM, auzStar said:

@@raiwa

 

 

Rainer,

Thanks for testing.

We could probably include an option in the login modal module to select the modal size, user preference.  :)

How did you go with the "header module loaded first" issue? I wasn't able to replicate.

 

Trying something different again. :D

I'm attempting to get the links/buttons to fire the login modal without actually modifying each ones code (no core code changes (w00t)), using jquery/javascript. Have successfully tested with "Tell a friend (Share via E-mail)", "Notifications" and "Notify me of updates" links on the "Product Notifications" and "Product Social Bookmarks" box modules (which are links not included in the original modifications, so should have clean code). 

 

If you want to test, enable the "Product Notifications" and "Product Social Bookmarks" box modules and make sure "E-mail" is enabled in "Social Bookmarks" modules. Also set Allow Guest To Tell A Friend to false in "admin->config->my store". (It's assumed that you have downloaded and followed the instructions in the zip file from above post, but not made the changes to bm_products_notifications.php from Rainer's post above or changes to bm_product_social_bookmarks.php).

 

Tested in IE11, latest Chrome and Firefox.

 

Needs to be tested with SSL enabled again.

 

(modifications are required to the "Login Modal" module code as per below but no need to remove/re-install the module)

 

add $request_type to globals in "catalog\includes\modules\content\header\cm_header_modal.php":


    function execute() {
      global $oscTemplate, $PHP_SELF, $request_type;

add this code under the existing script inside "catalog\includes\modules\content\header\templates\modal.php":

(this addition will allow the existing script to work on the manually coded link changes done previously)


<?php
if ( !tep_session_is_registered('customer_id') && defined('MODULE_CONTENT_HEADER_MODAL_STATUS') && (MODULE_CONTENT_HEADER_MODAL_STATUS == 'True') ) {
?>

<script>
$(function() {

  var tell_a_friend = "<?php echo tep_href_link('tell_a_friend.php', 'products_id=' . $_GET['products_id']) ?>";
  if ($("a[href='"+tell_a_friend+"']").is(":visible") && "<?php echo ALLOW_GUEST_TO_TELL_A_FRIEND == 'false' ?>") {
    $("a[href='"+tell_a_friend+"']").click(function(e) {
      e.preventDefault();
      set_snapshot('tell_a_friend.php');
      show_login_modal();
    });
  }

  var account_notifications = "<?php echo tep_href_link('account_notifications.php') ?>";
  if ($("a[href='"+account_notifications+"']").is(":visible")) {
    $("a[href='"+account_notifications+"']").click(function(e) {
      e.preventDefault();
      set_snapshot('account_notifications.php');
      show_login_modal();
    });
  }

  var product_notify = "<?php echo tep_href_link($PHP_SELF, tep_get_all_get_params(array('action')) . 'action=notify') ?>";
  product_notify = product_notify.replace(/&/g, '&');
  if ($("a[href='"+product_notify+"']").is(":visible")) {
    $("a[href='"+product_notify+"']").click(function(e) {
      e.preventDefault();
      set_snapshot("<?php echo $PHP_SELF ?>", {action: "notify"}, "<?php echo $request_type ?>");
      show_login_modal();
    });
  }

});

function set_snapshot(redirect_page, redirect_vars, redirect_ssl) {
  var redirect_vars = redirect_vars || {};
  redirect_vars = $.extend(<?php echo json_encode($_GET) ?>, redirect_vars);
  var redirect_ssl = redirect_ssl || '';
  $.ajax({ type: "GET", dataType: "json", url: "set_snapshot.php", data: {'redirect_ssl': redirect_ssl, 'redirect_page': redirect_page, 'redirect_vars': redirect_vars} });
}

function show_login_modal() {
  $('#ModalLogin').modal('show');
}
</script>

<?php
}
?>

replace the contents of the "catalog\set_snapshot.php" file with:


<?php
require('includes/application_top.php');

$navigation->set_snapshot( array('mode' => (isset($_GET['redirect_ssl']) && tep_not_null($_GET['redirect_ssl'])? $_GET['redirect_ssl'] : 'SSL'), 'page' => $_GET['redirect_page'], 'get' => $_GET['redirect_vars']) );

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

cheers

 

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...