Soucis code Boutique en ligne

par Cali93110 Ven 24 Avr 2015 - 19:07

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">  <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">  <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>  </tbody> </table> </div> </div>   <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>  </div> </div> </div> </div> </div> </div> </body> </html>

Merci d'avance ! Very Happy

par demeter1 Ven 24 Avr 2015 - 19:24

Bonjour Cali,
Il faut travailler avec le deuxième code. Le premier comportait effectivement pas mal d'erreurs.

https://forum.forumactif.com/t377872-recherche-code-cliquer-faire-apparaitre-un-texte#3187042

Un visuel du rendu
http://floratropica.forumactif.org/h1-boutique-modification

par Cali93110 Ven 24 Avr 2015 - 19:29

Bonjour demeter1,

Effectivement ça semble mieux !

Par contre trois soucis du coup :

- Plus moyen d'organiser par onglets ?
- Lorsque je mets ce code dans ma page html et que je valide, j'ai une page blanche qui apparait, et " data:, " qui apparait dans l'url. Les motifs sont bien prises en compte, mais du coup, obligée de faire des retours arrières pour de nouveau cliquer sur la roue afin de poursuivre mes modifications.
- Je viens de tester un achat, et aucun point n'est déduit de mon cota. Y'a t-il aucun moyen d'automatiser ça ?

Merci beaucoup !

EDITE : Le coup du " data:, " ne se fait plus... Bizarre.

par demeter1 Ven 24 Avr 2015 - 20:19

Re,
On peut avoir le lien de la page html ??

Qu'appelez vous "onglets" ? le code à la base ne contient pas de système à onglets.

Pour le décompte des points, il faut le faire en manuel. Est-ce possible de l'automatiser ? Très certainement mais il vous faudra attendre le passage d'un membre dont les connaissances permettraient d'y parvenir.

par Cali93110 Ven 24 Avr 2015 - 20:29

Voici la page HTML :

Dans le premier code, celui qui n'était pas le mieux, il y avait deux onglets à gauche. "Tout les produits", et "Valider ma commande". Lorsqu'on cliquait sur l'un ou l'autre, le contenu était actualisé dans le container.

D'accord, dans le pire des cas je me contenterais du manuel. C'est déjà énorme ce code. Very Happy

Merci.

par demeter1 Ven 24 Avr 2015 - 20:31

Votre forum est en maintenance donc, impossible d'avoir accès à la page html.

Ps : je me sauve,; j'essaierai de repasser un peu plus tard.

par Cali93110 Ven 24 Avr 2015 - 20:57

Autant pour moi, c'est corrigé.

A plus tard. Smile

par demeter1 Ven 24 Avr 2015 - 22:26

Re , le "Tous les articles et Conclure la vente" ont été inclus dans le tableau de listage que vous avez sur la droite. pour faire bref, j'ai juste modifié le code initial pour éviter un va et vient inutile.

par Cali93110 Sam 25 Avr 2015 - 9:59

Bonjour,

Oui, c'est bien ce qu'il me semblait. Du coup je m'arrangerai autrement pour l'organisation des objets. Je vais y réfléchir.

Autre question : pourquoi doit-on actualiser le panier avant de valider ? Y'a t-il moyen de griser le bouton d'envoi de la commande tant que le membre n'a pas actualisé son panier ?

par demeter1 Sam 25 Avr 2015 - 12:06

L'actualisation permet un 'rafraichissement' de la table de listage. Il y a déjà une condition sur le bouton envoyer. Si vous reprenez le code initial, vous vous apercevrez que l'envoi ne se fait pas tant que l'actualisation n'a pas été faite.

Pour l'organisation des articles, hormis du linéaire, je ne vois pas trop ce que vous souhaitez faire.

A défaut, vous pouvez toujours déplacer le module en modifiant le css intitulé .cartWrapper

par Cali93110 Dim 26 Avr 2015 - 9:35

Je vais regarder ça, merci. Merci beaucoup pour votre aide qui m'a été précieuse !

Avis à ceux qui passeront par ce topic prochainement : Y'aurait-il désormais une bonne âme susceptible de m'apporter ses connaissances pour dynamiser le retrait de point lors du passage de la commande ? Merci !

