AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    (Onyx) Code type "magasin ambiance RPG fantasy"

    Idril Palanén
    Idril Palanén
    FémininAge : 32Messages : 83

    Lun 21 Mai 2018 - 22:04

    Ma demande



    Bonjour, bonjour ! Alors voila, je recherche un code grâce auquel je pourrais afficher des images 200X200 (par exemple) avec au dessus des boutons "acheter" et "quantité" qui permettrait d'enlever le bon nombre de point (dans mon cas monnaie virtuelle de mon monde dans le RPG) directement sur le profil du joueur lorsqu'il validerait sa commende.


    Schéma(s) et Eléments


    Schémas :
    Spoiler:
    Tailles des éléments : - espace pour l'image du produit : 200x200 PX
    - boutons acheter/quantité : 30 PX de hauteur et 50 PX de largeur environ.
    Effets voulus : agrandissement de quelques cm de la photo du produit au passage de la sourie dessus.
    Version de votre forum : PHPBB3


    Ressources


    images produits :
    Spoiler:




    Autres précisions ?


    J'ai oublié de préciser sur le schéma, au dessus de chaque images, il faudrait laisser un espace pour écrire le nom du produit. ainsi que le coût de celui-ci.

    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 22 Mai 2018 - 16:38

    Salut!

    Faire la boutique, c'est possible.

    Par contre, enlever le nombre de points directement dans le profil du membre à la validation de la commande, ce n'est pas possible.
    Le mieux qu'on puisse faire, c'est que quand la personne clique sur "valider la commande", cela poste un message avec le montant à enlever et qu'un Admin/Modo modifie ensuite manuellement le montant.



    • Revenir en haut
    Idril Palanén
    Idril Palanén
    FémininAge : 32Messages : 83

    Mar 22 Mai 2018 - 18:35

    D'accord, bon je pense que ça serait bon de faire ça du coup. Je veux dire, comme ta proposition. :)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 22 Mai 2018 - 22:17

    Re-bonjour,

    Il y a ceci qui existe déjà :
    https://www.never-utopia.com/t60724-systeme-de-boutique-avec-triage-automatique

    Personnalisé un peu comme tu l'as demandé, ça donne ceci :
    http://forum-test-onyx4.forum-canada.com/h4-boutique-fun

    Ça te va?



    • Revenir en haut
    Idril Palanén
    Idril Palanén
    FémininAge : 32Messages : 83

    Jeu 24 Mai 2018 - 20:52

    Salut,
    ça me va parfaitement oui ! Il est possible que ce type de code puisse être intégré dans un message normal pour le lancement d'un nouveau sujet ou il faut absolument créer une page HTLM ? Si rien ne permet de l'intégrer dans un message c'est pas grave bien sûr, je créerais une page HTLM sans problème...
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 25 Mai 2018 - 1:59

    Perfect.

    Alors la première étape est de créer le sujet pour ta boutique.

    Une fois que c'est fait, tu crées une page HTML et tu y mets ceci (en utilisant toujours le triple-engrenage pour créer et modifier la page html) :
    Code:
    <!DOCTYPE html>
      <html><head>
      <meta charset="utf-8">
      <meta name="author" content="Onyx">
      <title>Boutique</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville" rel="stylesheet" type="text/css">
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        }
        /*Le bloc entier de la boutique*/
        #boutique {
        position: relative;
        padding-bottom: 40px;
        margin: auto;
        width: 700px;
        background-color: #efefef;
        font-size: 14px;
        font-family: 'Times New Roman';
        color: #707070;
        text-align: center;
        }
        /*Partie de droite*/
        #middle {
        overflow: auto;
        height: 650px;
        text-align: center;
        }
        /*Div de un seul item*/
        .contenu_shoponglet > div {
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
        }
        
        
        /*Bloc qui contient l'item*/
        .item_bloc {
        display: inline-block;
        vertical-align: top;
        width: 220px;
        padding-top: 15px;
        color: #565656;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        }
        .item_bloc:hover {
        -webkit-transform: scale(1);
        transform: scale(1);
        }
        /*Image de l'item*/
        .item_bloc > img:first-of-type {
        display: inline-block;
        width: 200px;
        height: 200px;
        }
        /*Informations sur l'item*/
        .item_info {
        display: block;
        padding: 5px;
        border-bottom: 1px dotted #565656;
        font-size: 16px;
        }
        /*Bouton pour ajouter le prix*/
        .ajoutprix {
        padding: 0px;
        display: inline-block;
        line-height: 30px;
        vertical-align: middle;
        height: 30px;
        box-sizing: content-box;
        width: 75px;
        background: #c4c4c4;
        border: 1px solid #c4c4c4;
        text-align: center;
        margin-right: 8px;
        box-shadow: 2px 2px 5px #a3a3a3;
        cursor: pointer;
        }
        .ajoutprix:hover {
        box-shadow: 4px 4px 5px #a3a3a3;
        background: #dfdfdf;
        border-color: #dfdfdf;
        }
        /*Input du nombre d'item à acheter*/
        input[type="number"] {
        padding: 0px;
        display: inline-block;
        line-height: 30px;
        vertical-align: middle;
        height: 30px;
        width: 50px;
        border: 1px solid #a3a3a3;
        text-align: center;
        background: #ffffff;
        }
        
        
        /*Partie du panier*/
        #bottom {
        position: relative;
        display: inline-block;
        margin: auto;
        margin-top: 20px;
        width: 600px;
        background-color: #efefef;
        box-shadow: 0px 0px 10px #353535;
        color: #565656;
        text-align: center;
        overflow: hidden;
        }
        /*Titre du panier*/
        #bottom_top {
        position: relative;
        z-index: 2;
        font-size: 24px;
        font-family: 'Dancing Script', script;
        text-align: center;
        border-bottom: 1px solid #747474;
        width: 590px;
        padding: 5px;
        background-color: #dfdfdf;
        box-shadow: 0px 0px 10px #353535;
        color: #565656;
        }
        /*Panier visible*/
        #vuepanier {
        position: relative;
        z-index: 1;
        margin: 10px;
        margin-right: 0px;
        margin-left: 0px;
        width: 590px;
        height: 100px;
        background-color: #efefef;
        padding: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        color: #565656;
        text-align: justify;
        overflow: auto;
        }
        /*Bouton effacer et soumettre le panier*/
        #soumettrepanier, #effacerpanier {
        display: inline-block;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 5px;
        padding: 0px;
        line-height: 40px;
        vertical-align: middle;
        height: 40px;
        box-sizing: content-box;
        width: 175px;
        background: #c4c4c4;
        border: 1px solid #c4c4c4;
        text-align: center;
        box-shadow: 2px 2px 5px #a3a3a3;
        cursor: pointer;
        }
        /*Bouton soumettre le panier*/
        #effacerpanier {
        margin-right: 15px;
        }
        #soumettrepanier:hover, #effacerpanier:hover {
        box-shadow: 4px 4px 5px #a3a3a3;
        border-color: #dfdfdf;
        background: #dfdfdf;
        }
        
        
        /*Credit*/
        .credits {
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 2px;
        left: 2px;
        text-align: left;
        }
        
        /*Liens*/
        a {
        text-decoration: none;
        color: #454545;
        }
        a:hover {
        color: #000000;
        }
        
        
        /*Bloc objet dans le panier*/
        .item_input {
        display: inline-block;
        margin-bottom: 5px;
        background-color: #cfcfcf;
        padding: 2px;
        width: 475px;
        text-align: left;
        }
        /*Le bloc du nom et prix de l'objet dans le panier*/
        .iteminsidepanier {
        margin-left: 5px;
        display: inline-block;
        text-align: left;
        }
        /*Les boutons dans le panier*/
        .item_input button {
        }
        /*Le bouton supprimer de l'objet dans le panier*/
        .button_delete {
        margin-right: 2px;
        display: inline-block;
        }
        /*La quantité de l'objet dans le panier*/
        .input_nb_object {
        margin: 0px 2px 0px 2px;
        display: inline-block;
        padding: 2px;
        border: 1px solid #a3a3a3;
        background: #efefef;
        width: 45px;
        text-align: center;
        }
      </style>
    </head>
    <body>
      <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
        <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank">Never-Utopia</a>.</div>

        <div id="middle">
          <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

            <!-- DÉBUT ITEM -->
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">10</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/armes-10.jpg"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">20</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/objet010.gif"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">50</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/56ebcf10.jpg"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">75</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/blue_m10.jpg"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">30</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/db81e110.jpg"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            
            <div>
              <div class="item_bloc">
                <span class="item_info">
                  <span class="item_name">Nom de l'item</span> à <span class="nbprix">200</span>$
                </span><br>
                <img src="https://i62.servimg.com/u/f62/17/42/61/92/durand10.png"><br><br>
                <button class="ajoutprix" type="button">Acheter</button><input type="number" value="1" min="1">
              </div>
            </div>
            <!-- FIN ITEM -->

          </div>
        </div>
        <div id="bottom">
          <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
          <div id="vuepanier">Mon panier est vide.</div>
        </div>
        <br>
        <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
        <input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post">
        <textarea name="message" id="message" style="display:none"></textarea>
        <input type="hidden" value="reply" name="mode">
        <input type="hidden" value="70" name="t">
        <div style="clear: both;"></div>
      </form>
    <script type="text/javascript">
      //<!--
      var totalbase = 0;
      $('#total2').html(totalbase);
      var totaltotal = 0;
      
      /*Quand on ajoute un item au panier*/
      $('.ajoutprix').click(function() {
        var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
        var qt = parseInt($(this).parent().find('input').eq(0).val());
        var qtprixcalculation = qt * prix;
        var nomitem = $(this).parent().find('.item_name').eq(0).html();
        var phrase = "<span class='item_input'>" +
          "<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
          "<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
          "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
          "<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
          "<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>" +
          " à <span class='thepriceinside'>"+prix+"</span>$ pour un total de" +
          " <span class='thetotalinside'>"+qtprixcalculation+"</span>$.</span>";
        if ($('#vuepanier').html() == "Mon panier est vide.") {
          $('#vuepanier').html(phrase);
        }
        else {
          var ajoutphrase = $('#vuepanier').html();
          ajoutphrase = ajoutphrase+phrase;
          $('#vuepanier').html(ajoutphrase);
        }
        calcultotal();
      });
      
      /*Ajouter un item déjà dans le panier*/
      function addqtitem(bihihi) {
        var curritem = parseInt($(bihihi).prev().val());
        var curritemafter = curritem + 1;
        $(bihihi).prev().val(curritemafter);
        calcultotal();
      }
      
      /*Enlever un item déjà dans le panier*/
      function removeqtitem(bohoho) {
        var curratem = parseInt($(bohoho).next().val());
        var curratemafter = curratem - 1;
        $(bohoho).next().val(curratemafter);
        calcultotal();
      }
      
      /*Supprimer un item déjà dans le panier*/
      function deleteqtitem(bahaha) {
        $(bahaha).parent().remove();
        calcultotal();
      }
      
      /*Fonction pour calculer*/
      function calcultotal() {
        totaltotal = 0;
        $('.item_input').each(function(){
          if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
            $(this).remove();
          }
          var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
          var otherquant = parseInt($(this).find('.input_nb_object:first').val());
          $(this).find('.thetotalinside:first').html((otherprix*otherquant));
          totaltotal = totaltotal + (otherprix*otherquant);
        });
        if ($('#vuepanier').html().length < 1) {
          $('#vuepanier').html("Mon panier est vide.");
          $('#total2').html(totalbase);
        }
        else {
          $('#total2').html(totaltotal);
        }
      }
      
      /*Fonction pour effacer le panier*/
      function effacer() {
        $('#vuepanier').html("Mon panier est vide.");
        $('#total2').html(totalbase);
      }
      
      /*Fonction pour poster le message*/
      function CompleteMessage() {
        var thetotalprice = totaltotal;
        var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
        $('.item_input').each(function(){
          var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
          var thesupername = $(this).find('.thename:first').html();
          var thequant = parseInt($(this).find('.input_nb_object:first').val());
          var thequantpricetotal = thequant * theprice;
          lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$ pour un total de "+thequantpricetotal+"$";
        });
        lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
        $('#message').val(lemessage);
      }
      //-->
    </script>

    </body></html>

    Vers la fin de la page html, tu dois retrouver ceci et modifier le "70" par le numéro du sujet que tu as créé pour la boutique (tu peux regarder dans la barre d'adresse. Par exemple, ce sujet a le numéro "65032") :
    Code:
    <input type="hidden" value="70" name="t">

    Enfin, tu va dans ton sujet et tu ajoutes l'iframe qui contient la page html en y mettant le lien de la page créée :
    Code:
    <iframe src="URL PAGE HTML" style="margin: auto; width: 700px; height: 900px; display: block; border: none;" /></iframe>



    • Revenir en haut
    Idril Palanén
    Idril Palanén
    FémininAge : 32Messages : 83

    Ven 25 Mai 2018 - 15:32

    Géniale, merci beaucoup ça marche ! Wink
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 4:05