Hello,
I just noticed this:
On the PaymentInformation pane, when the client is able to choose between multiple payment options, each time she changes her choice, an ajax request is fired because the payment_method radios has an ajax callback:
$pane_form['payment_method'] = [
'#type' => 'radios',
'#title' => $this->t('Payment method'),
'#options' => $option_labels,
'#default_value' => $default_option->getId(),
'#ajax' => [
'callback' => [get_class($this), 'ajaxRefresh'],
'wrapper' => $pane_form['#id'],
],
'#access' => count($options) > 1,
];
I noticed that if you change payment option and quickly submit the commerce step form, the new payment option that you just chose is not selected because the ajax request did not complete yet so the changes were not taken into account.
We should disable the form submit until the ajax request is complete.
This is how I managed to do this on the website I am responsible for:
(function ($, Drupal, drupalSettings) {
'use strict';
Drupal.behaviors.switchPaymentOption = {
attach: function (context) {
$(document).ajaxStart(function() {
$("form.commerce-checkout-flow input.form-submit").prop("disabled", true);
});
$(document).ajaxComplete(function() {
$("form.commerce-checkout-flow input.form-submit").prop("disabled", false);
});
}
};
})(jQuery, Drupal, drupalSettings);
what do you think?
Active
2.38
Checkout
Sounds like a good idea... Though ideally I'd like our JS code to rely on JQuery as little as possible going forward.
Also, https://api.jquery.com/ajaxComplete-shorthand/ (the ajaxComplete() method is deprecated, it should be replaced by a "on").