par Cali93110 Mar 28 Avr 2015 - 17:32

Up. Merci. Smile

Cali93110 a écrit:
Avis à ceux qui passeront par ce topic prochainement : Y'aurait-il désormais une bonne âme susceptible de m'apporter ses connaissances pour dynamiser le retrait de point lors du passage de la commande ? Merci !

par no_way Mer 29 Avr 2015 - 18:31

Bonsoir, je pense pouvoir vous aider pour cela, en revanche j'ai modifié en profondeur le script:
-L'affichage des articles est géré par le script.
-Il n'est plus nécessaire d'actualiser, c'est automatique.
-En français !

Si vous avez beaucoup d'articles déjà installés sur votre script actuel, c'est peut-être agaçant de tout refaire ... Quoi qu'il en soit mon script ressemble à ceci:

Code:: var boutique={ "articles":{ "Helmet":{ "prix":250, "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":250, "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":{ "250":14 }, "panier":[], "afficher_articles":function(){ var a,p=this.articles; for(a in p){ $("div.articles").append($("<div/>",{"class":"article"}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":p[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":p[a].prix})).append(" ").append($("<span>",{"class":"disponibilite","text":p[a].disponibilite}))).append($("<div>",{"class":"ajout-panier","text":"Acheter","data-article":a}).on("click",function(){boutique.ajoutPanier($(this).data("article"))}))); } }, "ajoutPanier":function(a){ this.panier.push(a); this.maj(); }, "retraitPanier":function(a){ this.panier.splice(this.panier.indexOf(a),1); this.maj(); }, "maj":function(){ var a,b=this.panier,c=0; $("#panier").html(""); for(a in b){ c+=parseInt(this.articles[b[a]].prix); $("#panier").append($("<h4>",{"data-article":b[a],"text":b[a]}).on("click",function(){boutique.retraitPanier($(this).data("article"))})); } $("#cout-total").html(c) }, "retrait_points":function(){ var a,b=this.panier,e,m; if(this.panier.length){ for(a in b){ $.post("/post",{"post":"Envoyer","t":this.sujets_retrait_points[this.articles[b[a]].prix],"mode":"reply","message":"Achat de "+b[a]+" pour "+this.articles[b[a]].prix+" points."}).fail(function(e){e=e.responseText}); } if(e){alert(e)}else{this.panier=[];$("#panier").html("");alert("Merci pour cet achat !")} } } }; $(function(){ boutique.afficher_articles(); $("#achat").on("click",function(){boutique.retrait_points()}); });

Vous pouvez avoir un aperçu sur cette page de test: essai-boutique

Je dois encore l'améliorer ceci dit, il n'est pas encore tout à fait au point (dû à la sécurité du nombre de post autorisé pour un temps donné: sécurité contre le flood j'ai l'impression).

par demeter1 Mer 29 Avr 2015 - 19:19

Bonjour Noway, il faudra modifier l'icône dollars en euros pour une traduction parfaite en français.(humour du second degrés)

par no_way Mer 29 Avr 2015 - 20:14

demeter1 a écrit:Bonjour Noway, il faudra modifier l'icône dollars en euros pour une traduction parfaite en français.(humour du second degrés)

Salut Demeter !
Horreur et damnation, tu dis vrai !

J'en profite pour dire que j'améliorerai le script demain.
@ bientôt Wink

Edit:
Le script a été modifié:
-Poste toute les 10 secondes (protection contre le flood).
-Quelques améliorations ça et là...

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="fr" xml:lang="fr" > <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" /> <link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/discussion.ico" /> <meta name="title" content="Boutique" /><link rel="stylesheet" href="/73-ltr.css" type="text/css" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="ACCIO DESTINY" /> <link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/search/improvedsearch.xml" title="Rechercher des forums" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> .header,.ma-boutique{ width: 792px; background:#FFF; line-height:16px; border: 1px solid #6E6A65; } .header{ background-color: #8A8783; background-image: url("http://i47.tinypic.com/33nusqs.jpg"); background-repeat: repeat no-repeat; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #FFF; font-family: arial,helvetica,sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal; } .header>span{ display:block; margin:4px 10px; } .article{ float:left; background: none repeat scroll 0% 0% #FFF; border: 1px solid #CECECE; height: auto; min-height: 195px; overflow: hidden; padding: 5px; margin:5px; text-align: center; box-sizing: border-box; width: 188px; } .ajout-panier{ background-color: #F3F3F3; border: 1px solid #CECECE; 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-bottom: 0px; margin: 4px; padding:4px; cursor:pointer; } .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; } .disponibilite{ color: #008000; font-size: 13px; font-style: italic; text-align: center; float: right; } .disponibilite:first-letter{ text-transform:capitalize } #bloc-panier-caisse{ border-top:1px #6E6A65 solid; background:#fefefe; position:relative; } #panier-caisse{ float:right } #panier{ overflow:auto; height:100px; width:280px; border:1px #6E6A65 solid; border-top:none; background:#eeeeee } #panier h4{ font-size:14px; line-height:19px; padding:0px; margin:0px; 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; } </style> <script type="text/javascript"> //<![CDATA[ var boutique={ "articles":{ "Helmet0":{ "prix":250, "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":250, "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":{ "250":14 }, "panier":[], "afficher_articles":function(){ var a,p=this.articles; for(a in p){ $("div.articles").append($("<div/>",{"class":"article"}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":p[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":p[a].prix})).append(" ").append($("<span>",{"class":"disponibilite","text":p[a].disponibilite}))).append($("<div>",{"class":"ajout-panier","text":"Acheter","data-article":a}).on("click",function(){boutique.ajoutPanier($(this).data("article"))}))); } }, "ajoutPanier":function(a){ this.panier.push(a); this.maj(); }, "retraitPanier":function(a){ this.panier.splice(this.panier.indexOf(a),1); this.maj(); }, "maj":function(){ var a,b=this.panier,c=0; $("#panier").html(""); for(a in b){ c+=parseInt(this.articles[b[a]].prix); $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(){boutique.retraitPanier($(this).data("article"))})); } $("#cout-total").html(c) }, "calcul_cout":function(){ var a,b=this.panier,c=0; for(a in b){ c+=parseInt(this.articles[b[a]].prix); } $("#cout-total").html(c) }, "a":0, "delai_post":10, "estimation_tps_restant":0, "erreur":false, "fx_tmp":false, "fx":function(){ if(!(this.a<this.panier.length)){ this.panier=[]; this.calcul_cout(); clearInterval(this.fx_tmp); if(!this.erreur){$("#panier").html("<h4>Merci pour cet achat !</h4>");} return false; } var succes_post=function(a){this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);$("#panier").append($("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[a],"class":"succes_achat"}))}; var echec_post=function(a,x,s,e){this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);this.erreur=(x.responseText)?JSON.parse(x.responseText):x.statusText;$("#panier").append($("<h4>",{"class":"echec_achat",text:'[Erreur]['+this.panier[a]+']:'+this.erreur}))}; 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.success(succes_post.bind(this,this.a)); post.error(echec_post.bind(this,this.a)); this.a+=1; }, "retrait_points":function(){ if(this.panier.length){ this.a=0;this.erreur=false; this.estimation_tps_restant=this.panier.length*this.delai_post; $("#panier").html("<h4>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); } } }; $(function(){ boutique.afficher_articles(); $("#achat").on("click",function(){boutique.retrait_points()}); }); //]]> </script> </head> <body> <div class="header"> <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><br style="clear:both" /></div> </div> </body></html>

par Cali93110 Jeu 30 Avr 2015 - 9:21

Bonjour,

C'est carrément extraordinaire ce que tu fais là !! Very Happy

Merci mille fois. Rassures toi je n'ai pas encore eu le temps de mettre en place les produits, donc tout va bien. Je teste ce soir en rentrant du travail.
Merci encore, c'est trop top ! :-)

par no_way Jeu 30 Avr 2015 - 10:17

Je t'en prie, il y a encore 2-3 choses qui m'agacent, mais je vais essayer de les régler rapidement.

J'aurai plus de temps demain normalement donc ne te presse pas pour ce soir, à moins que tu souhaites t'y attaquer au plus vite ^^

@ bientôt Wink

par Cali93110 Jeu 30 Avr 2015 - 10:26

