Soucis code Boutique en ligne
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Soucis code Boutique en ligne
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 !
Dernière édition par Cali93110 le Mar 5 Mai 2015 - 9:01, édité 1 fois
Re: Soucis code Boutique en ligne
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
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
Re: Soucis code Boutique en ligne
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.
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.
Re: Soucis code Boutique en ligne
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.
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.
Re: Soucis code Boutique en ligne
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.
Merci.
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.
Merci.
Re: Soucis code Boutique en ligne
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.
Ps : je me sauve,; j'essaierai de repasser un peu plus tard.
Re: Soucis code Boutique en ligne
Autant pour moi, c'est corrigé.
A plus tard.
A plus tard.
Re: Soucis code Boutique en ligne
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.
Re: Soucis code Boutique en ligne
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 ?
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 ?
Re: Soucis code Boutique en ligne
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
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
Re: Soucis code Boutique en ligne
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 !
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 !
Re: Soucis code Boutique en ligne
Up. Merci.
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 !
Re: Soucis code Boutique en ligne
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:
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).
-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).
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Bonjour Noway, il faudra modifier l'icône dollars en euros pour une traduction parfaite en français.(humour du second degrés)
Re: Soucis code Boutique en ligne
Salut Demeter !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)
Horreur et damnation, tu dis vrai !
J'en profite pour dire que j'améliorerai le script demain.
@ bientôt
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>
Dernière édition par no_way le Jeu 30 Avr 2015 - 10:25, édité 5 fois (Raison : Mise à jour+retour erreur Ajax)
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Bonjour,
C'est carrément extraordinaire ce que tu fais là !! 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 ! :-)
C'est carrément extraordinaire ce que tu fais là !! 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 ! :-)
Re: Soucis code Boutique en ligne
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
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
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
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 !
Bonne journée.
Bonne journée.
Re: Soucis code Boutique en ligne
Bonsoir le script est terminé:
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:
Je te laisse déjà faire ça, et me mettre le lien vers ta boutique , ça me permettra de vérifier que le code est bon.
@ bientôt
- 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"
}
- 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 , ça me permettra de vérifier que le code est bon.
@ bientôt
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
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 !
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 !
Re: Soucis code Boutique en ligne
Ola !
Je t'en prie , 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:
Si tu ne souhaites pas utiliser le haut et bas du forum, remplace la totalité du code par:
Je t'en prie , 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;
}
- 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>
- Code:
"Helmet0":{
"prix":"250",
"image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
"disponibilite":"en stock"
}
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>
- Code:
"Helmet0":{
"prix":"250",
"image":"http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png",
"disponibilite":"en stock"
}
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Coucou no_way,
Mais j'utilise déjà le haut et le bas du forum. 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.
Mais j'utilise déjà le haut et le bas du forum. 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.
Re: Soucis code Boutique en ligne
Coucou, alors:
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.
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èmeMais j'utilise déjà le haut et le bas du forum
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.
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Effectivement, c'est même cela qui me posait soucis sous chrome et d'autres navigateurs. Donc c'est fait. Je n'avais pas compris la réelle importance de la chose.
Et oui, j'ai vu ça. Y'a t-il une suite ?
Et oui, j'ai vu ça. Y'a t-il une suite ?
Re: Soucis code Boutique en ligne
Oui il te faut mettre le code CSS comme indiqué plus haut
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Je l'ai fait ça. Par contre je n'ai pas supprimé ceux de l'ancienne boutique, c'est peut être pour ça. Je retourne voir ça.
Re: Soucis code Boutique en ligne
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
Si tout est bon tu dois pouvoir faire un essai
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Yes ! Alors je viens de faire un essai, voici ce que j'ai noté :
J'avais 4273 gallions (les fameux points )
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 ?
J'avais 4273 gallions (les fameux points )
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 ?
Re: Soucis code Boutique en ligne
Oui tu as tout compris cette latence est voulue:
Et c'est pour ça que j'ai mis un affichage du temps restant estimé
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é
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Soucis code Boutique en ligne
Mais le contrôle du flood n'est pas gérable dans le PA ?
Page 1 sur 2 • 1, 2
Sujets similaires
» Boutique : Soucis avec les points
» Boutique en ligne
» Création d'une boutique en ligne
» Soucis avec Barre de navigation + Soucis de profil (infobulle & Onglet 'en ligne')
» Problème avec le code boutique
» Boutique en ligne
» Création d'une boutique en ligne
» Soucis avec Barre de navigation + Soucis de profil (infobulle & Onglet 'en ligne')
» Problème avec le code boutique
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum