[Résolu] Essaie d'ajouter un loader lors de la soumission de la commande (commander -> traitement)

Futamiya · July 16, 2021

Environnement de travail :

localhost : xampp dernière version, sur Ubuntu

apache web server

mySQL database

Bonjour,

J'essaie de créer un loader lors de la soumission de la commande. Car le traitement est long, et j'aimerais que les clients sachent que cela prend bien en compte lors commande mais qu'il faut patienter.

Pour cela, j'avais pensé ajouter un loader.

Sauf qu'il ne marche pas.

Je suis débutante en développement, donc pouvez accepter mes bétises, ha ha ha

Voilà ce que je pensais faire :

dans payment.tpl (mon_theme/templates/checkout/_partials/steps/payment.tpl)

Dans la div à la ligne 128 : <div id="payment-confirmation">

Je pensais ajouter ceci :

        <div class="ps-shown-by-js">
            <button type="submit" id="show"{if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">
                {l s='Place order' d='Shop.Theme.Checkout'}
            </button>            
			<div class="spinnerwrapper">
                <div class="container">
                    <div class="spinner">
                        <div class="bar1"></div>
                        <div class="bar2"></div>
                        <div class="bar3"></div>
                        <div class="bar4"></div>
                        <div class="bar5"></div>
                        <div class="bar6"></div>
                        <div class="bar7"></div>
                        <div class="bar8"></div>
                        <div class="bar9"></div>
                        <div class="bar10"></div>
                        <div class="bar11"></div>
                        <div class="bar12"></div>
                    </div>
                </div>

Puis, après le </if> à la ligne 163, je pensais ajouter ceci

            {/if}
            <script type="text/javascript">
                $('#show').on('click', function(){
                    var scrollTop = $(window).scrollTop();
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();
                    $('.spinnerwrapper').fadeIn("100");
                    $('.spinnerwrapper').css('top', scrollTop+winHeight/2+"px");
                    $('.spinnerwrapper').css('left', winWidth/2+"px");
                });
            </script>

et enfin, dans theme.css (classic/assets/css/theme.css)

/**
Ma version css
 */
.spinnerwrapper{
    position:absolute;
    display:none;
    margin-top:-32px;
    margin-left:-32px;
}
div.spinner {
    position: relative;
    display: inline-block;
}
div.spinner div {
    width: 3px;
    height: 10px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -moz-animation: fade 1s linear infinite;
    -o-animation: fade 1s linear infinite;
    animation: fade 1s linear infinite;
    -webkit-border-radius: 50px;
    -moz-border-radius:50px;
    -o-border-radius:50px;
    border-radius:50px;
    margin-top:-2px;
    margin-left:-2px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
div.spinner div.bar1 {
    -webkit-transform: rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;
    -moz-transform: rotate(0deg) translate(0, -142%); -moz-animation-delay: 0s;
    -ms-transform: rotate(0deg) translate(0, -142%); -ms-animation-delay: 0s;
    -o-transform: rotate(0deg) translate(0, -142%); -o-animation-delay: 0s;
    transform: rotate(0deg) translate(0, -142%); animation-delay: 0s;
}
div.spinner div.bar2 {
    -webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;
    -moz-transform:rotate(30deg) translate(0, -142%); -moz-animation-delay: -0.9167s;
    -ms-transform:rotate(30deg) translate(0, -142%); -ms-animation-delay: -0.9167s;
    -o-transform:rotate(30deg) translate(0, -142%); -o-animation-delay: -0.9167s;
    transform:rotate(30deg) translate(0, -142%); animation-delay: -0.9167s;
}
div.spinner div.bar3 {
    -webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;
    -moz-transform:rotate(60deg) translate(0, -142%); -moz-animation-delay: -0.833s;
    -ms-transform:rotate(60deg) translate(0, -142%); -ms-animation-delay: -0.833s;
    -o-transform:rotate(60deg) translate(0, -142%); -o-animation-delay: -0.833s;
    transform:rotate(60deg) translate(0, -142%); animation-delay: -0.833s;
}
div.spinner div.bar4 {
    -webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;
    -moz-transform:rotate(90deg) translate(0, -142%); -moz-animation-delay: -0.75s;
    -ms-transform:rotate(90deg) translate(0, -142%); -ms-animation-delay: -0.75s;
    -o-transform:rotate(90deg) translate(0, -142%); -o-animation-delay: -0.75s;
    transform:rotate(90deg) translate(0, -142%); animation-delay: -0.75s;
}
div.spinner div.bar5 {
    -webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;
    -moz-transform:rotate(120deg) translate(0, -142%); -moz-animation-delay: -0.667s;
    -ms-transform:rotate(120deg) translate(0, -142%); -ms-animation-delay: -0.667s;
    -o-transform:rotate(120deg) translate(0, -142%); -o-animation-delay: -0.667s;
    transform:rotate(120deg) translate(0, -142%); animation-delay: -0.667s;

}
div.spinner div.bar6 {
    -webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;
    -moz-transform:rotate(150deg) translate(0, -142%); -moz-animation-delay: -0.5833s;
    -ms-transform:rotate(150deg) translate(0, -142%); -ms-animation-delay: -0.5833s;
    -o-transform:rotate(150deg) translate(0, -142%); -o-animation-delay: -0.5833s;
    transform:rotate(150deg) translate(0, -142%); animation-delay: -0.5833s;
}
div.spinner div.bar7 {
    -webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;
    -moz-transform:rotate(180deg) translate(0, -142%); -moz-animation-delay: -0.5s;
    -ms-transform:rotate(180deg) translate(0, -142%); -ms-animation-delay: -0.5s;
    -o-transform:rotate(180deg) translate(0, -142%); -o-animation-delay: -0.5s;
    transform:rotate(180deg) translate(0, -142%); animation-delay: -0.5s;
}
div.spinner div.bar8 {
    -webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;
    -moz-transform:rotate(210deg) translate(0, -142%); -moz-animation-delay: -0.41667s;
    -ms-transform:rotate(210deg) translate(0, -142%); -ms-animation-delay: -0.41667s;
    -o-transform:rotate(210deg) translate(0, -142%); -o-animation-delay: -0.41667s;
    transform:rotate(210deg) translate(0, -142%); animation-delay: -0.41667s;
}
div.spinner div.bar9 {
    -webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;
    -moz-transform:rotate(240deg) translate(0, -142%); -moz-animation-delay: -0.333s;
    -ms-transform:rotate(240deg) translate(0, -142%); -ms-animation-delay: -0.333s;
    -o-transform:rotate(240deg) translate(0, -142%); -o-animation-delay: -0.333s;
    transform:rotate(240deg) translate(0, -142%); animation-delay: -0.333s;
}
div.spinner div.bar10 {
    -webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;
    -moz-transform:rotate(270deg) translate(0, -142%); -moz-animation-delay: -0.25s;
    -ms-transform:rotate(270deg) translate(0, -142%); -ms-animation-delay: -0.25s;
    -o-transform:rotate(270deg) translate(0, -142%); -o-animation-delay: -0.25s;
    transform:rotate(270deg) translate(0, -142%); animation-delay: -0.25s;
}
div.spinner div.bar11 {
    -webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;
    -moz-transform:rotate(300deg) translate(0, -142%); -moz-animation-delay: -0.1667s;
    -ms-transform:rotate(300deg) translate(0, -142%); -ms-animation-delay: -0.1667s;
    -o-transform:rotate(300deg) translate(0, -142%); -o-animation-delay: -0.1667s;
    transform:rotate(300deg) translate(0, -142%); animation-delay: -0.1667s;
}
div.spinner div.bar12 {
    -webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;
    -moz-transform:rotate(330deg) translate(0, -142%); -moz-animation-delay: -0.0833s;
    -ms-transform:rotate(330deg) translate(0, -142%); -ms-animation-delay: -0.0833s;
    -o-transform:rotate(330deg) translate(0, -142%); -o-animation-delay: -0.0833s;
    transform:rotate(330deg) translate(0, -142%); animation-delay: -0.0833s;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@-moz-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@-ms-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@-o-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
div.container {
    display: inline-block;
    padding: 10px;
    background: rgba(0,0,0,0.8);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
div.container div.spinner {
    width: 64px;
    height: 64px;
}
div.container div.spinner div {background: #fff;}

Mais lorsque j'appuie sur le bouton commander, il n'y a aucun bug, mais je n'ai pas mon loader.

Auriez-vous une idée?

Merci d'avance pour votre aide

Cordialement

Futamiya

Edited July 28, 2021 by Futamiya (see edit history)

Futamiya · July 26, 2021

Bonjour,

J'ai tenté autre chose. Cela marche, sauf qu'à la fin du temps de chargement de la page, j'obtiens une erreur 500 :

Voici le nouveau code dans themes/mon_theme/templates/checkout/steps/payment.tpl : ligne 150

<button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block" onclick="bascule('correctGIF')">

        <script language="javascript" type="text/javascript">
            function bascule(elem)
            {
                etat=document.getElementById(elem).style.display;
                if(etat=="none"){
                    document.getElementById(elem).style.display="block";
                }
                else{
                    document.getElementById(elem).style.display="none";
                }
            }
        </script>

Auriez-vous une idée ?

Merci d'avance pour vos réponses

Cordialement

Futamiya

Alexandre Carette · July 26, 2021

Salut,

essaye de mettre ton js avant la balisse </body> entouré de {literal} ton code {/literal}

cdt

Futamiya · July 26, 2021

Bonjour,

Merci pour votre réponse. J'ai encore l'erreur 500

voici comment je l'ai implanté :

{extends file='checkout/_partials/steps/checkout-step.tpl'}

{block name='step_content'}

    {hook h='displayPaymentTop'}

    {literal}
        <script language="javascript" type="text/javascript">
            function bascule(elem)
            {
                etat=document.getElementById(elem).style.display;
                if(etat=="none"){
                    document.getElementById(elem).style.display="block";
                }
                else{
                    document.getElementById(elem).style.display="none";
                }
            }
        </script>
    {/literal}

    {* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
    <div style="display:none" class="js-cart-payment-step-refresh"></div>

J'ai aussi essayé de le mettre en dehors du block name

Edited July 26, 2021 by Futamiya (see edit history)

Alexandre Carette · July 26, 2021

et en mode debug que dit l erreur 500 ? si pas accès au erreurs, que dit le errors.log d'apache2 ?

cdt

Futamiya · July 26, 2021

J'obtiens ceci :

Quote

Parse error: syntax error, unexpected '$order' (T_VARIABLE), expecting ')' in /opt/lampp/htdocs/shop/prestashop_1.7.7.5/controllers/front/OrderConfirmationController.php on line 65

Donc je suis allée voir. Et j'ai ce code :

        $this->reference = $order->reference;
        if (!Validate::isLoadedObject(f$order) || $order->id_customer != $this->context->customer->id || $this->secure_key != $order->secure_key) {
            Tools::redirect($redirectLink);
        }

De ce fait, j'ai une erreur à f$order et au ||

Futamiya · July 26, 2021

Hello,

Yeeees cela marche

J'ai corrigé l'erreur, en remplaçant f$order par $order, et cela marche

Edited July 26, 2021 by Futamiya (see edit history)

Alexandre Carette · July 26, 2021

telecharge un prestashop_1.7.7.5 vierge et compare les fichiers,

cdt

Alexandre Carette · July 26, 2021

Just now, Futamiya said:

Hello,

Yeeees cela marche

ok cool

Futamiya · July 26, 2021

en fait, ... je suis retournée à la version 1.7.7.4 ... j'ai eu un problème.

Sign In

[Résolu] Essaie d'ajouter un loader lors de la soumission de la commande (commander -> traitement)

Recommended Posts

Futamiya

Link to comment

Share on other sites

Futamiya

Link to comment

Share on other sites

Alexandre Carette

Link to comment

Share on other sites

Futamiya

Link to comment

Share on other sites

Alexandre Carette

Link to comment

Share on other sites

Futamiya

Link to comment

Share on other sites

Futamiya

Link to comment

Share on other sites

Alexandre Carette

Link to comment

Share on other sites

Alexandre Carette

Link to comment

Share on other sites

Futamiya

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com