Sans soucis, prends ton temps. Je regarderai ça demain ou après-demain dans ce cas. Comme ça tu auras le temps de te pencher sur ce qui pourrait poser soucis. Merci bien ! Very Happy

Bonne journée.

par no_way Jeu 30 Avr 2015 - 20:38

Bonsoir le script est terminé:

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="fr" xml:lang="fr" > <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" /> <link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/discussion.ico" /> <meta name="title" content="Boutique" /><link rel="stylesheet" href="/73-ltr.css" type="text/css" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="ACCIO DESTINY" /> <link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/search/improvedsearch.xml" title="Rechercher des forums" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> .header,.ma-boutique{ width: 792px; background:#FFF; line-height:16px; border: 1px solid #6E6A65; } .header{ background-color: #8A8783; background-image: url("http://i47.tinypic.com/33nusqs.jpg"); background-repeat: repeat no-repeat; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #FFF; font-family: arial,helvetica,sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal; } .header>span{ display:block; margin:4px 10px; } .article{ float:left; background: none repeat scroll 0% 0% #FFF; border: 1px solid #CECECE; height: auto; min-height: 195px; overflow: hidden; padding: 5px; margin:5px; text-align: center; box-sizing: border-box; width: 188px; } .ajout-panier{ background-color: #F3F3F3; border: 1px solid #CECECE; 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-bottom: 0px; margin: 4px; padding:4px; cursor:pointer; } .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; } .disponibilite{ color: #008000; font-size: 13px; font-style: italic; text-align: center; float: right; } .disponibilite:first-letter{ text-transform:capitalize } #bloc-panier-caisse{ border-top:1px #6E6A65 solid; background:#fefefe; position:relative; } #panier-caisse{ float:right } #panier{ overflow:auto; height:100px; width:280px; border:1px #6E6A65 solid; border-top:none; background:#eeeeee } #panier h4{ font-size:14px; line-height:19px; padding:0px; margin:0px; 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; } </style> <script type="text/javascript"> //<![CDATA[ var boutique={ "articles":{ "Helmet0":{ "prix":"250", "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":"250", "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":{ "250":"14" }, "panier":[], "afficher_articles":function(){ var a,p=this.articles; for(a in p){ $("div.articles").append($("<div/>",{"class":"article"}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":p[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":p[a].prix})).append(" ").append($("<span>",{"class":"disponibilite","text":p[a].disponibilite}))).append($("<div>",{"class":"ajout-panier","text":"Acheter","data-article":a}).on("click",function(){boutique.ajoutPanier($(this).data("article"))}))); } }, "ajoutPanier":function(a){ this.panier.push(a); this.maj(); }, "retraitPanier":function(a){ this.panier.splice(this.panier.indexOf(a),1); this.maj(); }, "maj":function(){ var a,b=this.panier,c=0; $("#panier").html(""); for(a in b){ c+=parseInt(this.articles[b[a]].prix); $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(){boutique.retraitPanier($(this).data("article"))})); } $("#cout-total").html(c) }, "calcul_cout":function(){ var a,b=this.panier,c=0; for(a in b){ c+=parseInt(this.articles[b[a]].prix); } $("#cout-total").html(c) }, "a":0, "delai_post":11, "estimation_tps_restant":0, "erreur":false, "fx_tmp":false, "fx":function(){ var succes_post=function(a){$("#panier").append($("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[a],"class":"succes_achat"}))}; var echec_post=function(a,x,s,e){this.erreur+=(x.responseText)?s+" {"+x.responseText+"}":s;$("#panier").append($("<h4>",{"class":"echec_achat",text:'[Erreur]['+this.panier[a]+']:'+this.erreur}))}; var complete_post=function(){this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);if(!(this.a<this.panier.length)){$("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);if(!this.erreur){$("#panier").html("<h4>Merci pour cet achat !</h4>")}}}; 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.a)); this.a+=1; }, "retrait_points":function(){ if(this.panier.length){ this.a=0;this.erreur=false; $("#caisse").css("display","none"); this.estimation_tps_restant=this.panier.length*this.delai_post; $("#panier").html("<h4>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{ $("#panier").html("<h4>Oups, panier vide !</h4>"); } } }; $(function(){ boutique.afficher_articles(); $("#achat").on("click",function(){boutique.retrait_points()}); }); //]]> </script> </head> <body> <div class="header"> <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><br style="clear:both" /></div> </div> </body></html>

