X-Cart forums

[Mish]

*** CODE UPDATED TO SUPPORT PRE JQUERY 1.7 ***

Hi guys,

I have found that a number of users have ended up not proceeding with orders because they didn't realease they had to click the APPLY button on the One Page Checkout page [Ajax checkout]. Essentially they would enter there name and address, then try enter their payment details by clicking on the "Credit Card" radio button. As you'd be aware, if someone hasn't clicked APPLY at the bottom of the name/address area, they can't select payment or shipping options etc. My users would get confused and leave. I found this out when one user called me.

I have modified X-Cart to generate a popup alert if the user attempts to click on anything in the Payment/Shipping area. Previously nothing would happen if they would try click in this area.

1> Open the file /skin/common_files/modules/One_Page_Checkout/ajax.checkout.js

2> Go to line ~590 and find the following function:

ajax.widgets.checkout.obj.prototype.disableCheckout = function() {

  if (!this.isReady() || !this.checkElement()) {
    return false;
  }

 
  this.disableCheckoutButton();
  this.disablePaymentSelection();
  this.disableShippingSelection();

}

Change it to read [note the new code inserted]:

ajax.widgets.checkout.obj.prototype.disableCheckout = function() {

  if (!this.isReady() || !this.checkElement()) {
    return false;
  }
  
$("#opc_shipping_payment").click(function() {
  alert("Please click the APPLY button below the area where you entered your name and address.");
});  
  
  this.disableCheckoutButton();
  this.disablePaymentSelection();
  this.disableShippingSelection();

}

3> Look immediately below that function, and find the following function:

// Widget :: enable checkout sections and button after profile change
ajax.widgets.checkout.obj.prototype.enableCheckout = function() {

  if (!this.isReady() || !this.checkElement()) {
    return false;
  }

  if (!paypal_express_selected) {
    this.enablePaymentSelection();
  }
  this.enableShippingSelection();

  if (!this.enableCheckoutButton()) {
    var _s = this;
    this.timer_id_check_button = setInterval( 
      function() { _s.enableCheckoutButton(); },
      2000
    );
  }

}

Change that code to read [note the new line inserted]

// Widget :: enable checkout sections and button after profile change
ajax.widgets.checkout.obj.prototype.enableCheckout = function() {

  if (!this.isReady() || !this.checkElement()) {
    return false;
  }

  if (!paypal_express_selected) {
    this.enablePaymentSelection();
  }
  this.enableShippingSelection();
$("#opc_shipping_payment").unbind("click");

  if (!this.enableCheckoutButton()) {
    var _s = this;
    this.timer_id_check_button = setInterval( 
      function() { _s.enableCheckoutButton(); },
      2000
    );
  }

}

Hope this helps.

[cflsystems]

That is a good one. Many customers are confused and leave because of the way XC OPS works

[Mish]

If people would prefer, I could make it so that the Center and right columns were not visible until the user clicked "APPLY". What do you guys think?

[cflsystems]

It would have been way better actually if this page was in vertical up->down order instaed of horizontal left->right. If you hide the columns until info is entered there will be empty wasted space which is not looking good.
This is just another area (along with the address book) that needs a complete overhaul by QT

[cherie]

generate a popup alert if the user attempts to click on anything in the Payment/Shipping area

What if it automatically triggered the Apply button instead?

[cflsystems]

Originally Posted by cherie

What if it automatically triggered the Apply button instead?

But when? There are so many fields and not all required so you don't know when customer is finished entering data. Even if you assume that customer is finished entering personal info just because they tried to click on shipping/payment section - still they may have not finished and just wanting to see what happens... It has to be either all sections enabled and ajax updated or current way... which all agree is just not good

[flyclothing]

I added this and now the message applies even after applying address information. It now shows up when picking shipping, making payment, etc.

[Mish]

Did you insert the line:

$('#opc_shipping_payment').off('click');

[flyclothing]

Yeah,

I definitely added both lines (and just deleted them). I had a customer tell us that the site just kept asking her to "APPLY" even though she already did. Had to remove the cose because it was causing more confusion to the already-confusing OPC.

[Mish]

You must have had something wrong with that line. That second line removes the onclick handler from the Shipping / Payments division. Shame you removed it, you should have cut and paste the code here