Soucis code Boutique en ligne

3 participants

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Soucis code Boutique en ligne

Message par Cali93110 Ven 24 Avr 2015 - 19:07

Rappel du premier message :

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je rencontre un petit soucis avec le code présent dans ce topic : https://forum.forumactif.com/t374373-boutique-en-ligne

J'aurai besoin de dupliquer les onglets qui apparaissent à gauche afin d'organiser les objets de la boutique. J'ai donc bien trouver où dupliquer les onglets, en revanche pour les panneaux à afficher à chaque clique, je m'y perds complètement. Beaucoup de div avec des class, et je crois même que certains sont mal fermées (mon éditeur de code fait la gue*le... x) )

Par déduction, je pense que ce qui est à dupliquer sont les div avec des id "abas" mais trouver la fin de cette div s'avère compliqué, et les essais que j'ai fait juste à présent étaient peu fructueux (l'item du 2ème panneau dans le premier par exemple...)

Voici mon code actuel :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="pt" xml:lang="pt">
<head>
<title>Boutique</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="title" content="Boutique" />
</head>

<link type="text/css" rel="stylesheet" charset="UTF-8" href="http://translate.googleapis.com/translate_static/css/translateelement.css">
<script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.Tabs li').click(function(){
                jQuery('.Tabs li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).find('a');
 return false;
        });
jQuery('a.all_itens').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas1').show();
                });