Afin d'accélérer la mise en place du script:
-Créer une catégorie dans lequel les forums (qui vont permettre de retirer les points) seront placés.
-Créer un forum pour chaque valeur de points à retirer (250,300 ...) et un sujet dans celui-ci.
-Pour chaque forum, choisis les permissions suivantes:
Voir le forum et ses messages: Administrateurs
Ecrire des sujets ou des messages : Membres
-Dans "Gestion des points" dans ton PA, dans la colonne "par message", indique le nombre de points à retirer, par exemple: -250
-Va dans le sujet de chaque forum et releve la valeur numérique après "t" dans la barre d'adresse, par exemple sur mon forum:
le sujet pour le retrait de 250 points a la valeur numérique après le "t" de son adresse url à 14.
c'est pourquoi tu retrouves ceci dans le script:

Code:: "sujets_retrait_points":{ "250":"14" }

Tu dois le modifier et y ajouter tes valeurs tu dois les séparer par une virgule exemple:

Code:: "sujets_retrait_points":{ "250":"14", "300":"21", "350":"41" }

Je te laisse déjà faire ça, et me mettre le lien vers ta boutique Smile

, ça me permettra de vérifier que le code est bon.

@ bientôt

par Cali93110 Jeu 30 Avr 2015 - 20:51

Hello,

Ah ça a été plus vite que prévu à ce que je vois. ;P
Donc c'est mis en place, et j'ai suivi tes instructions. Voici la nouvelle boutique :

Encore merci pour cette aide précieuse !

par no_way Ven 1 Mai 2015 - 8:04

Ola !
Je t'en prie Smile

, alors pour la partie javascript tu as rempli comme il le fallait.
Si tu souhaites utiliser le haut et bas du forum, suis les étapes suivantes:
Dans ton PA, direction ta feuille CSS ou tu ajoutes ce qui suit:

Code:: #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 .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; cursor:pointer; } #conteneur_ma-boutique .ajout-panier:hover{ font-weight:700 } #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; } #panier-caisse{ float:right } #panier{ overflow:auto; height:100px; 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; }

enfin remplace le code html que tu as par celui qui suit:

Code:: <script type="text/javascript"> //<![CDATA[ var boutique={ "articles":{ "Helmet0":{ "prix":"250", "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":"250", "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":[], "afficher_articles":function(){ var a,p=this.articles; for(a in p){ $("div.articles").append($("<div/>",{"class":"article"}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":p[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":p[a].prix})).append(" ").append($("<span>",{"class":"disponibilite","text":p[a].disponibilite}))).append($("<div>",{"class":"ajout-panier","text":"Acheter","data-article":a}).on("click",function(){boutique.ajoutPanier($(this).data("article"))}))); } }, "ajoutPanier":function(a){ this.panier.push(a); this.maj(); }, "retraitPanier":function(a){ this.panier.splice(this.panier.indexOf(a),1); this.maj(); }, "maj":function(){ var a,b=this.panier,c=0; $("#panier").html(""); for(a in b){ c+=parseInt(this.articles[b[a]].prix); $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(){boutique.retraitPanier($(this).data("article"))})); } $("#cout-total").html(c) }, "calcul_cout":function(){ var a,b=this.panier,c=0; for(a in b){ c+=parseInt(this.articles[b[a]].prix); } $("#cout-total").html(c) }, "a":0, "delai_post":11, "estimation_tps_restant":0, "erreur":false, "fx_tmp":false, "fx":function(){ try{ if(this.a<this.panier.length){ var succes_post=function(a){$("#panier").append($("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[a],"class":"succes_achat"}))}; var echec_post=function(a,x,s,e){this.erreur=(x.responseText)?e+" {"+x.responseText+"}":e;$("#panier").append($("<h4>",{"class":"echec_achat",text:'['+(s[0].toUpperCase()+s.slice(1))+']['+this.panier[a]+']:'+this.erreur}))}; var complete_post=function(){this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);if(!(this.a<this.panier.length)){$("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);if(!this.erreur){$("#panier").html("<h4>Merci pour cet achat !</h4>")}}}; 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.a)); 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); } }, "retrait_points":function(){ if(this.panier.length){ this.a=0;this.erreur=false; $("#caisse").css("display","none"); this.estimation_tps_restant=this.panier.length*this.delai_post; $("#panier").html("<h4>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{ $("#panier").html("<h4>Oups, panier vide !</h4>"); } } }; $(function(){ boutique.afficher_articles(); $("#achat").on("click",function(){boutique.retrait_points()}); }); //]]> </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><br style="clear:both" /></div> </div> </div>

