icone de chargement sur la page "Historique de vos commandes"

[Sam Minerve]

Bonjour,

 

Comme vous le savez, sur la page "Historique de vos commandes" du compte utilisateur, il est possible de voir le détail de chaque commande en cliquant sur le lien de la référence.

Problème : la partie contenant le détail de la commande met beaucoup de temps à s'afficher.

 

J'ai donc voulu placer un loader à côté du lien de référence pour indiquer à l'utilisateur que le chargement est en cours (afin qu'il ne quitte pas tout de suite la page ou qu'il évite de cliquer comme un malade sur le lien).

 

Pour cela, j'ai ajouté un "<span class="waitimage"></span>" dans le fichier "history.tpl" (l.62). 

Je définis bien sûr le css de ".waitimage" avec notamment un "display:none".

Puis, dans le fichier "history.js", je modifie le début de la fonction "showOrder" comme suit :

 

function showOrder(mode, var_content, file)
{
    $('.history_link .waitimage').show(); // ajout perso
    $.get(
        file, ....

 

et la fin (l. 96) comme suit :

 

$(this).fadeIn('fast', function() {
                $('.history_link .waitimage').hide(); // ajout perso
                $.scrollTo(this, 1200);

...

 

Bon, le loader fonctionne bien comme il faut à ceci près qu'il s'affiche sur chaque ligne de commande. Par ex., dans un tableau qui contient 3 commandes, si je clique sur la première commande pour voir le détail, eh bien le loader s'affiche sur les 3 lignes en même temps.

 

Désolé pour ce long post mais si quelqu'un peut me dire comment faire pour que le loader ne s'affiche que pour la ligne en question, ce serait vraiment sympa.

 

Merci d'avance.

[Sam Minerve]

Bon, je m'auto-réponds vu que j'ai finalement trouvé ce que je cherchais.

En fait, il ne faut modifier que la fin de la fonction "showOrder" comme je l'ai fait précédemment (à partir de la ligne 96) ; et dans le fichier "history.js", on ajoute :

$('a.color-myaccount').click(function()    {
    $(this).find('.waitimage').show();
    })

 

C'est tout. Je ne sais pas si le code est optimal mais en tout cas, ça fonctionne.