AccueilFAQRechercherMembresGroupesS'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.


    Système de Boutique avec triage automatique

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 4 Juil 2016 - 6:56




    Système de Boutique avec triage automatique


    Salut !

    Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

    Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).

    La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier.

    Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

    Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.

    Pour voir la Boutique en direct : cliquez ici.
    Pour voir l'aperçu de la Boutique en image : cliquez ici.


    Ce LS est en quatre parties.
    • Tout d'abord, nous allons créer la boutique dans une page HTML.
    • Ensuite, nous allons voir comment la personnaliser.
    • Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
    • Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.


    Mettre un crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    1. Créer la boutique (Page HTML)


    Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES PAGES HTML

    Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
    On choisit un titre quelconque.
    On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

    On met le code suivant et on enregistre :
    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>
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></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: 10px;
        margin: auto;
        max-width: 850px;
        background-color: #efefef;
        border: 8px double #747474;
        border-left: 1px solid #747474;
        border-right: 1px solid #747474;
        font-size: 14px;
        font-family: 'Times New Roman';
        color: #707070;
        text-align: center;
        }
        /*Le bloc du titre de la boutique*/
        #boutique_top {
        padding: 10px;
        font-size: 26px;
        font-family: 'Dancing Script', script;
        text-align: center;
        border-bottom: 1px solid #747474;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
        text-align: left;
        padding-top: 5px;
        width: 150px;
        height: 825px;
        margin-right: 10px;
        padding-left: 5px;
        border-right: 1px solid #747474;
        }
        /*Les boutons de tri*/
        #trier, #trier2 {
        display: block;
        margin: auto;
        }
        /*Titres des catégories*/
        .menu_title {
        display: inline-block;
        margin-left: 20px;
        border-bottom: 1px solid #707070;
        color: #707070;
        font-size: 16px;
        }
        /*Liste des options des catégories*/
        #menu ul {
        margin-top: 5px;
        margin-bottom: 10px;
        list-style-type:none;
        }
        /*Option des catégories*/
        #menu ul li {
        margin-left: -30px;
        }
        /*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;
        padding: 10px;
        }
        /*Bloc qui contient l'item*/
        .item_bloc {
        display: inline-block;
        vertical-align: top;
        background-color: #cfcfcf;
        box-shadow: 0px 0px 10px #353535;
        width: 130px;
        padding: 5px;
        color: #565656;
        }
        /*Image de l'item*/
        .item_bloc > img:first-child {
        display: inline-block;
        width: 100px;
        height: 100px;
        }
        /*Nom de l'item*/
        .item_name {
        padding: 5px;
        font-size: 16px;
        font-family: 'Cambria';
        font-weight: bold;
        text-transform: uppercase;
        }
        /*Input du nombre d'item à acheter*/
        input[type="number"] {
        display: inline-block;
        max-width: 50px;
        border: 1px solid #a3a3a3;
        background-color: #efefef;
        text-align: center;
        margin-bottom: 2px;
        }
        /*Partie du panier*/
        #bottom {
        position: relative;
        display: inline-block;
        margin: auto;
        width: 510px;
        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: 500px;
        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: 500px;
        height: 100px;
        background-color: #efefef;
        padding: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        color: #565656;
        text-align: justify;
        overflow: auto;
        }
        /*Panier invisible*/
        #panier {
        display: none;
        border: none;
        }
        /*Bouton effacer et soumettre le panier*/
        #soumettrepanier, #effacerpanier {
        display: inline-block;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 5px;
        }
        /*Bouton soumettre le panier*/
        #effacerpanier {
        margin-right: 15px;
        }
        /*Credit*/
        .credits {
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 2px;
        left: 2px;
        text-align: left;
        }
        a {
        text-decoration: none;
        color: #454545;
        }
        a:hover {
        color: #000000;
        }
      </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="boutique_top"><div id="badam"></div>
          La boutique de <span class="FORUMNAME"></span>
        </div>

        <!-- DÉBUT DU MENU POUR TRIER -->
        <div id="menu">
          <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
          <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

          <!-- DÉBUT CATÉGORIE TYPE -->
          <span class="menu_title">Type</span>
          <ul id="Type">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Arme" />
              Armes
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Armure" />
              Armures
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Accessoire" />
              Accessoires
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Objet" />
              Objets
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Magie" />
              Magie
            </li>
          </ul>
          <!-- FIN CATÉGORIE TYPE -->

          <!-- DÉBUT CATÉGORIE NIVEAU -->
          <span class="menu_title">Niveau</span>
          <ul id="Niveau">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Niv1" />
              Niveau 1
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Niv2" />
              Niveau 2
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Niv3" />
              Niveau 3
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Niv4" />
              Niveau 4
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Niv5" />
              Niveau 5
            </li>
          </ul>
          <!-- FIN CATÉGORIE NIVEAU -->

          <!-- DÉBUT CATÉGORIE PRIX -->
          <span class="menu_title">Prix</span>
          <ul id="Prix">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Max99" />
              Moins que 100
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="100_499" />
              [100 et 499]
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="500_999" />
              [500 et 999]
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="1000_4999" />
              [1000 et 4999]
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="5000_10000" />
              [5000 et 10000]
            </li>
            <!-- OPTION #6 -->
            <li><input type="checkbox" name="Min10000" />
              Plus de 10000
            </li>
          </ul>
          <!-- FIN CATÉGORIE PRIX -->

          <!-- DÉBUT CATÉGORIE RARETÉ -->
          <span class="menu_title">Rareté</span>
          <ul id="Rarete">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
          <!-- FIN CATÉGORIE RARETÉ -->

        </div>
        <!-- FIN DU MENU POUR TRIER -->

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

            <!-- DÉBUT ITEM -->
          <div class="Arme Max99 Commun Niv1">
              <div class="item_bloc">
                <img src="URL DE ITEM" /><br />
                <span class="item_name">Nom de l'item</span><br />
                Type Niveau<br />
                Rareté<br />
                Prix : <span class="nbprix">XXX</span>$<br /><br />
                <input type="number" value="1" min="1" /><br />
                <button class="ajoutprix" type="button">Acheter</button>
              </div>
            </div>
            <!-- FIN ITEM -->

          </div>
          <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
          </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>
          <textarea id="panier"></textarea>
        </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="total" id="total" style="display:none"></textarea>
        <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);
      $('#total').val(totalbase);
      var totaltotal = [];
      $('.ajoutprix').click(function() {
        var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
        var qt = parseInt($(this).parent().find('input').eq(0).val());
        var total = qt*prix;
        var nomitem = $(this).parent().find('.item_name').eq(0).html();
        var phrase = qt+" "+nomitem+" à "+prix+"$ pour un total de "+total+"$<br />";
        totaltotal.push(total);
        var nbtotal = totaltotal.length;
        var vraitotal = 0;
        for (i = 0; i < nbtotal; i++) {
          vraitotal = vraitotal+totaltotal[i];
        }
        $('#total').val(vraitotal);
        $('#total2').html(vraitotal);
        if ($('#panier').val().length < 1) {
          $('#panier').val(phrase);
        }
        else {
          var ajoutphrase = $('#panier').val();
          ajoutphrase = ajoutphrase+phrase;
          $('#panier').val(ajoutphrase);
        }
        var machinchose = $('#panier').val();
        $('#vuepanier').html(machinchose);
      });
      function effacer() {
        $('#vuepanier').html("Votre panier est vide.");
        $('#panier').val("");
        var nbtotal = totaltotal.length;
        for (i = 0; i < nbtotal; i++) {
        totaltotal[i] = 0;
        $('#total').val(totalbase);
        $('#total2').html(totalbase);
        }
      }
      function CompleteMessage() {
          document.getElementById('message').value = "Bonjour,<br /><br /> J'aimerais acheter les articles suivants s'il vous plaît :<br /><br />" +
          document.getElementById('panier').value +
          "<br />Le coût total de ma commande est de : " +
          document.getElementById('total').value +
          "$.";
      }
      //-->
    </script>
    <script type="text/javascript">
      //<!--
      function notriage(){
        $('#menu').find('input:checked').prop( "checked", false );
        $('#contenu_shoponglet_Tout').css("display", "block");
        $('#contenu_shoponglet_Autre').html("");
      }
      
      /*Nombre de catégories*/
      var nbtype = $("#menu").find("ul").length;
      
      /*Fonction triage*/
      function triage() {
      
        /*On trouve le nombre de cases cochées*/
        var totalcheck = $('#menu').find('input:checked').length;
        /*On se débarasse des items déjà triés*/
        $('#contenu_shoponglet_Autre').html("");
      
        /*Si aucune case est cochée*/
        if (totalcheck < 1) {
          /*On garde tous les items*/
          $('#contenu_shoponglet_Tout').css("display", "block");
        }
        /*Sinon*/
        else {
          /*On fait disparaître la liste complète*/
          $('#contenu_shoponglet_Tout').css("display", "none");
          /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
          var nomtypech = [];
          /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
          for (i = 0; i < nbtype; i++) {
            var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
            if (nbcatcheckcal > 0) {
              var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
              nomtypech.push(nomtype);
            }
          }
          /*Nombre de catégories qui ont une case cochée*/
          var qunomtypech = nomtypech.length;
          /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
          var nbnomcatch = [];
          /*Tableau qui contient le name de chaque case cochée*/
          var nomcatch = [];
          for (i = 0; i < qunomtypech; i++) {
            /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
            nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
            for (y = 0; y < nbnomcatch[i]; y++) {
              /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
              var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
              nomcatch.push(truc1);
            }
          }
          /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
          var banane = 0;
      
          /*Pour chaque catégorie où il y a une case cochée...*/
          for (i = 0; i < qunomtypech; i++) {
            /*Si on est à la 1ère catégorie*/
            if (i < 1) {
              /*Pour chaque case cochée de la 1ère catégorie...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Si on est la première case cochée de la 1ère catégorie*/
                if (banane < 1) {
                  /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ses items on le met dans la partie de droite*/
                  for (z = 0; z < machin; z++) {
                    $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
                /*Si on est la xème case cochée de la 1ère catégorie*/
                else {
                  /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ces items...*/
                  for (z = 0; z < machin; z++) {
                    /*Item que on est en train de regarder*/
                    var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                    /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                    var autretruc = 0;
                    /*Pour chaque name qui est avant le name que on regarde présentement...*/
                    for (w = 0; w < banane; w++) {
                      /*Name où on est rendu à vérifier*/
                      var pamplemousse = nomcatch[w];
                      /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                      if (bamibam.hasClass(pamplemousse)) {
                        /*on ajoute 1 à la variable autretruc*/
                        autretruc = autretruc + 1;
                      }
                    }
                    /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                    if (autretruc < 1) {
                    /*On ajoute le item à la zone de droite*/
                      bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                    }
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
              }
            }
            /*Si on est pas la 1ère catégorie qui a une case cochée...*/
            else {
              /*On regarde le nombre de item dans la partie de droite*/
              var chose12 = $('#contenu_shoponglet_Autre').children().length;
              /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
              var calculenlever = [];
              /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
              for (z = 0; z < chose12; z++) {
                calculenlever[z] = 0;
              }
              /*Pour chaque case cochée de la catégorie où on est rendue...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Pour chaque item qui est dans la liste de droite...*/
                for (z = 0; z < chose12; z++) {
                  /*On regarde le xème item de droite*/
                  var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
                  /*Name de la case où on est rendu*/
                  var tomate = nomcatch[banane];
                  /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
                  if (fraise.hasClass(tomate)) {
                    calculenlever[z] = calculenlever[z] + 1;
                  }
                }
                /*On passe à la case suivante*/
                banane = banane + 1;
              }
              /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
              for (y = 0; y < chose12; y++) {
                if (calculenlever[y] < 1) {
                  $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
                }
              }
              /*On détruit les items à droite qui ont la classe Detruire*/
              $('#contenu_shoponglet_Autre').children('.Detruire').remove();
            }
          }
          /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
          var kiwi = $('#contenu_shoponglet_Autre').children().length;
          if (kiwi < 1) {
            $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
          }
        }
      }
      //-->
    </script>
    </body>
    </html>

    Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


    Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

    Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.

    Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
    Code:
       <input type="hidden" value="70" name="t" />

    Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.




    2e version de la Boutique:
    Suite à un commentaire de Roz comme quoi ce serait bien de pouvoir modifier un peu plus les objets une fois qu'ils sont dans le panier, j'ai fait une nouvelle version qui donne cet aperçu juste ici.

    Le code reste très semblable à l’exception du javascript alors la personnalisation sera la même avec les deux versions.

    Voilà le code à mettre de la même façon que celui de la première version :
    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>
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></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: 10px;
        margin: auto;
        max-width: 850px;
        background-color: #efefef;
        border: 8px double #747474;
        border-left: 1px solid #747474;
        border-right: 1px solid #747474;
        font-size: 14px;
        font-family: 'Times New Roman';
        color: #707070;
        text-align: center;
        }
        /*Le bloc du titre de la boutique*/
        #boutique_top {
        padding: 10px;
        font-size: 26px;
        font-family: 'Dancing Script', script;
        text-align: center;
        border-bottom: 1px solid #747474;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
        text-align: left;
        padding-top: 5px;
        width: 150px;
        height: 825px;
        margin-right: 10px;
        padding-left: 5px;
        border-right: 1px solid #747474;
        }
        /*Les boutons de tri*/
        #trier, #trier2 {
        display: block;
        margin: auto;
        }
        /*Titres des catégories*/
        .menu_title {
        display: inline-block;
        margin-left: 20px;
        border-bottom: 1px solid #707070;
        color: #707070;
        font-size: 16px;
        }
        /*Liste des options des catégories*/
        #menu ul {
        margin-top: 5px;
        margin-bottom: 10px;
        list-style-type:none;
        }
        /*Option des catégories*/
        #menu ul li {
        margin-left: -30px;
        }
        /*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;
        padding: 10px;
        }
        /*Bloc qui contient l'item*/
        .item_bloc {
        display: inline-block;
        vertical-align: top;
        background-color: #cfcfcf;
        box-shadow: 0px 0px 10px #353535;
        width: 130px;
        padding: 5px;
        color: #565656;
        }
        /*Image de l'item*/
        .item_bloc > img:first-child {
        display: inline-block;
        width: 100px;
        height: 100px;
        }
        /*Nom de l'item*/
        .item_name {
        padding: 5px;
        font-size: 16px;
        font-family: 'Cambria';
        font-weight: bold;
        text-transform: uppercase;
        }
        /*Input du nombre d'item à acheter*/
        input[type="number"] {
        display: inline-block;
        max-width: 50px;
        border: 1px solid #a3a3a3;
        background-color: #efefef;
        text-align: center;
        margin-bottom: 2px;
        }
        /*Partie du panier*/
        #bottom {
        position: relative;
        display: inline-block;
        margin: auto;
        width: 510px;
        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: 500px;
        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: 500px;
        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;
        }
        /*Bouton soumettre le panier*/
        #effacerpanier {
        margin-right: 15px;
        }
        /*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="boutique_top"><div id="badam"></div>
          La boutique de <span class="FORUMNAME"></span>
        </div>

        <!-- DÉBUT DU MENU POUR TRIER -->
        <div id="menu">
          <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
          <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

          <!-- DÉBUT CATÉGORIE TYPE -->
          <span class="menu_title">Type</span>
          <ul id="Type">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Arme" />
              Armes
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Armure" />
              Armures
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Accessoire" />
              Accessoires
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Objet" />
              Objets
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Magie" />
              Magie
            </li>
          </ul>
          <!-- FIN CATÉGORIE TYPE -->

          <!-- DÉBUT CATÉGORIE NIVEAU -->
          <span class="menu_title">Niveau</span>
          <ul id="Niveau">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Niv1" />
              Niveau 1
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Niv2" />
              Niveau 2
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Niv3" />
              Niveau 3
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Niv4" />
              Niveau 4
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Niv5" />
              Niveau 5
            </li>
          </ul>
          <!-- FIN CATÉGORIE NIVEAU -->

          <!-- DÉBUT CATÉGORIE PRIX -->
          <span class="menu_title">Prix</span>
          <ul id="Prix">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Max99" />
              Moins que 100
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="100_499" />
              [100 et 499]
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="500_999" />
              [500 et 999]
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="1000_4999" />
              [1000 et 4999]
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="5000_10000" />
              [5000 et 10000]
            </li>
            <!-- OPTION #6 -->
            <li><input type="checkbox" name="Min10000" />
              Plus de 10000
            </li>
          </ul>
          <!-- FIN CATÉGORIE PRIX -->

          <!-- DÉBUT CATÉGORIE RARETÉ -->
          <span class="menu_title">Rareté</span>
          <ul id="Rarete">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
          <!-- FIN CATÉGORIE RARETÉ -->

        </div>
        <!-- FIN DU MENU POUR TRIER -->

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

            <!-- DÉBUT ITEM -->
          <div class="Arme Max99 Commun Niv1">
              <div class="item_bloc">
                <img src="URL DE ITEM" /><br />
                <span class="item_name">Nom de l'item</span><br />
                Type Niveau<br />
                Rareté<br />
                Prix : <span class="nbprix">XXX</span>$<br /><br />
                <input type="number" value="1" min="1" /><br />
                <button class="ajoutprix" type="button">Acheter</button>
              </div>
            </div>
            <!-- FIN ITEM -->

          </div>
          <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
          </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>
    <script type="text/javascript">
      //<!--
      function notriage(){
        $('#menu').find('input:checked').prop( "checked", false );
        $('#contenu_shoponglet_Tout').css("display", "block");
        $('#contenu_shoponglet_Autre').html("");
      }
     
      /*Nombre de catégories*/
      var nbtype = $("#menu").find("ul").length;
     
      /*Fonction triage*/
      function triage() {
     
        /*On trouve le nombre de cases cochées*/
        var totalcheck = $('#menu').find('input:checked').length;
        /*On se débarasse des items déjà triés*/
        $('#contenu_shoponglet_Autre').html("");
     
        /*Si aucune case est cochée*/
        if (totalcheck < 1) {
          /*On garde tous les items*/
          $('#contenu_shoponglet_Tout').css("display", "block");
        }
        /*Sinon*/
        else {
          /*On fait disparaître la liste complète*/
          $('#contenu_shoponglet_Tout').css("display", "none");
          /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
          var nomtypech = [];
          /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
          for (i = 0; i < nbtype; i++) {
            var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
            if (nbcatcheckcal > 0) {
              var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
              nomtypech.push(nomtype);
            }
          }
          /*Nombre de catégories qui ont une case cochée*/
          var qunomtypech = nomtypech.length;
          /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
          var nbnomcatch = [];
          /*Tableau qui contient le name de chaque case cochée*/
          var nomcatch = [];
          for (i = 0; i < qunomtypech; i++) {
            /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
            nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
            for (y = 0; y < nbnomcatch[i]; y++) {
              /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
              var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
              nomcatch.push(truc1);
            }
          }
          /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
          var banane = 0;
     
          /*Pour chaque catégorie où il y a une case cochée...*/
          for (i = 0; i < qunomtypech; i++) {
            /*Si on est à la 1ère catégorie*/
            if (i < 1) {
              /*Pour chaque case cochée de la 1ère catégorie...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Si on est la première case cochée de la 1ère catégorie*/
                if (banane < 1) {
                  /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ses items on le met dans la partie de droite*/
                  for (z = 0; z < machin; z++) {
                    $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
                /*Si on est la xème case cochée de la 1ère catégorie*/
                else {
                  /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ces items...*/
                  for (z = 0; z < machin; z++) {
                    /*Item que on est en train de regarder*/
                    var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                    /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                    var autretruc = 0;
                    /*Pour chaque name qui est avant le name que on regarde présentement...*/
                    for (w = 0; w < banane; w++) {
                      /*Name où on est rendu à vérifier*/
                      var pamplemousse = nomcatch[w];
                      /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                      if (bamibam.hasClass(pamplemousse)) {
                        /*on ajoute 1 à la variable autretruc*/
                        autretruc = autretruc + 1;
                      }
                    }
                    /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                    if (autretruc < 1) {
                    /*On ajoute le item à la zone de droite*/
                      bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                    }
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
              }
            }
            /*Si on est pas la 1ère catégorie qui a une case cochée...*/
            else {
              /*On regarde le nombre de item dans la partie de droite*/
              var chose12 = $('#contenu_shoponglet_Autre').children().length;
              /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
              var calculenlever = [];
              /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
              for (z = 0; z < chose12; z++) {
                calculenlever[z] = 0;
              }
              /*Pour chaque case cochée de la catégorie où on est rendue...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Pour chaque item qui est dans la liste de droite...*/
                for (z = 0; z < chose12; z++) {
                  /*On regarde le xème item de droite*/
                  var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
                  /*Name de la case où on est rendu*/
                  var tomate = nomcatch[banane];
                  /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
                  if (fraise.hasClass(tomate)) {
                    calculenlever[z] = calculenlever[z] + 1;
                  }
                }
                /*On passe à la case suivante*/
                banane = banane + 1;
              }
              /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
              for (y = 0; y < chose12; y++) {
                if (calculenlever[y] < 1) {
                  $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
                }
              }
              /*On détruit les items à droite qui ont la classe Detruire*/
              $('#contenu_shoponglet_Autre').children('.Detruire').remove();
            }
          }
          /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
          var kiwi = $('#contenu_shoponglet_Autre').children().length;
          if (kiwi < 1) {
            $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
          }
        }
      }
      //-->
    </script>
    </body>
    </html>



    2. Personnaliser la boutique


    Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

    Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier. Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

    Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.


    Voilà un exemple de 1 catégorie avec 4 options :
    Code:
          <!-- DÉBUT CATÉGORIE RARETÉ -->
          <span class="menu_title">Rareté</span>
          <ul id="Rarete">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
          <!-- FIN CATÉGORIE RARETÉ -->

    Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options. La liste (le ul) a un id qui sert à indiquer quel est la catégorie. Chaque catégorie doit avoir un id différent des autres catégories.

    Ensuite, chaque option est sous cette forme :
    Code:
            <!-- OPTION # -->
            <li><input type="checkbox" name="Unique" />
              Unique
            </li>

    Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".

    Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'item qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.

    Donc si je résume rapidement, chaque catégorie à son propre "id" qui est unique à cette catégorie et qui ne doit pas se répéter ailleurs.
    Ensuite, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.




    Ensuie, on passe à la section où il y a tous les items (contenu d'onlglet "Tout"). Vous y trouverez des items sous cette forme :
    Code:
            <!-- DÉBUT ITEM -->
           <div class="Arme Max99 Commun Niv1">
              <div class="item_bloc">
                <img src="URL DE ITEM" /><br />
                <span class="item_name">Nom de l'item</span><br />
                Type Niveau<br />
                Rareté<br />
                Prix : <span class="nbprix">XXX</span>$<br /><br />
                <input type="number" value="1" min="1" /><br />
                <button class="ajoutprix" type="button">Acheter</button>
              </div>
            </div>
            <!-- FIN ITEM -->

    Vous voyez que la classe de la première div contient plusieurs classes :
    Code:
    <div class="Arme Max99 Commun Niv1">

    Ces classes correspondent aux options auxquelles l'item appartient. Du coup, quand vous créez votre item, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'item appartient et vous le mettez dans la classe de l'item.

    Un item peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.

    Ici, j'ai 4 classes parce que l'item appartient à 4 options, soit Arme, Max99, Commun et Niv1. Cela fait que l'item appartient à ces options : Arme, Niveau 1, Moins de 100$ et Commun.

    Vous pouvez changez l'image de l'item en mettant le lien de votre image dans "URL DE ITEM".
    Vous pouvez également changer le nom de l'item et ses attibuts (Type, niveau, rareté).
    Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'item.




    Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les items Wink



    3. Activer les formulaires externes


    Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

    Pour éviter cela, vous devez vous rendre sur :
    > Panneau d'administration
    > > Général
    > > > Forum
    > > > > Sécurité

    Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

    L'erreur n°230 ne devrait maintenant plus vous causer problème ~



    4. Mettre la boutique dans un iframe


    Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.

    Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
    Code:
    <iframe style="display: block; height: 1000px; width: 700px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>

    Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

    Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

    Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)





    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

    À plus !


    Dernière édition par Onyx le Ven 14 Avr 2017 - 1:19, édité 14 fois



    avatar
    FAUCHEUSE ☠
    FémininAge : 21Messages : 70

    le Lun 9 Jan 2017 - 20:02

    Coucou :3
    Merci pour ce LS extraordinairement pratique et bien pensé :omg: J'avais des trucs à faire cet aprem mais au lieu de ça j'ai juste procrastiné codé tout ça pour mon forum et c'est super :omg: Je pense que j'ai réussi à capter la partie javascript qui m'a donné un peu de fil à retordre au début, je me suis permis de rajouter un champ "input" dont j'avais besoin pour deux des objets de ma boutique qui demandaient des précisions (les animaux, si ça vous intéresse, en l'occurrence j'avais besoin d'un champ pour que les membres puissent préciser quel animal), du coup j'ai bidouillé quelques trucs et ça donne ça :
    http://www.peekaboo-rpg.com/t17-boutique-acquerir-des-objets
    Il faut juste que je termine de la remplir et que je pense à rajouter le crédit avant de la mettre sur mon forum :face:

    Enfin bref je me suis bien embrouillé le cerveau mais ça valait le coup parce que ça rend super ! Merci encore :3



    Dernière édition par FAUCHEUSE ☠ le Sam 21 Jan 2017 - 14:36, édité 1 fois
    avatar
    Pull en Laine qui Gratte
    FémininAge : 12Messages : 71

    le Sam 21 Jan 2017 - 14:34

    WOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    Trop bien ! Bravo c'est magnifique ! Ça va m'aider ça !
    avatar
    Kelalin
    FémininAge : 25Messages : 1703

    le Sam 21 Jan 2017 - 23:39

    Merci pour le partage !
    avatar
    Yuki Kaga
    FémininAge : 17Messages : 265

    le Dim 12 Fév 2017 - 18:37

    WOAW c'est trop bien pensé ! <3 Merci pour le partage !
    avatar
    Sighild
    FémininAge : 30Messages : 149

    le Dim 19 Fév 2017 - 11:55

    Trop classe! Et super pratique. Merci beaucoup.
    avatar
    Memorian
    FémininAge : 23Messages : 52

    le Ven 10 Mar 2017 - 17:50

    wow, merci!! <3
    avatar
    Tanchi
    Age : 26Messages : 365

    le Mar 14 Mar 2017 - 4:46

    Merci du partage :)



    avatar
    Hathaway
    FémininAge : 20Messages : 45

    le Lun 10 Avr 2017 - 20:53

    merci
    avatar
    R.Falsworth
    FémininAge : 21Messages : 92

    le Ven 28 Avr 2017 - 16:10

    Ouuuah *-* trop génial ! Merci :3
    avatar
    KimmyKinder
    FémininAge : 16Messages : 179

    le Sam 13 Mai 2017 - 21:24

    C'est vraiment génialissime, j'ai jamais vu un tel code! Bravo!! ♥
    avatar
    John:
    MasculinAge : 24Messages : 56

    le Mar 30 Mai 2017 - 14:17

    Cool mais j'ai des bugs Sad
    avatar
    John:
    MasculinAge : 24Messages : 56

    le Mar 30 Mai 2017 - 14:28

    Bonjour, pourquoi quand j'achète un article puis je clique sur Soumettre mon panier ça me fait un message d'erreur ?
    ''Vous devez sélectionner le sujet auquel répondre''
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1361

    le Lun 26 Juin 2017 - 16:51

    Merci Onyx pour ce code, mais aussi un gros merci d'avoir partagé la seconde version avec la possibilité d'ajouter, enlever et supprimer des items directement dans le panier. C'est juste géniale et ça fait gagner du temps. :lovebomb: :chomp:

    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mer 28 Juin 2017 - 23:51

    Merci pour vos commentaires ^^

    John > Pour les problèmes/bug, il y les problèmes de code, comme dit dans mon premier message :
    http://www.never-utopia.com/f177-probleme-avec-mon-code



    avatar
    Piratress
    FémininAge : 20Messages : 213

    le Lun 16 Oct 2017 - 21:03

    Merci beaucoup, c'est vraiment très bien pensé !
    Toxinou
    FémininAge : 26Messages : 26

    le Ven 27 Oct 2017 - 8:35

    wahou un sacré tuto ! Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 1:58