Créer une boutique virtuelle.

[Archimus]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'aimerai créer une petite boutique virtuelle avec le système de points. J'ai cherché quelques tutoriaux, mais je vous avoue que c'est du petit chinois pour moi ! Les utilisateurs n'expliquent pas et se contentent de donner un code en vrac et n'explique que la moitié, sans possibilité de mettre en forme par la suite !

L'idée est de faire un cadre très simple avec le nom, l'image, une petite description et le prix virtuel de l'article ainsi le bouton "acheter" (qui envoie un message à l'administrateur). Avez-vous un code très simple.

Afin de spécifier ma recherche, voici un croquis.



* Le bouton "Acheter" est une image.
* J'aimerai que chaque encadré soit avec un contour blanc et en mettre 2 ou 3 sur une même ligne.


Si vous pouviez me donner une base je vous en remercie. En contre-partie, je pourrais faire un petit tutoriel pour les utilisateurs qui seraient dans la même démarche.

[Feuilla']

Bonjour,
peut-être en mettant le contenu dans un widget ?
https://forum.forumactif.com/t233284-installation-modification-de-widgets

Vous mettez normalement le contenu du widget et pour le "Acheter" qui renvoie sur un message à l'administrateur, il vous suffit de créer une image qui renvoie vers une page désirée (Comment faire ?), et vous prenez l'adresse qui vous permet de vous envoyer le MP et/ou l'Email.

Exemple pour le message privé :

Code:

http://nomdusite.nomdedomainedusite/privmsg?mode=post&u=numérodel'utilisateur

Email :

Code:

http://nomdusite.nomdedomainedusite/profile?mode=email&u=numérodel'utilisateur

à la place du "lien adresse site".
Bonne journée !

[Archimus]

Bonjour,

J'ai cherché un petit peu et bidouiller les codes. Je me suis inspiré de https://forum.forumactif.com/t377888-soucis-code-boutique-en-ligne. Malheureusement, ça ne fonctionne pas et j'ai essayé de changer les codes, mais rien n'y fait. Je suis perplexe ! Aidez-moi s'il vous plait.

Je vais préciser que j'aimerai faire cette boutique sur une page html sur base du système de points. Merci de m'aider s'il vous plait.

[Archimus]

Bonjour,
peut-être en mettant le contenu dans un widget ?
https://forum.forumactif.com/t233284-installation-modification-de-widgets

Vous mettez normalement le contenu du widget et pour le "Acheter" qui renvoie sur un message à l'administrateur, il vous suffit de créer une image qui renvoie vers une page désirée (Comment faire ?), et vous prenez l'adresse qui vous permet de vous envoyer le MP et/ou l'Email.

Exemple pour le message privé :

Code:

http://nomdusite.nomdedomainedusite/privmsg?mode=post&u=numérodel'utilisateur

Email :

Code:

http://nomdusite.nomdedomainedusite/profile?mode=email&u=numérodel'utilisateur

à la place du "lien adresse site".
Bonne journée !

L'idée n'est pas mauvaise, mais cela ne résoud pas le problème. Le message envoyé sera vierge. L'idée, c'est que le message contient toutes les informations. Exemple : "Joueur 1 a dépensé x argents pour x article".

Peut-être s'inspirer de ce site : http://floratropica.forumactif.org/h1-essai

[Archimus]

Après recherche, j'ai trouvé deux codes html et css. Le problème, c'est que je ne sais pas comment le personnaliser et l'adapter. Comment l'administrateur sait qu'un utilisateur a fait un achat ? Si vous pouviez me l'expliquer ?

La partie CSS

Code:

/****************Ma boutique*****************/
#conteneur_ma-boutique{
width:794px;
background:#FFF;
line-height:16px;
}
#conteneur_ma-boutique h4{
padding:0px;
margin:0px
}
#conteneur_ma-boutique .entete,#conteneur_ma-boutique .ma-boutique{
background:#FFF;
border: 1px solid #6E6A65;
}
#conteneur_ma-boutique .entete{
background: url("http://i47.tinypic.com/33nusqs.jpg") #8A8783;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #FFF;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
}
#conteneur_ma-boutique .entete>span{
display:block;
margin:4px 10px;
}
#conteneur_ma-boutique .ma-boutique{
width:100%;
box-sizing:border-box;
}
#conteneur_ma-boutique .article{
float:left;
background:#FFF;
border: 1px solid #CECECE;
padding:5px;
margin:5px;
text-align: center;
box-sizing: border-box;
width: 188px;
}
#conteneur_ma-boutique .article.points_insuffisants{
background:#ECECEC;
}
#conteneur_ma-boutique .article .titre{
overflow:hidden;
text-overflow:ellipsis;
margin-top:5px;
margin-bottom:20px;
}
#conteneur_ma-boutique .image{
max-width:70px;
max-height:70px;
}
#conteneur_ma-boutique .ajout-panier{
background-color: #F3F3F3;
border: 1px solid #CECECE;
border-radius:3px;
color: #000;
font-family: "Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial;
font-size: 15px;
margin: 4px;
padding:4px;
}
#conteneur_ma-boutique .ajout-panier.points_suffisants:hover{
cursor:pointer;
font-weight:700
}
#conteneur_ma-boutique .ajout-panier.points_insuffisants{
background:#DBD7D7
}
#conteneur_ma-boutique .prix{
background: url("http://s6.tinypic.com/286sfuu_th.jpg") no-repeat scroll 0% 0% transparent;
color: #242424;
float: left;
font-size: 16px;
font-weight: 700;
padding-bottom: 5px;
padding-left: 18px;
text-align: center;
}
#conteneur_ma-boutique .disponibilite{
color: #080;
font-size: 13px;
font-style: italic;
text-align: center;
float: right;
}
#conteneur_ma-boutique .disponibilite:first-letter{
text-transform:capitalize
}
#bloc-panier-caisse{
border-top:1px #6E6A65 solid;
background:#fefefe;
}
#infos_boutique{
float:left;
padding:5px;
}
#infos_boutique h4{
margin-top:10px;
margin-bottom:5px;
color:#d00
}
#panier-caisse{
float:right
}
#panier{
overflow:auto;
height:105px;
width:280px;
border:1px #6E6A65 solid;
border-top:none;
background:#eeeeee
}
#panier h4{
font-size:14px;
line-height:19px;
text-align:center;
cursor:pointer;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa
}
#panier h4.article_ajoute:hover{
background:#fff url(http://2img.net/i/fa/subsilver/topic_trashcan.gif) 0% 0% no-repeat;
}
#panier h4.succes_achat{
background:#dfd;
}
#panier h4.echec_achat{
background:#fdd;
}
/****************Fin ma boutique*****************/

La partie HTML

Code:

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

Un grand merci d'avance !

[Archimus]

Bonjour,

Après une longue recherche, j'ai trouvé ce topic avec un code vraiment sympathique pourcréer une boutique en ligne qui fonctionne. Cela envoie un message à l'administrateur ou autre avec la liste.

Il y a malheureusement un problème, il n'y a pas de css et c'est vraiment horrible sans ! Pouvez-vous m'aider s'il vous plait ?

Merci d'avance

[Archimus]

Bonjour,

À force d'acharnement, j'y suis arrivé. Merci à toutes les personnes qui ont mis des codes sans les expliquer. Ma Boutique fonctionne. J'ai appris un peu le CSS et le HTML. Je tiens à préciser que la boutique n'est pas automatique, mais manuel, mais ce n'est pas mal ! Je ferai un tutoriel

Bonne journée.