Créer une boutique virtuelle.

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

Résolu Créer une boutique virtuelle.

Message par Archimus le Lun 28 Sep 2015 - 15:58

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.


Dernière édition par Archimus le Mer 30 Sep 2015 - 9:49, édité 1 fois

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer une boutique virtuelle

Message par Feuilla' le Lun 28 Sep 2015 - 18:13

Bonjour,
peut-être en mettant le contenu dans un widget ? Smile
Tuto http://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". Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Créer une boutique virtuelle.

Message par Archimus le Lun 28 Sep 2015 - 18:15

Bonjour,

J'ai cherché un petit peu et bidouiller les codes. Je me suis inspiré de http://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
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une boutique virtuelle.

Message par Archimus le Lun 28 Sep 2015 - 18:21

@Feuilla' a écrit:Bonjour,
peut-être en mettant le contenu dans un widget ? Smile
Tuto http://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". Wink
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
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une boutique virtuelle.

Message par Archimus le Mar 29 Sep 2015 - 15:46

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://illiweb.com/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
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une boutique virtuelle.

Message par Archimus le Mer 30 Sep 2015 - 1:22

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
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une boutique virtuelle.

Message par Archimus le Mer 30 Sep 2015 - 9:49

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 Smile

Bonne journée.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

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


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