Dans ce dernier code tu devras modifier les articles exemple:

Code:: "Helmet0":{ "prix":"250", "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png", "disponibilite":"en stock" }

Tu constateras que là aussi les articles sont séparés par une virgule, le nom des propriétés de l'article sont explicites Wink

Si tu ne souhaites pas utiliser le haut et bas du forum, remplace la totalité du code par:

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="fr" xml:lang="fr" > <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" /> <link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/discussion.ico" /> <meta name="title" content="Boutique" /><link rel="stylesheet" href="/73-ltr.css" type="text/css" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="ACCIO DESTINY" /> <link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/search/improvedsearch.xml" title="Rechercher des forums" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> #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 .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; cursor:pointer; } #conteneur_ma-boutique .ajout-panier:hover{ font-weight:700 } #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; } #panier-caisse{ float:right } #panier{ overflow:auto; height:100px; 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; } </style> <script type="text/javascript"> //<![CDATA[ var boutique={ "articles":{ "Helmet0":{ "prix":"250", "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":"250", "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":[], "afficher_articles":function(){ var a,p=this.articles; for(a in p){ $("div.articles").append($("<div/>",{"class":"article"}).append($("<h4>",{"class":"titre",text:a})).append($("<img>",{"class":"image","src":p[a].image,"alt":"image de "+a,"title":"Acheter "+a})).append($("<div>",{"class":"detail"}).append($("<span>",{"class":"prix","text":p[a].prix})).append(" ").append($("<span>",{"class":"disponibilite","text":p[a].disponibilite}))).append($("<div>",{"class":"ajout-panier","text":"Acheter","data-article":a}).on("click",function(){boutique.ajoutPanier($(this).data("article"))}))); } }, "ajoutPanier":function(a){ this.panier.push(a); this.maj(); }, "retraitPanier":function(a){ this.panier.splice(this.panier.indexOf(a),1); this.maj(); }, "maj":function(){ var a,b=this.panier,c=0; $("#panier").html(""); for(a in b){ c+=parseInt(this.articles[b[a]].prix); $("#panier").append($("<h4>",{"class":"article_ajoute","data-article":b[a],"text":b[a]}).on("click",function(){boutique.retraitPanier($(this).data("article"))})); } $("#cout-total").html(c) }, "calcul_cout":function(){ var a,b=this.panier,c=0; for(a in b){ c+=parseInt(this.articles[b[a]].prix); } $("#cout-total").html(c) }, "a":0, "delai_post":11, "estimation_tps_restant":0, "erreur":false, "fx_tmp":false, "fx":function(){ try{ if(this.a<this.panier.length){ var succes_post=function(a){$("#panier").append($("<h4>",{"class":"succes_achat","text":"[Achat]"+this.panier[a],"class":"succes_achat"}))}; var echec_post=function(a,x,s,e){this.erreur=(x.responseText)?e+" {"+x.responseText+"}":e;$("#panier").append($("<h4>",{"class":"echec_achat",text:'['+(s[0].toUpperCase()+s.slice(1))+']['+this.panier[a]+']:'+this.erreur}))}; var complete_post=function(){this.estimation_tps_restant-=this.delai_post;$("#estimation_tps_restant").text(this.estimation_tps_restant);if(!(this.a<this.panier.length)){$("#caisse").css("display","inline-block");this.panier=[];this.calcul_cout();clearInterval(this.fx_tmp);if(!this.erreur){$("#panier").html("<h4>Merci pour cet achat !</h4>")}}}; 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.a)); 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); } }, "retrait_points":function(){ if(this.panier.length){ this.a=0;this.erreur=false; $("#caisse").css("display","none"); this.estimation_tps_restant=this.panier.length*this.delai_post; $("#panier").html("<h4>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{ $("#panier").html("<h4>Oups, panier vide !</h4>"); } } }; $(function(){ boutique.afficher_articles(); $("#achat").on("click",function(){boutique.retrait_points()}); }); //]]> </script> </head> <body> <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><br style="clear:both" /></div> </div> </div> </body></html>

