Edit History

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