Jump to content

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


Recommended Posts

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 by Futamiya (see edit history)

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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

Share this post


Link to post
Share on other sites

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 by Futamiya (see edit history)

Share this post


Link to post
Share on other sites

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

erreur.png

Share this post


Link to post
Share on other sites

  • Futamiya changed the title to [Résolu] Essaie d'ajouter un loader lors de la soumission de la commande (commander -> traitement)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More