Dans cette solution là, là aussi tu devras modifier les articles exemple:

Code:: "Helmet0":{ "prix":"250", "image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png", "disponibilite":"en stock" }

Tu constateras que là aussi les articles sont séparés par une virgule, le nom des propriétés de l'article est explicite Wink

par Cali93110 Ven 1 Mai 2015 - 10:17

Coucou no_way,

Mais j'utilise déjà le haut et le bas du forum. Smile

En tout cas sous Safari ils apparaissent bien effectivement, mais je rencontre un soucis sous Chrome (et du coup peut être sous Firefox, chez toi ?)
J'ai même ouvert un topic ici : https://forum.forumactif.com/t377975-disparition-du-header-et-de-la-navigation-chrome

Ah moins que je n'ai pas compris ce que tu entendais par haut et bas du forum, ils sont pourtant "techniquement" bien là, même pour la boutique. Wink

par no_way Ven 1 Mai 2015 - 15:57

Coucou, alors:

Mais j'utilise déjà le haut et le bas du forum

L'option "Voulez-vous utiliser le haut et le bas de page de votre forum ?" est elle à "oui" ? si oui, alors il te faut suivre la première procédure si non, la deuxième Wink

Si tu regardes le code source de ta page tu y verras 2 fois "<html>", "<head>", "<body>" etc... c'est pourquoi tu auras à terme des tracas si tu laisses ta page ainsi.

Edit:
Je me suis enregistré sur votre forum.

par Cali93110 Ven 1 Mai 2015 - 18:01

Effectivement, c'est même cela qui me posait soucis sous chrome et d'autres navigateurs. Very Happy

Donc c'est fait. Je n'avais pas compris la réelle importance de la chose. Wink

Et oui, j'ai vu ça. Very Happy

Y'a t-il une suite ?

par no_way Ven 1 Mai 2015 - 18:21

Oui il te faut mettre le code CSS comme indiqué plus haut Wink

par Cali93110 Ven 1 Mai 2015 - 18:26

Je l'ai fait ça. Wink

Par contre je n'ai pas supprimé ceux de l'ancienne boutique, c'est peut être pour ça. Je retourne voir ça.

par no_way Ven 1 Mai 2015 - 18:36

Contrôle bien que dans ton PA->Général->sécurité tu as "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" à "non".
Si tout est bon tu dois pouvoir faire un essai

par Cali93110 Ven 1 Mai 2015 - 18:54

Yes ! Alors je viens de faire un essai, voici ce que j'ai noté :

J'avais 4273 gallions (les fameux points Wink

)
Si j'achète un seul article, je suis donc censée avoir ceci : 4273 - 250 = 4023
J'obtiens bien 4023.

J'ai 4023 gallions.
J'achète HELMET2, HELMET4, HELMET0 soit un total de 750 gallions.
4023 - 750 = 3273
J'obtiens 3773. Je pense qu'il doit y avoir un bug quelque part. :/

EDITE : j'ai bien 3273 maintenant. On dirait qu'il y a un temps entre le clique sur le bouton et la déduction des points ? C'est pour ça d'ailleurs que j'avais autre chose que "Merci pour cet achat !" pendant un temps dans le panier ?

par no_way Sam 2 Mai 2015 - 5:47

Oui tu as tout compris cette latence est voulue:

no_way a écrit:Je dois encore l'améliorer ceci dit, il n'est pas encore tout à fait au point (dû à la sécurité du nombre de post autorisé pour un temps donné: sécurité contre le flood j'ai l'impression).

Et c'est pour ça que j'ai mis un affichage du temps restant estimé Smile

par Cali93110 Sam 2 Mai 2015 - 12:03

Mais le contrôle du flood n'est pas gérable dans le PA ? Smile

Soucis code Boutique en ligne