Boutique en ligne

par emc2 Sam 13 Déc 2014 - 0:14

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumfrance.forumactif.fr/

Description du problème

Bonsoir,
Je cherche un à développer un petit programme en html pour faire en sorte que lorsque l'on clique sur un bouton, cela additionne deux valeurs algébriques. Plus précisément, comment ajouter un nombre à un autre par un simple clic.
Je suis conscient que ce que je demande n'est pas simple, mais après plusieurs tentatives de recherches, je ne trouve pas de site qui pourrait m'expliquer comment faire cela.
Concrètement, l'idée serait que lorsqu'un membre clic sur un bouton une valeur quelconque soit ajouter à un compteur lui appartenant. Le but étant que les membres puissent s'acheter et vendre des objets virtuels entre eux sans passer par des opérations compliquées et avec l'intervention d'un admin.
Donc, si quelqu'un pouvait me donner une piste de site ou une idée de base pour un codage qui aille dans ce sens, je suis preneur.
Merci.

par emc2 Dim 14 Déc 2014 - 0:48

up ....

par [Nihil] Dim 14 Déc 2014 - 1:24

Hello,

Cela ressemble un peu à cette demande ci ? Attribuer -5 à nos points via un bouton dans une page HTML

par demeter1 Dim 14 Déc 2014 - 4:23

Emc2, s'il s'agit d'une boutique en ligne, vois si cela pourrait te convenir :

http://floratropica.forumactif.org/h1-essai

Une fois que le membre a fait ses achats, le système comptabilise le total. Par la suite le membre n'a plus qu'à envoyer la commande qui atterrie dans la boite mail d'un admin.

par emc2 Dim 14 Déc 2014 - 19:54

Merci pour ces deux réponses. je vais les étudier dans la soirée et reviendrais demain pour donner mon avis.

par emc2 Mar 16 Déc 2014 - 0:55

[Nihil] a écrit:Hello,

Cela ressemble un peu à cette demande ci ? Attribuer -5 à nos points via un bouton dans une page HTML

Oui, ça ressemble à cette demande. Effectivement, c'est à peu près cela que je souhaite faire comme oprération. mais je n'ai pas vraiment compris comment ça marche. L'idée serait que cela opère -5 sur un compteur quelconque qui appartiendrait au membre qui clic sur le bouton: EX, X possède 200 pts, il clique sur le bouton, et hop ! Son compteur affiche 195 pts. Et je n'ai pas compris comment le mettre en œuvre.

demeter1 a écrit:Emc2, s'il s'agit d'une boutique en ligne, vois si cela pourrait te convenir :

http://floratropica.forumactif.org/h1-essai

Une fois que le membre a fait ses achats, le système comptabilise le total. Par la suite le membre n'a plus qu'à envoyer la commande qui atterrie dans la boite mail d'un admin.

Ca aussi c'est intéressant, mais je n'ai pas la possibilité d'utiliser le code car c'est un forum à part entière. Comment récupérer le code concernant la mécanique de ce système ?

par demeter1 Mar 16 Déc 2014 - 1:09

IL s'agit d'une page html.

panneau d'administration > modules > gestion des pages html
> créez une nouvelle page html
> titre : comme vous voulez
> Voulez-vous utiliser le haut et le bas de page de votre forum ? : cocher oui
> Utiliser cette page en tant que page d'accueil ? : cochez non

L'heure est tardive pour fournir des explicatifs mais voici le code

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> <style type="text/css"> .cart_items, #checkout{ padding: 10px; border-radius: 3px; background: white; border: 1px solid #cdcdcd; margin: 2px 10px; } .cartWrapper{width:100%;} .theList li { list-style-type: upper-hexadecimal; background: rgb(245, 93, <img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />; margin: 1px 3px; color: white; font: bold italic 12px helvetica; border-radius: 3px 5px 5px 3px; display: inline-block; padding: 2px 10px 2px 2px; cursor: pointer; } .theList li:before { content: " "; position: relative; display: inline-block; height: 1px; width: 7px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid rgb(245, 93, <img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />; left: -14px; top: 1px; } .main .cont, .box_r, .box_t{ padding: 9px; background: #ebf0f3; } .box_r {background: white;} .LayoutLeft { padding-left: 150px; } .Layout_smallleft { position: relative; width: 140px; margin-left: -150px; float: left; } .Tabs ul { width: 149px !important; margin-top: 10px; border-top: 1px solid #DBE4EF; border-left: 1px solid #DBE4EF; } .Tabs li { background: #f6f8fb; color: #808080; border-bottom: 1px solid #DBE4EF; font-size: 13px; } .Tabs li.active a { width: 135px; position: relative; z-index: 8000; border-right: 1px solid #fff; background: #fff !important; color: #353535 !important; font-weight: bold; } .Tabs li a { display: block; padding: 10px 8px; outline: 0; color: #8d8d8d; border-right: 1px solid #DBE4EF; -webkit-transition: background-color 0.1s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; } .Tabs li a:hover { background: #eaeff5; color: #808080; } #usercp_content { min-height: 395px; } .message { background: #ebfcdf; padding: 10px; border: 1px solid #a4cfa4; color: #0e440e; line-height: 1.6; font-size: 12px; } .pun table.table td {padding: 10px;} .pun table.table td.row2 { background-color: #f1f6f9; } input[type="button"] { margin: 5px; } </style> <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="Voir tous les articles" class="all_itens">Tous les articles</a> </li> <li> <a href="#" title="Panier d'achat" class="all_pay">Conclure la vente</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="message" style="margin:10px"> <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" /> Acheter à bon escient. </div><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 class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i.imgur.com/taaL40o.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Gold STAR!</h4> <br> <span class="desc lighter blend_links"> Stars, WHOA </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item1" value="Acheter"></li> </ul> </td> </tr> <tr id="item2" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Helmet!</h4> <br> <span class="desc lighter blend_links"> Capacete de batalha </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="100"><img src="http://i.imgur.com/qdiucii.png"> Prix: 100.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item2" value="Acheter"></li> </ul> </td> </tr> <tr id="item3" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-3.findicons.com/files/icons/2169/picnic/70/lightsaber24.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Sabre de luz |!</h4> <br> <span class="desc lighter blend_links"> Sabre de luz azul </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item3" value="Acheter"></li> </ul> </td> </tr> <tr id="item4" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-2.findicons.com/files/icons/2169/picnic/70/lightsaber28.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Sabre de luz ||!</h4> <br> <span class="desc lighter blend_links"> Sabre de luz vermelho </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item4" value="Acheter"></li> </ul> </td> </tr> <tr id="item5" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Rain!</h4> <br> <span class="desc lighter blend_links"> Proteja-se da chuva </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item5" value="Acheter"></li> </ul> </td> </tr> <tr id="item6" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Wow!</h4> <br> <span class="desc lighter blend_links"> Wow blue </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item6" value="Acheter"></li> </ul> </td> </tr> <tr id="item7" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Nerd!</h4> <br> <span class="desc lighter blend_links"> Nerd 8.8 </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item7" value="Acheter"></li> </ul> </td> </tr> <tr id="item8" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">MxTube!</h4> <br> <span class="desc lighter blend_links"> Qual canal quer assistir? </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item8" value="Acheter"></li> </ul> </td> </tr> <tr id="item9" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Jedi!</h4> <br> <span class="desc lighter blend_links"> Eu sou jedi u.u </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item9" value="Acheter"></li> </ul> </td> </tr> <tr id="item100" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i30.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Pikachu</h4> <br> <span class="desc lighter blend_links"> Choque do trovão agora </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item100" value="Acheter"></li> </ul> </td> </tr> <tr id="item101" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i31.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Gengar</h4> <br> <span class="desc lighter blend_links"> Pokemón fantasma </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item101" value="Acheter"></li> </ul> </td> </tr> <tr id="item102" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Charmander</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo fogo </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item102" value="Acheter"></li> </ul> </td> </tr> <tr id="item103" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i34.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Totodile</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo água </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item103" value="Acheter"></li> </ul> </td> </tr> <tr id="item104" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i35.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Squirtle</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo água </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item104" value="Acheter"></li> </ul> </td> </tr> <tr id="item105" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i36.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Chikorita</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo planta </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item105" value="Acheter"></li> </ul> </td> </tr> <tr id="item106" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i37.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Bulbasaur</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo planta </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item106" value="Acheter"></li> </ul> </td> </tr> <tr id="item107" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i38.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Cyndaquil</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo fogo </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item107" value="Acheter"></li> </ul> </td> </tr> <tr id="item108" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i39.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Piplup</h4> <br> <span class="desc lighter blend_links"> Pokemón tipo água </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Prix: 250.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item108" value="Acheter"></li> </ul> </td> </tr> <tr id="item109" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i40.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Ho-oh</h4> <br> <span class="desc lighter blend_links"> Pokemón raro </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="300"><img src="http://i.imgur.com/qdiucii.png"> Prix: 300.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item109" value="Acheter"></li> </ul> </td> </tr> <tr id="item110" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i41.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Mew</h4> <br> <span class="desc lighter blend_links"> Pokemón raro </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="300"><img src="http://i.imgur.com/qdiucii.png"> Prix: 300.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item110" value="Acheter"></li> </ul> </td> </tr> <tr id="item200" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i10.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Internacional</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item200" value="Acheter"></li> </ul> </td> </tr> <tr id="item201" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i11.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Botafogo</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item201" value="Acheter"></li> </ul> </td> </tr> <tr id="item202" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i12.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Cruzeiro</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item202" value="Acheter"></li> </ul> </td> </tr> <tr id="item203" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i13.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Figueirense</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item203" value="Acheter"></li> </ul> </td> </tr> <tr id="item204" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i14.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Fluminense</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item204" value="Acheter"></li> </ul> </td> </tr> <tr id="item205" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i15.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Portuguesa</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item205" value="Acheter"></li> </ul> </td> </tr> <tr id="item206" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i16.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Flamengo</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item206" value="Acheter"></li> </ul> </td> </tr> <tr id="item207" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i17.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Santos</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item207" value="Acheter"></li> </ul> </td> </tr> <tr id="item208" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i18.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Palmeiras</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item208" value="Acheter"></li> </ul> </td> </tr> <tr id="item209" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i19.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Vasco</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item209" value="Acheter"></li> </ul> </td> </tr> <tr id="item210" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i20.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">São paulo</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item210" value="Acheter"></li> </ul> </td> </tr> <tr id="item211" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i21.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Atlético-MG</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item211" value="Acheter"></li> </ul> </td> </tr> <tr id="item212" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i22.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Bahia</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item212" value="Acheter"></li> </ul> </td> </tr> <tr id="item213" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i23.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Náutico</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item213" value="Acheter"></li> </ul> </td> </tr> <tr id="item214" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i24.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Sport</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item214" value="Acheter"></li> </ul> </td> </tr> <tr id="item215" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i25.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Ponte preta</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item215" value="Acheter"></li> </ul> </td> </tr> <tr id="item216" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i33.servimg.com/u/f33/18/07/42/17/atleti10.jpg" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Atlético paranaense</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item216" value="Acheter"></li> </ul> </td> </tr> <tr id="item217" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i26.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Corinthians</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item217" value="Acheter"></li> </ul> </td> </tr> <tr id="item218" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i27.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Coritiba</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item218" value="Acheter"></li> </ul> </td> </tr> <tr id="item219" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i28.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Atlético-GO</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item219" value="Acheter"></li> </ul> </td> </tr> <tr id="item220" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i72.servimg.com/u/f72/18/07/42/17/shop_i29.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Grêmio</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item220" value="Acheter"></li> </ul> </td> </tr> <tr id="item221" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://imageshack.us/a/img855/6770/chatmod.jpg" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">1 Day Chatmod</h4> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item221" 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>

par demeter1 Mar 16 Déc 2014 - 13:29

Les explicatifs

Pour expliquer les modifications qui sont à faire, nous allons prendre le premier article de la boutique (Gold star). Chaque article est inclue entre les balise tr.

Code:: <tr id="item1" class="item"> <td class="row2" style="text-align:center;width:10%;margin:5px"> <span> <img src="http://i.imgur.com/taaL40o.png" style="width:50px;height:50px;"> </span> </td> <td class="col_f_content" style="width:40%;"> <h4 class="title">Gold STAR!</h4> <br> <span class="desc lighter blend_links"> Stars, WHOA </span> </td> <td class="col_f_post"> <ul> <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li> <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produit: à vendre</li> <li class="views desc"><input type="button" class="addButton" data-item="item1" value="Acheter"></li> </ul> </td> </tr>

L'image de l'article est contenu dans cette portion

Code:: <img src="http://i.imgur.com/taaL40o.png" style="width:50px;height:50px;">

Le nom de l'article

Code:: <h4 class="title">Gold STAR!</h4>

Le sous titre que vous pouvez utiliser comme explicatif

Code:: <span class="desc lighter blend_links"> Stars, WHOA </span

Le prix de l'article+ l'image de la monnaie

Code:: <li class="views desc points" data-myprice="200"><img src="http://i.imgur.com/qdiucii.png"> Prix: 200.00</li>

data-myprice="200 correspond au prix que prendra en charge le système pour effectuer le calcul
Prix: 200.00 correspond au prix qui sera affiché

https://i.imgur.com/qdiucii.png correspond à l'image qui affiche la monnaie (ici le dollars)
https://i.imgur.com/pb1WAow.png correspond à l'image qui est à côté de "produit à vendre"

_________________________________________________________________________________

Pour l'envoi du message, il faut modifier le pseudo de celui qui va le recevoir dans cette ligne

Code:: <input name="username[]" type="text" style="display:none" value="Admin">

________________________________________________________________________________________

Pour pouvoir modifier la valeur monétaire, il faut modifier dans cette ligne € par la valeur souhaitée

Code:: $('.totaler').html('Total = €' + $total.toFixed(2));

J'ai testé le codage pour voir s'il est bien fonctionnel même avec la mise à jour de la boite d'envoi. De ce côté, pas de soucis.

Voici une capture d'écran de ce que l'on reçoit :

qui est en ligne - Boutique en ligne Sans_t70

Pour le css, je vous laisse utiliser les outils de votre navigateur pour déterminer la couleur de chaque zone.

Ps : Vous devriez modifier le titre du sujet en boutique en ligne histoire de faciliter les recherches.

par Caym Mar 16 Déc 2014 - 13:56

Bonjour,

Ceci est très intéressant, la seul chose que je n'ai pas compris, c'est avec quel valeur l'achat peut être effectué. (je parle de la monnaie qui permet l'achat).

Sur mon forum, par exemple, il y a un système de points, est ce que ce système peut être utilisé comme monnaie dans la boutique ?

Cordialement.

par demeter1 Mar 16 Déc 2014 - 14:19

Bonjour Caym,
Vous pouvez choisir n'importe quelle valeur monétaire (réelle ou imaginaire).

Dans la partie html, il suffit de modifier l'image représentant la valeur . Dans notre code l'image est celle ci : https://i.imgur.com/qdiucii.png

Dans la partie js, il suffit de modifier € dans cette cette ligne

Code:: $('.totaler').html('Total = €' + $total.toFixed(2));

Si la valeur monétaire correspond aux points, vous pouvez modifier le js comme ceci

Code:: $('.totaler').html('Total = Pts' + $total.toFixed(2));

Le système de points peut être associé mais le décompte est a effectuer par celui qui reçoit la commande. Il faut donc passer de manière manuelle sur le profil du membre pour retirer les points.
Voir le tutoriel sur les points : https://forum.forumactif.com/t226004-le-systeme-de-points

par Caym Mar 16 Déc 2014 - 14:22

Ahah très intéressent Wink

, je te remercie.

par emc2 Mer 17 Déc 2014 - 0:36

Merci Demeter1. J'ai pu modifier ce code pour l'adapter, et j'en ai compris l'essentiel. Cependant, je ne retrouve pas cette ligne:

Code:: <input name="username[]" type="text" style="display:none" value="Admin">

dans le listing des instructions. Elle se trouve en fin de codage, ou en tête ?

D'autre part, lorsque je renseigne un speudo dans cette ligne,

Code:: <input value="PSEUDO" style="display:none" type="text" name="username[]" />

j'ai en retour: "Une erreur navigateur est survenue [Erreur #230], veuillez contacter le support technique."

Merci encore.

par demeter1 Mer 17 Déc 2014 - 1:20

Code:: <input name="username[]" type="text" style="display:none" value="Admin">

se trouve en fin. Vous pouvez faire la recherche à partir de votre traitement de texte (wordpad ou autre) en recherchant "Admin".

En manuel, vous recherchez

Code:: <span class="totaler"></span>

et, c'est trois lignes en dessous.

Pour le changement du pseudo, il faut modifier "admin" par le pseudo voulu

Si par exemple, vous êtes celui qui va recevoir le mp, il faudrait modifier la ligne comme ceci

Code:: <input name="username[]" type="text" style="display:none" value="emc2">

Cette ligne n'est par contre pas présente dans le code fourni

Code:: <input value="PSEUDO" style="display:none" type="text" name="username[]" />

Si c'est une modification d'un autre imput, la modif a du titiller le système anti spam de fa.

Si jamais vous avez encore une erreur 230, vérifiez que vous avez bien autorisé l'utilisation de formulaires non officiels.
panneau d'administration >> Général >> Sécurité >> Configuration de la sécurité >> Interdire les formulaires non officiels à poster des messages et messages privés sur le forum>>cocher sur non.

par emc2 Mer 17 Déc 2014 - 22:57

C'est parfait. Cela fonctionne. Les MP aboutissent automamtiquement.
Je balise le sujet en résolu.
Et merci encore pour votre aide.

par demeter1 Mer 17 Déc 2014 - 23:30

De rien.

Boutique en ligne