X-Cart forums - One-Page Checkout - Warning user to click APPLY

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - One-Page Checkout - Warning user to click APPLY (https://forum.x-cart.com/showthread.php?t=63985)

One-Page Checkout - Warning user to click APPLY

*** 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:

Code:

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]:

Code:

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:

Code:

// 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]

Code:

// 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.