jQuery('a.all_pay').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas2').show();
                });
});
</script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
$('.totaler').html(' Total  = €' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('.title').text()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
 
  $('.cart-item').unbind('click');
 
  $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Total  = €' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
text += "Total  = €" + total;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>

<body><div class="main">
  <div class="main-head">
  <div class="page-title"><h2>Boutique</h2></div>
  </div>
 <div class="main-content cont">
  <div class="LayoutLeft clearfix">
<div class="Tabs Layout_smallleft">
 <ul>
  <li class="active"><a href="#" title="Ollivander" class="all_itens">Ollivander</a></li>
  <li><a href="#" title="Panier d'achat" class="all_pay">Valider mes achats</a></li>
 </ul>
</div>
 <div id="usercp_content"> <div class="box_r">
 <div class="box_t">
<!-- Início aba 1 -->
<div id="abas1" class="abas"> <div class="box_r">
<div class="main-head">
<div class="page-title"><h2>Articles</h2></div>
</div>


<table cellspacing="0" class="table">
  <tbody class="statused">
<!-- Début item -->
  <tr id="item1" class="item">
    <td><img src="http://i.imgur.com/taaL40o.png" style="width:50px;height:50px;"></td>
    <td><h4 class="title">Gold STAR!</h4></td>
    <td>
      <ul class="list-type">
      <li class="views desc points" data-myprice="200">200 Gallions</li>
      <li class="views desc">En stock</li>
      <li class="views desc"><input type="button" class="addButton" data-item="item1" value="Acheter"></li>
      </ul>
    </td>
  </tr>
<!-- Fin item -->
  </tbody>
</table>
 </div>
 </div>
<!-- Fim aba 1 -->

<!-- Início aba 2 -->
<div id="abas2" class="abas" style="display: none">
  <div class="box_r">
    <div class="main-head">
      <div class="page-title"><h2>Panier d'achat</h2></div>
  </div>
  <div class="cartWrapper">
    <div class="cart" id="cartj">
      <div class="cart_body">
  <div class="cart_items">
    <ul class="theList">
    </ul>
  </div>
</div>
      <span class="totaler"></span>
</div>
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="Admin">
<input value="Demande d'achat" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput">
<textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea>
<span class="buttons">
<input id="submitCart" type="submit" value="Actualiser la commande" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false;return false;"> Réactualiser avant d'envoyer.
<input type="submit" value="Envoyer la commande" name="post" id="sendingBut" disabled="disabled"></span></form>
    </div><div id="checkout">
Tenez vous à  confirmer votre achat ? Si oui, cliquez sur le bouton de demande d'envoi. </span>
</div>
    </div>
</div>
<!-- Fim aba 2 -->
</div>
 </div>
 </div>
</div>
 </div>
</div>
</body>
</html>

Merci d'avance ! Very Happy


Dernière édition par Cali93110 le Mar 5 Mai 2015 - 9:01, édité 1 fois
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis code Boutique en ligne

Message par no_way Sam 2 Mai 2015 - 17:33

Oui mais pas en dessous de 10 secondes:
Panneau Administration a écrit:Minimum : 10 - Maximum : 9999

Comme tu utilises la toolbar FA, je te propose une solution plus complète et le script est encore amélioré, c'est à l'usage que je repère certains soucis désolé.

Ajout
-Les membres non connectés ne peuvent plus voir les articles.
-Seuls les articles moins cher que les points du membre peuvent être achetés, ils sont quand même affichés et le nombre de points manquants est affiché.
-Si le coût total des articles dépasse les points du membre, l'achat n'est pas fait, le panier est à nouveau affiché avec la possibilité de supprimer un article.

Edit:
Ajout
-Contrôle que les points sont bien retirés et donc que l'achat est terminé.
-Actualisation des points et des articles.
La partie CSS:
Code:
/****************Ma boutique*****************/
#conteneur_ma-boutique{
width:794px;
background:#FFF;
line-height:16px;
}
#conteneur_ma-boutique h4{
padding:0px;
margin:0px
}
#conteneur_ma-boutique .entete,#conteneur_ma-boutique .ma-boutique{
background:#FFF;
border: 1px solid #6E6A65;
}
#conteneur_ma-boutique .entete{
background: url("http://i47.tinypic.com/33nusqs.jpg") #8A8783;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #FFF;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
}
#conteneur_ma-boutique .entete>span{
display:block;
margin:4px 10px;
}
#conteneur_ma-boutique .ma-boutique{
width:100%;
box-sizing:border-box;
}
#conteneur_ma-boutique .article{
float:left;
background:#FFF;
border: 1px solid #CECECE;
padding:5px;
margin:5px;
text-align: center;
box-sizing: border-box;
width: 188px;
}
#conteneur_ma-boutique .article.points_insuffisants{
background:#ECECEC;
}
#conteneur_ma-boutique .article .titre{
overflow:hidden;
text-overflow:ellipsis;
margin-top:5px;
margin-bottom:20px;
}
#conteneur_ma-boutique .image{
max-width:70px;
max-height:70px;
}
#conteneur_ma-boutique .ajout-panier{
background-color: #F3F3F3;
border: 1px solid #CECECE;
border-radius:3px;
color: #000;
font-family: "Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial;
font-size: 15px;
margin: 4px;
padding:4px;
}
#conteneur_ma-boutique .ajout-panier.points_suffisants:hover{
cursor:pointer;
font-weight:700
}
#conteneur_ma-boutique .ajout-panier.points_insuffisants{
background:#DBD7D7
}
#conteneur_ma-boutique .prix{
background: url("http://s6.tinypic.com/286sfuu_th.jpg") no-repeat scroll 0% 0% transparent;
color: #242424;
float: left;
font-size: 16px;
font-weight: 700;
padding-bottom: 5px;
padding-left: 18px;
text-align: center;
}
#conteneur_ma-boutique .disponibilite{
color: #080;
font-size: 13px;
font-style: italic;
text-align: center;
float: right;
}
#conteneur_ma-boutique .disponibilite:first-letter{
text-transform:capitalize
}
#bloc-panier-caisse{
border-top:1px #6E6A65 solid;
background:#fefefe;
}
#infos_boutique{
float:left;
padding:5px;
}
#infos_boutique h4{
margin-top:10px;
margin-bottom:5px;
color:#d00
}
#panier-caisse{
float:right
}
#panier{
overflow:auto;
height:105px;
width:280px;
border:1px #6E6A65 solid;
border-top:none;
background:#eeeeee
}
#panier h4{
font-size:14px;
line-height:19px;
text-align:center;
cursor:pointer;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa
}
#panier h4.article_ajoute:hover{
background:#fff url(http://2img.net/i/fa/subsilver/topic_trashcan.gif) 0% 0% no-repeat;
}
#panier h4.succes_achat{
background:#dfd;
}
#panier h4.echec_achat{
background:#fdd;
}
/****************Fin ma boutique*****************/
La partie HTML:
Code:
<script type="text/javascript">
//<![CDATA[
        var boutique={
        "articles":{
         "Helmet0":{
            "prix":"2500",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet1":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet2":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet3":{
            "prix":"250000",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet4":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet5":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         }
        },
        "sujets_retrait_points":{
         "100":"9",
         "150":"10",
         "200":"11",
         "250":"12",
         "300":"13"
        },
        "panier":[],
      "nom_points":"Gallions",
      "points":"0",
      "cout_total":"0",
      "a":0,
      "msg_ajax":"",
        "delai_post":11,
        "estimation_tps_restant":0,
        "erreur":false,
        "fx_tmp":false,
        "afficher_articles":function(){
         $.get("/u"+_userdata["user_id"],(function(d){
         var a,c,p;
            p=$(d).find("dt:contains('"+this.nom_points+"')+dd").text();
            this.points=(p&&parseInt(p)>0)?p:"0";
            $("div.articles").html("");
            for(a in this.articles){
               c=(parseInt(this.articles[a].prix)<=parseInt(this.points));
               $("div.articles").append($("<div/>",{"class":"article "+(c?"points_suffisants":"points_insuffisants")}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":this.articles[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":this.articles[a].prix})).append("&nbsp;").append($("<span>",{"class":"disponibilite","text":this.articles[a].disponibilite}))).append($("<div>",{"class":"ajout-panier "+(c?"points_suffisants":"points_insuffisants"),"text":c?"Acheter":"Manque "+(this.articles[a].prix-this.points),"data-article":a})));
         }
         var objet_boutique=this;
         $(".ajout-panier.points_suffisants").on("click",function(){
         objet_boutique.panier.push($(this).data("article"));
         objet_boutique.maj();});
         $("#nom_points").text(this.nom_points);
         $("#points").text(this.points);
      }).bind(this));
        },
        "retraitPanier":function(a){
         this.panier.splice(this.panier.indexOf(a),1);
         this.maj();
         },
        "maj":function(){
         var a,b=this.panier,objet_boutique=this;
         this.cout_total=0;
         $("#panier").html("");
         for(a in b){
            this.cout_total+=parseInt(this.articles[b[a]].prix);
            $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(t){objet_boutique.retraitPanier($(this).data("article"))}));
         }
         $("#nom_points").text(this.nom_points);
         $("#points").text(this.points);
         $("#cout-total").html(this.cout_total)
        },
        "calcul_cout":function(){
         var a,b=this.panier;
         this.cout_total=0;
         for(a in b){
            this.cout_total+=parseInt(this.articles[b[a]].prix);
         }
         $("#cout-total").html(this.cout_total)
        },
        "fx":function(){
         try{
         if(this.a<this.panier.length){
            var succes_post=function(a){
         /*si besoin ...*/
         };
            var echec_post=function(a,x,s,e){this.erreur=(x.responseText)?e+" {"+x.responseText+"}":e;this.msg_ajax=$("<h4>",{"class":"echec_achat",text:'['+(s[0].toUpperCase()+s.slice(1))+']['+this.panier[a]+']:'+this.erreur})};
            var complete_post=function(p){
         var p=p;
         $.get("/u"+_userdata["user_id"],(function(d){
            var c=c,points=parseInt($(d).find("dt:contains('"+this.nom_points+"')+dd").text());
            if(points===this.points-p){
            this.points=points;
            this.afficher_articles();
            this.msg_ajax=$("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[this.a],"class":"succes_achat"})}else{this.erreur=true;this.msg_ajax=$("<h4>",{"class":"echec_achat",text:"Echec de la mise à jour de ton compte"})}
            this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);
            $("#panier").append(this.msg_ajax)
            if(!(this.a<this.panier.length)){$("#caisse").css("display","inline-block");this.panier=[];clearInterval(this.fx_tmp);
         this.erreur?($("#estimation_temps").remove(),$("#panier").prepend("<h4>Une erreur a été levée.</h4>")):$("#panier").html("<h4>Merci pour cet achat !</h4>")}
         }).bind(this));
         };
            var post=$.ajax({type:"POST",url:"/post",data:{"post":"Envoyer","t":this.sujets_retrait_points[this.articles[this.panier[this.a]].prix],"mode":"reply","message":"Achat de "+this.panier[this.a]+" pour "+this.articles[this.panier[this.a]].prix+" points."}});
            post.done(succes_post.bind(this,this.a));
            post.error(echec_post.bind(this,this.a));
            post.complete(complete_post.bind(this,this.articles[this.panier[this.a]].prix));
            this.a+=1;
            }
            }catch(e){
         $("#panier").html($("<h4>",{"class":"echec_achat","text":"[Exception] "+e}));
         $("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);
         }
         },
        "achat":function(){
      var a,b=this.panier;
      this.cout_total=0;
         if(b.length){
         for(a in b){this.cout_total+=parseInt(this.articles[b[a]].prix)}
         $.get("/u"+_userdata["user_id"],(function(c,d){
         var a,p;
            p=$(d).find("dt:contains('"+this.nom_points+"')+dd");
            this.points=(p)?p.text():"0";
         if(c<this.points){
            this.a=0;this.erreur=false;
            $("#caisse").css("display","none");
            this.estimation_tps_restant=b.length*this.delai_post;
            $("#panier").html("<h4 id='estimation_temps'>Merci de patienter !<br />Temps estimé: <span id='estimation_tps_restant'>"+this.estimation_tps_restant+"</span> secondes</h4>");
            this.fx();
            this.fx_tmp=setInterval(this.fx.bind(this),this.delai_post*1000);
            }else{this.maj();$("#panier").prepend($("<h4>",{"text":"Tu manques de "+this.nom_points+" pour cet achat !","class":"echec_achat"}))}
         }).bind(this,this.cout_total));
         }else{
         $("#panier").html("<h4>Oups, panier vide !</h4>");
         }
        }
        };
        $(function(){
      if((typeof(_userdata)!=="undefined")){
        boutique.afficher_articles();
        $("#achat").on("click",function(){boutique.achat()});
      }
        });
//]]>
</script>
<div id="conteneur_ma-boutique">       
<div class="entete"><span>Faites vos achats</span></div>
<div class="ma-boutique"><div class="vitrine">
<div class="articles"></div>
<br style="clear:both" />
</div>
   <div id="bloc-panier-caisse">
      <div id="panier-caisse">
         <div id="panier">
         </div>
      <table id="caisse">
      <tr>
         <td>Coût total:</td><td><span id="cout-total">0</span></td>
      </tr>
      <tr>
         <td></td><td><form action="/"><input id="achat" type="button" value="J'achète !" /></form></td>
         </tr>
      </table>
      </div><div id="infos_boutique"><p>Tu disposes de <strong id="points"></strong> <em id="nom_points"></em><h4>Attention</h4>Tu dois attendre le message te remerciant de l'achat.<br/>Merci ;)</p></div><br style="clear:both" />
</div>
</div>
</div>
J'ai ajouté
"nom_points":"Gallions"
dans ce code, comme toujours c'est assez explicite Wink

As-tu besoin d'autre chose ?


Dernière édition par no_way le Lun 4 Mai 2015 - 20:27, édité 4 fois (Raison : Amélioration du script + orthographe)
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis code Boutique en ligne

Message par Cali93110 Mar 5 Mai 2015 - 8:40

Coucou, merci pour ce code tout beau tout neuf ! Il est franchement au top du top, je pouvais pas espérer mieux, donc non, je n'ai plus besoin de rien, tu as déjà fait plus que ce qui était demandé, et je t'en remercie infiniment. ^_^

Le seul truc qui me chiffonne c'est ce temps d'attente, mais hélas on n'y pourra rien. Ceci tout le reste fait pencher la balance du côté positif, alors c'est trop cool ! Very Happy

Tu devrais songer à faire un tutoriel, enfin, si tu souhaite partager ton code. Ca pourrait intéresser beaucoup de personnes ! Very Happy

EDITE : Ah, juste un petit truc, quand l'achat est validé, le "Coût total" n'est pas réinitialiser. Y'a moyen de corriger cela ? :3
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis code Boutique en ligne

Message par no_way Mar 5 Mai 2015 - 8:58

Oups, erreur de ma part en effet voici le code corrigé:
Code:
<script type="text/javascript">
//<![CDATA[
        var boutique={
        "articles":{
         "Helmet0":{
            "prix":"2500",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet1":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet2":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet3":{
            "prix":"250000",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet4":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         },
         "Helmet5":{
            "prix":"250",
            "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
            "disponibilite":"en stock"
         }
        },
        "sujets_retrait_points":{
         "100":"9",
         "150":"10",
         "200":"11",
         "250":"12",
         "300":"13"
        },
        "panier":[],
      "nom_points":"Gallions",
      "points":"0",
      "cout_total":"0",
      "a":0,
      "msg_ajax":"",
        "delai_post":11,
        "estimation_tps_restant":0,
        "erreur":false,
        "fx_tmp":false,
        "afficher_articles":function(){
         $.get("/u"+_userdata["user_id"],(function(d){
         var a,c,p;
            p=$(d).find("dt:contains('"+this.nom_points+"')+dd").text();
            this.points=(p&&parseInt(p)>0)?p:"0";
            $("div.articles").html("");
            for(a in this.articles){
               c=(parseInt(this.articles[a].prix)<=parseInt(this.points));
               $("div.articles").append($("<div/>",{"class":"article "+(c?"points_suffisants":"points_insuffisants")}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":this.articles[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":this.articles[a].prix})).append("&nbsp;").append($("<span>",{"class":"disponibilite","text":this.articles[a].disponibilite}))).append($("<div>",{"class":"ajout-panier "+(c?"points_suffisants":"points_insuffisants"),"text":c?"Acheter":"Manque "+(this.articles[a].prix-this.points),"data-article":a})));
         }
         var objet_boutique=this;
         $(".ajout-panier.points_suffisants").on("click",function(){
         objet_boutique.panier.push($(this).data("article"));
         objet_boutique.maj();});
         $("#nom_points").text(this.nom_points);
         $("#points").text(this.points);
      }).bind(this));
        },
        "retraitPanier":function(a){
         this.panier.splice(this.panier.indexOf(a),1);
         this.maj();
         },
        "maj":function(){
         var a,b=this.panier,objet_boutique=this;
         this.cout_total=0;
         $("#panier").html("");
         for(a in b){
            this.cout_total+=parseInt(this.articles[b[a]].prix);
            $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(t){objet_boutique.retraitPanier($(this).data("article"))}));
         }
         $("#nom_points").text(this.nom_points);
         $("#points").text(this.points);
         $("#cout-total").html(this.cout_total)
        },
        "calcul_cout":function(){
         var a,b=this.panier;
         this.cout_total=0;
         for(a in b){
            this.cout_total+=parseInt(this.articles[b[a]].prix);
         }
         $("#cout-total").html(this.cout_total)
        },
        "fx":function(){
         try{
         if(this.a<this.panier.length){
            var succes_post=function(a){
         /*si besoin ...*/
         };
            var echec_post=function(a,x,s,e){this.erreur=(x.responseText)?e+" {"+x.responseText+"}":e;this.msg_ajax=$("<h4>",{"class":"echec_achat",text:'['+(s[0].toUpperCase()+s.slice(1))+']['+this.panier[a]+']:'+this.erreur})};
            var complete_post=function(p){
         var p=p;
         $.get("/u"+_userdata["user_id"],(function(d){
            var c=c,points=parseInt($(d).find("dt:contains('"+this.nom_points+"')+dd").text());
            if(points===this.points-p){
            this.points=points;
            this.afficher_articles();
            this.msg_ajax=$("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[this.a],"class":"succes_achat"})}else{this.erreur=true;this.msg_ajax=$("<h4>",{"class":"echec_achat",text:"Echec de la mise à jour de ton compte"})}
            this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);
            $("#panier").append(this.msg_ajax)
            if(!(this.a<this.panier.length)){$("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);
         this.erreur?($("#estimation_temps").remove(),$("#panier").prepend("<h4>Une erreur a été levée.</h4>")):$("#panier").html("<h4>Merci pour cet achat !</h4>")}
         }).bind(this));
         };
            var post=$.ajax({type:"POST",url:"/post",data:{"post":"Envoyer","t":this.sujets_retrait_points[this.articles[this.panier[this.a]].prix],"mode":"reply","message":"Achat de "+this.panier[this.a]+" pour "+this.articles[this.panier[this.a]].prix+" points."}});
            post.done(succes_post.bind(this,this.a));
            post.error(echec_post.bind(this,this.a));
            post.complete(complete_post.bind(this,this.articles[this.panier[this.a]].prix));
            this.a+=1;
            }
            }catch(e){
         $("#panier").html($("<h4>",{"class":"echec_achat","text":"[Exception] "+e}));
         $("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);
         }
         },
        "achat":function(){
      var a,b=this.panier;
      this.cout_total=0;
         if(b.length){
         for(a in b){this.cout_total+=parseInt(this.articles[b[a]].prix)}
         $.get("/u"+_userdata["user_id"],(function(c,d){
         var a,p;
            p=$(d).find("dt:contains('"+this.nom_points+"')+dd");
            this.points=(p)?p.text():"0";
         if(c<this.points){
            this.a=0;this.erreur=false;
            $("#caisse").css("display","none");
            this.estimation_tps_restant=b.length*this.delai_post;
            $("#panier").html("<h4 id='estimation_temps'>Merci de patienter !<br />Temps estimé: <span id='estimation_tps_restant'>"+this.estimation_tps_restant+"</span> secondes</h4>");
            this.fx();
            this.fx_tmp=setInterval(this.fx.bind(this),this.delai_post*1000);
            }else{this.maj();$("#panier").prepend($("<h4>",{"text":"Tu manques de "+this.nom_points+" pour cet achat !","class":"echec_achat"}))}
         }).bind(this,this.cout_total));
         }else{
         $("#panier").html("<h4>Oups, panier vide !</h4>");
         }
        }
        };
        $(function(){
      if((typeof(_userdata)!=="undefined")){
        boutique.afficher_articles();
        $("#achat").on("click",function(){boutique.achat()});
      }
        });
//]]>
</script>
<div id="conteneur_ma-boutique">       
<div class="entete"><span>Faites vos achats</span></div>
<div class="ma-boutique"><div class="vitrine">
<div class="articles"></div>
<br style="clear:both" />
</div>
   <div id="bloc-panier-caisse">
      <div id="panier-caisse">
         <div id="panier">
         </div>
      <table id="caisse">
      <tr>
         <td>Coût total:</td><td><span id="cout-total">0</span></td>
      </tr>
      <tr>
         <td></td><td><form action="/"><input id="achat" type="button" value="J'achète !" /></form></td>
         </tr>
      </table>
      </div><div id="infos_boutique"><p>Tu disposes de <strong id="points"></strong> <em id="nom_points"></em><h4>Attention</h4>Tu dois attendre le message te remerciant de l'achat.<br/>Merci ;)</p></div><br style="clear:both" />
</div>
</div>
</div>

Ravi que ça te convienne quand même, en effet on ne peut rien faire contre cette sécurité (et tant mieux d'ailleurs si on pouvait la retirer ... imagine Wink )

@ bientôt et bons achats ^^
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis code Boutique en ligne

Message par Cali93110 Mar 5 Mai 2015 - 9:01

Merci beaucoup, c'est super désormais ! Very Happy Bonne continuation. Wink
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum