Problem:
When user is writing postal code and then clicks on "My billing information is the same..." sometimes happens that delivery information isn't copied to billing info. That happens because 2x ajax gets triggered:
First time when user loses focus from postal code field, and the second time is when he clicks on checkbox for billing info and somehow checkbox for billing is triggered before postal code so i guess that it doesn't have required information to fill up billing information fields based on delivery. To reproduce the problem heavier website is needed and you need to try multiple times.

Because billing fields are not filled up this error appears:

First name field is required.
    Last name field is required.
    Street address field is required.
    City field is required.
    Postal code field is required.

This is very unpleasant error because it's on checkout page.

Solution could be based on preventing click on "My billing information is the same..." until ajax from postal code is finished.

CommentFileSizeAuthor
#5 for_drupalorg.jpg165.82 KBNemanja
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

TR’s picture

deja711’s picture

I am seeing the same issue, and customer are complaining. It give inconsistent experience, at the last part of the checkout process which is not good. I tried few approaches but failed to make it better.

Does anybody has suggestions whether this or other solution will remedy this issue?

longwave’s picture

If you do not need any Ajax functionality on the postal code field you can disable it with the Ajax Admin module provided with Ubercart.

It should be possible to disable the checkbox while Ajax requests are in progress, a patch for this would be welcome.

Nemanja’s picture

I would be willing to give it a shot, but first please can somebody give me sanity check on this approach:

Proposal 1)
This would be possibly handled in theme
Hide whole billing region with css and jquery until postal code ajax finishes. We can detect which ajax is finished and at the right time show billing fieldset. Perhaps this could work, but it would not be fix that others would benefit from, unless they perform the same in their theme. Unless we also include this in Ubercart's js?

Proposal 2)
This would be patch to ubercart
Modify function which enters billing information, we need some global variable that acts as a flag to put on TRUE when postal code is focused and to FALSE when it's blurred. After that modify "my billing info is the same..." function to check for previous flag if it is FALSE, then continue with checking.

fdpo

This is what i did, but it needs more work, currently i can't think of any better solution, any idea would be welcome:

/*
     *  Checkout fix
     */
    if($('#delivery-pane').length != 0 && $('#billing-pane').length != 0){
      var postalFocused = false;
      var postal = $('#edit-panes-delivery-address-delivery-postal-code').val();
      if(postal.length == 0){
        $('#billing-pane').attr('disabled', true);
      }
      
      $('#edit-panes-delivery-address-delivery-postal-code').focus(function(){
        postalFocused = true;
      });
      $('#edit-panes-delivery-address-delivery-postal-code').blur(function(){
        postalFocused = false;
        if($('#edit-panes-delivery-address-delivery-postal-code').val().length != 0){
          $('#billing-pane').attr('disabled', true);
        }
      });
      
      $('fieldset#delivery-pane').mouseleave(function(){
        if(postalFocused == true){
          $('#edit-panes-delivery-address-delivery-postal-code').blur();
        }
      });
      
      jQuery('#delivery-pane').ajaxStop(function () {
        if($('#edit-panes-delivery-address-delivery-postal-code').val().length != 0){
          $('#billing-pane').removeAttr('disabled');
        }else{
          $('#billing-pane').attr('disabled', true);
        }
      });
    }
Nemanja’s picture

FileSize
165.82 KB