Ajout loader au bouton Connexion

[rquantin]

Bonsoir,

 

J'ai fais quelque recherche mais je ne suis pas un adepte du JS, c'est pourquoi je me permet de poser mon problème ici:

J'ai ma page commande qui est en OPC (OnePageCheckout), j'ai mes trois colonne tout fonctionne bien.

 

Cependant, quand un client déjà enregistré s'identifie, le temps de "réponse" est +/- 10 secondes et aucune action visuelle n'apparait (chargement de la page, loader du navigateur, ...). Donc pour le client, il peut se dire que son clic n'a pas été pris en compte.

 

C'est pour cette raison que je souhaiterais ajouter un loader au click d'identification du code JS #SubmitLogin.

 

le code se trouve dans /theme/montheme/js/order-opc.js

 

Voici le bout de code:

 

// LOGIN FORM SENDING

$(document).on('click', '#SubmitLogin', function(e){

e.preventDefault();

            var that = $(this);

$.ajax({

type: 'POST',

headers: { "cache-control": "no-cache" },

url: authenticationUrl + '?rand=' + new Date().getTime(),

async: false,

cache: false,

dataType : "json",

data: 'SubmitLogin=true&ajax=true&email='+encodeURIComponent($('#login_email').val())+'&passwd='+encodeURIComponent($('#login_passwd').val())+'&token=' + static_token ,

success: function(jsonData)

{

if (jsonData.hasError)

{

var errors = '<b>'+txtThereis+' '+jsonData.errors.length+' '+txtErrors+':</b><ol>';

for(var error in jsonData.errors)

//IE6 bug fix

if(error !== 'indexOf')

errors += '<li>'+jsonData.errors[error]+'</li>';

errors += '</ol>';

$('#opc_login_errors').html(errors).slideDown('slow');

}

else

{

// update token

static_token = jsonData.token;

updateNewAccountToAddressBlock(that.attr('data-adv-api'));

}

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

if (textStatus !== 'abort')

{

error = "TECHNICAL ERROR: unable to send login informations \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus;

           if (!!$.prototype.fancybox)

               $.fancybox.open([

                   {

                       type: 'inline',

                       autoScale: true,

                       minHeight: 30,

                       content: '<p class="fancybox-error">' + error + '</p>'

                   }

               ], {

                   padding: 0

               });

           else

               alert(error);

}

}

});

});

 

 

Si quelqu'un peut me donner une petite idée, merci beaucoup !

 

Prestshop 1.6.1.2