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 :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 ...
Voir le deal
499 €

    Système de Boutique avec filtrage automatique

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 4 Juil 2016 - 6:56




    Système de Boutique avec filtrage 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 articles" et d'une partie "panier".

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

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

    Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option d'effacer le contenu du panier ainsi que d'ajouter/retirer un article.

    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é.

    PS : Quand je parle d'articles, je parle des trucs à vendre dans la boutique Wink

    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 lang="fr">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Boutique</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
      <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
      <style type="text/css">
        :root {
       
        /*Couleur background principal*/
        --bg-main: #efefef;
       
        /*Couleur background du titre*/
        --bg-top: #808080;
       
        /*Couleur background des articles*/
        --bg-article: #d3d3d3;
       
        /*Couleur background du panier*/
        --bg-panier: #e3e3e3;
       
        /*Couleur du texte*/
        --color-text: #707070;
       
        /*Couleur du texte pale*/
        --color-text-light: #efefef;
        }
       
        /*Corps*/
        body {
        margin: 0px;
        }
        /*Le bloc entier de la boutique*/
        #boutique {
        position: relative;
        margin: auto;
        max-width: 850px;
        background: var(--bg-main);
        font-size: 1em;
        font-family: 'Times New Roman';
        color: var(--color-text);
        text-align: center;
        }
        /*Le bloc du titre de la boutique*/
        .boutique_top {
        width: 100%;
        background: var(--bg-top);
        padding: 10px;
        font-size: 2em;
        text-align: center;
        color: var(--color-text-light);
        font-family: 'Dancing Script';
        box-sizing: border-box;
        }
        .boutique_reste {
        display: flex;
        flex-wrap: wrap;
        }
        /*Menu de gauche*/
        #menu {
        text-align: left;
        padding: 5px;
        width: 150px;
        border-right: 1px solid #808080;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        box-sizing: border-box;
        }
        /*Les boutons de tri*/
        .mbutton button, .mbutton {
        display: block;
          margin: 10px auto 0px auto;
        }
        .mlist {
        margin: 15px 0px 0px 10px;
        }
        /*Titres des catégories*/
        .mlist > span {
        display: inline-block;
        margin-bottom: 5px;
        border-bottom: 1px solid #707070;
        font-size: 1.1em;
        }
        /*Liste des options des catégories*/
        #menu ul {
        margin: 0px;
        list-style-type: none;
        padding: 0px;
        }
        /*Option des catégories*/
        #menu ul li {
        }
        /*Partie de droite*/
        .middle {
        width: 700px;
        margin: 10px auto;
        text-align: center;
        }
        #contenu_shoponglet_Autre {display: none;}
        .contenu_shoponglet {
        min-height: 450px;
        max-height: 650px;
        overflow: auto;
        display: flex;
        margin-bottom: 15px;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        }
        .contenu_shoponglet > div {
        margin: 10px;
        }
        /*Bloc qui contient l'article*/
        .article_bloc {
        text-align: center;
        background: var(--bg-article);
        width: 130px;
        padding: 5px;
        color: #565656;
        }
        /*Image de l'article*/
        .article_bloc > img:first-child {
        width: 100px;
        height: 100px;
        }
        /*Nom de l'article*/
        .article_name {
        padding: 5px 0px;
        font-size: 1.02em;
        font-family: 'Cambria';
        font-weight: bold;
        text-transform: uppercase;
        }
        /*Input du nombre d'article à acheter*/
        input[type="number"] {
        display: inline-block;
        max-width: 50px;
        text-align: center;
        margin-bottom: 2px;
        }
        /*Partie du panier*/
        .bottom {
        margin: auto;
        background: var(--bg-panier);
        text-align: center;
        overflow: hidden;
        }
        /*Titre du panier*/
        .bottom_top {
        font-size: 1.8em;
        font-family: 'Dancing Script', script;
        text-align: center;
        padding: 10px;
        background: var(--bg-top);
        color: var(--color-text-light);
        }
        /*Panier visible*/
        #vuepanier {
        margin: 10px auto;
        height: 120px;
        padding: 0px 5px;
        overflow: auto;
        }
        /*Bloc objet dans le panier*/
        .article_input {
        margin-bottom: 5px;
        background: var(--bg-article);
        padding: 2px;
        text-align: left;
        }
        /*Le bloc du nom et prix de l'objet dans le panier*/
        .articleinsidepanier {
        padding-left: 5px;
        }
        /*Les boutons dans le panier*/
        .article_input button, .input_nb_object {
        display: inline-block;
        margin-right: 2px;
        }
        /*La quantité de l'objet dans le panier*/
        .input_nb_object {
        width: 40px;
        text-align: center;
        }
        /*Bouton effacer et soumettre le panier*/
        #soumettrepanier, #effacerpanier {
        display: inline-block;
        margin: 10px auto 5px auto;
        }
        /*Bouton soumettre le panier*/
        #effacerpanier {
        margin-right: 15px;
        }
        /*Credit*/
        .credits {
        display: inline-block;
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 2px;
        left: 5px;
        text-align: left;
        text-decoration: none;
        color: #454545;
        }
        .credits:hover {
        color: #000000;
        }
        /* Sur les écrans de moins de 700px (cellulaires) */
        @media (max-width: 700px) {
          #menu {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #808080;
          }
          .middle {
            width: 100%;
          }
          .contenu_shoponglet {
            max-height: none;
          }
        }
      </style>
    </head>
    <body>
      <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
        <div class="boutique_top">Boutique Alibaba</div>
        <div class="boutique_reste">

          <!-- DÉBUT DU MENU POUR FILTRER -->
          <div id="menu">
            <div class="mbutton">
              <button id="trier2" type="button" onclick="notriage()">Réinitialiser les filtres</button>
              <button id="trier" type="button" onclick="triage()">Filtrer les Articles</button>
            </div>

            <!-- DÉBUT CATÉGORIE TYPE -->
            <div class="mlist">
              <span>Type</span>
              <ul>
                <!-- 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>
            </div>
            <!-- FIN CATÉGORIE TYPE -->

            <!-- DÉBUT CATÉGORIE PRIX -->
            <div class="mlist">
              <span>Prix</span>
              <ul>
                <!-- 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_5000" />
                  [1000 et 5000]
                </li>
                <!-- OPTION #5 -->
                <li>
                  <input type="checkbox" name="Min5000" />
                  Plus de 5000
                </li>
              </ul>
            </div>
            <!-- FIN CATÉGORIE PRIX -->
           
            <!-- DÉBUT CATÉGORIE RARETÉ -->
            <div class="mlist">
              <span>Prix</span>
              <ul>
                <!-- OPTION #1 -->
                <li>
                  <input type="checkbox" name="Commun" />
                  Commun
                </li>
                <!-- OPTION #2 -->
                <li>
                  <input type="checkbox" name="Peucommun" />
                  Peu commun
                </li>
                <!-- OPTION #3 -->
                <li>
                  <input type="checkbox" name="Rare" />
                  Rare
                </li>
                <!-- OPTION #4 -->
                <li>
                  <input type="checkbox" name="Tresrare" />
                  Très rare
                </li>
                <!-- OPTION #5 -->
                <li>
                  <input type="checkbox" name="Unique" />
                  Unique
                </li>
              </ul>
            </div>
            <!-- FIN CATÉGORIE RARETÉ -->

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

          <div class="middle">
            <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
             
              <!-- DÉBUT ARTICLE -->
              <div class="Arme Max99 Commun">
                <div class="article_bloc">
                  <img src="URL_IMAGE" /><br />
                  <span class="article_name">Nom de l'article</span><br />
                  Type - Rareté<br />
                  Prix : <span class="nbprix">400</span>$<br /><br />
                  <input type="number" value="1" min="1" /><br />
                  <button class="ajoutprix" type="button">Acheter</button>
                </div>
              </div>

              <div class="Arme Max99 Commun">
                <div class="article_bloc">
                  <img src="URL_IMAGE" /><br />
                  <span class="article_name">Nom de l'article</span><br />
                  Type - Rareté<br />
                  Prix : <span class="nbprix">400</span>$<br /><br />
                  <input type="number" value="1" min="1" /><br />
                  <button class="ajoutprix" type="button">Acheter</button>
                </div>
              </div>
              <!-- FIN ARTICLE -->

            </div>
            <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
            </div>
         
            <div class="bottom">
              <div class="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
              <div id="vuepanier">Mon panier est vide.</div>
            </div>
            <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" />
            <a class="credits" href="https://www.never-utopia.com/forum" target="_blank">Never-Utopia</a>
          </div>
        </div>
      </form>
    <script type="text/javascript">
      //<!--
      let totalbase = 0;
      $('#total2').html(totalbase);
      let totaltotal = 0;
     
      // Quand on ajoute un article au panier
      $('.ajoutprix').click(function() {
        let prix = parseInt($(this).parent().find('.nbprix:first').html());
        let qt = parseInt($(this).parent().find('input:first').val());
        let nomarticle = $(this).parent().find('.article_name:first').html();
        if ($('#vuepanier').find('.thename:contains("'+nomarticle+'")').length > 0) {
          $('#vuepanier').find('.thename:contains("'+nomarticle+'"):first').closest('.article_input').remove();
        }
        let phrase = "<div class='article_input'>" +
          "<button type='button' class='button_delete' onclick='deleteqtarticle(this)'>x</button>" +
          "<button type='button' class='button_moins' onclick='removeqtarticle(this)'>-</button>" +
          "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
          "<button type='button' class='button_plus' onclick='addqtarticle(this)'>+</button>" +
          "<span class='articleinsidepanier'><span class='thename'>"+nomarticle+"</span>" +
          " à <span class='thepriceinside'>"+prix+"</span>$</div>";
        if ($('#vuepanier').html() != "Mon panier est vide.") {
          phrase = $('#vuepanier').html() + phrase;
        }
        $('#vuepanier').html(phrase);
        calcultotal();
      });
     
      // Ajouter un article déjà dans le panier
      function addqtarticle(learticle) {
        let articleval = parseInt($(learticle).prev().val());
        $(learticle).prev().val((articleval + 1));
        calcultotal();
      }
     
      // Enlever un article déjà dans le panier
      function removeqtarticle(learticle) {
        let articleval = parseInt($(learticle).next().val());
        $(learticle).next().val((articleval - 1));
        if (articleval == 1) {
          $(learticle).parent().remove();
        }
        calcultotal();
      }
     
      // Supprimer un article déjà dans le panier
      function deleteqtarticle(learticle) {
        $(learticle).parent().remove();
        calcultotal();
      }
     
      // Fonction pour calculer
      function calcultotal() {
        totaltotal = 0;
        $('.article_input').each(function(){
          let leprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
          let lenb = parseInt($(this).find('.input_nb_object:first').val());
          totaltotal = totaltotal + (leprix*lenb);
        });
        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() {
        let thetotalprice = totaltotal;
        let lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
        $('.article_input').each(function(){
          let theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
          let thesupername = $(this).find('.thename:first').html();
          let thequant = parseInt($(this).find('.input_nb_object:first').val());
          lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$";
        });
        lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
        $('#message').val(lemessage);
      }
      //-->
    </script>
    <script type="text/javascript">
      //<!--
      // Nombre de catégories
      let nbtype = $('#menu').find('ul').length;
     
      // Fonction pour effacer le tri
      function notriage() {
        $('#menu').find('input:checked').prop('checked', false);
        $('#contenu_shoponglet_Tout').css('display', 'flex');
        $('#contenu_shoponglet_Autre').css('display', 'none');
      }
     
      // Fonction du tri
      function triage() {
        // On se débarrasse des articles déjà triés
        $('#contenu_shoponglet_Autre').html('');
        // Si aucune case est cochée, on a l'affichage de base
        if ($('#menu').find('input:checked').length < 1) {
          notriage();
        }
        else {
          // Tableau qui va contenir toutes les cases cochées
          let validation = [];
          /// Pour chaque catégorie on regarde s'il y a les cases cochée et on les met dans le tableau par catégorie
          for (i=0; i < nbtype; i++) {
            validation[i] = [];
            let lescases = $('#menu ul').eq(i).find('input:checked');
            for (y=0; y < lescases.length; y++) {
              validation[i][y] = lescases.eq(y).attr('name');
            }
          }
          // Pour chaque objet, on va faire la validation pour voir si on la prend
          let lesarticles = $('#contenu_shoponglet_Tout > div');
          // Pour chaque article
          for (i=0; i < lesarticles.length; i++) {
            let leok = 'No';
            let learticle = lesarticles.eq(i);
            // On regarde chaque catégorie
            for (y=0; y < nbtype; y++) {
              // Si la catégorie a des cases cochées, on autorise si l'article a la  d'une des class
              if (validation[y].length > 0) {
                let leok1 = 'No';
                for (x=0; x < validation[y].length; x++) {
                  if (learticle.hasClass(validation[y][x])) {
                    leok1 = "Oui";
                    x = validation[y].length;
                  }
                }
                if (leok1 == 'No') {
                  y = nbtype;
                  leok = 'No';
                }
                else {
                  leok = 'Oui';
                }
              }
            }
            // L'objet fait partie des options, on l'ajoute dans la liste d'objets triés
            if (leok == 'Oui') {
              $('#contenu_shoponglet_Autre').append(learticle.clone(true));
            }
          }
          // On fait disparaître la liste des objets pour apparaître celle des objets triés
          $('#contenu_shoponglet_Tout').css('display', 'none');
          $('#contenu_shoponglet_Autre').css('display', 'flex');
          //S'il y a 0 article à droite après le tri, on dit qu'il y a 0 résultat
          let pasarticle = $('#contenu_shoponglet_Autre').children().length;
          if (pasarticle < 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 (javascript - Système de Boutique avec filtrage automatique HAHlEmt), 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é, vous 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.




    2. Personnaliser la boutique



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

    Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'articles qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'articles est la liste des articles disponibles où vous pouvez indiquer le nombre d'articles à acheter et cliquer sur acheter pour que les articles s'ajoutent à votre panier. Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de réinitialiser 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 5 options :
    Code:
            <!-- DÉBUT CATÉGORIE RARETÉ -->
            <div class="mlist">
              <span>Prix</span>
              <ul>
                <!-- OPTION #1 -->
                <li>
                  <input type="checkbox" name="Commun" />
                  Commun
                </li>
                <!-- OPTION #2 -->
                <li>
                  <input type="checkbox" name="Peucommun" />
                  Peu commun
                </li>
                <!-- OPTION #3 -->
                <li>
                  <input type="checkbox" name="Rare" />
                  Rare
                </li>
                <!-- OPTION #4 -->
                <li>
                  <input type="checkbox" name="Tresrare" />
                  Très rare
                </li>
                <!-- OPTION #5 -->
                <li>
                  <input type="checkbox" name="Unique" />
                  Unique
                </li>
              </ul>
            </div>
            <!-- FIN CATÉGORIE RARETÉ -->

    Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options.

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

    Le "name" ne peut pas contenir d'espace, de guillemet, d'apostrophe, de ponctuation ou de caractères spéciaux.


    Donc si je résume rapidement, 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 articles (contenu d'onlglet "Tout"). Vous y trouverez des articles sous cette forme :
    Code:
              <div class="Arme Armure Max99 Commun">
                <div class="article_bloc">
                  <img src="URL_IMAGE" /><br />
                  <span class="article_name">Nom de l'article</span><br />
                  Type - Rareté<br />
                  Prix : <span class="nbprix">400</span>$<br /><br />
                  <input type="number" value="1" min="1" /><br />
                  <button class="ajoutprix" type="button">Acheter</button>
                </div>
              </div>

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

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

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

    Ici, j'ai 3 classes parce que l'article appartient à 4 options, soit "Arme", "Armure", "Max99" et "Commun". Cela veut dire que l'article sera sélectionné si on coche une ou plusieurs des options : "Arme", "Armure", "Moins de 100$" et "Commun".

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




    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 articles 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: 850px; 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 Mar 21 Sep 2021 - 5:29, édité 26 fois



    Rheah
    Rheah
    FémininAge : 27Messages : 148

    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
    Pull en Laine qui Gratte
    Pull en Laine qui Gratte
    FémininAge : 19Messages : 71

    Sam 21 Jan 2017 - 14:34

    WOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    Trop bien ! Bravo c'est magnifique ! Ça va m'aider ça !
    Anonymous
    Invité

    Sam 21 Jan 2017 - 23:39

    Merci pour le partage !
    Anonymous
    Invité

    Dim 12 Fév 2017 - 18:37

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

    Dim 19 Fév 2017 - 11:55

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

    Ven 10 Mar 2017 - 17:50

    wow, merci!! <3
    Tanchi
    Tanchi
    Age : 32Messages : 373

    Mar 14 Mar 2017 - 4:46

    Merci du partage :)



    javascript - Système de Boutique avec filtrage automatique 335854plop
    Hathaway
    Hathaway
    FémininAge : 27Messages : 45

    Lun 10 Avr 2017 - 20:53

    merci
    R.Falsworth
    R.Falsworth
    FémininAge : 27Messages : 92

    Ven 28 Avr 2017 - 16:10

    Ouuuah *-* trop génial ! Merci :3
    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Sam 13 Mai 2017 - 21:24

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

    Mar 30 Mai 2017 - 14:17

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

    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''
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    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:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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 :
    https://www.never-utopia.com/f177-probleme-avec-mon-code



    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Lun 16 Oct 2017 - 21:03

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

    Ven 27 Oct 2017 - 8:35

    wahou un sacré tuto ! Merci :)
    Fawadja
    Fawadja
    MasculinAge : 29Messages : 32

    Jeu 18 Jan 2018 - 0:51

    Mercii
    Noak
    Noak
    MasculinAge : 29Messages : 29

    Lun 19 Fév 2018 - 2:02

    Un énooorme merci pour ce système ! ~
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Lun 23 Avr 2018 - 12:53

    Wow! Merci!
    Meiywa
    Meiywa
    FémininAge : 32Messages : 81

    Dim 29 Avr 2018 - 18:00

    Merci pour cette magnifique boutique :heart:
    Ely Kyuh
    Ely Kyuh
    FémininAge : 30Messages : 33

    Dim 13 Mai 2018 - 5:02

    Wouah c'est super pratique et tes explications sont très claires, merci ! =)
    Rinka
    Rinka
    FémininAge : 27Messages : 8

    Ven 8 Juin 2018 - 16:22

    Wow mais c'est magique ça ! Merci beaucoup, il fallait y penser Very Happy
    Ode 14
    Ode 14
    FémininAge : 31Messages : 21

    Sam 21 Juil 2018 - 11:10

    Super pratique, merci !!
    lilissa
    lilissa
    FémininAge : 30Messages : 31

    Sam 28 Juil 2018 - 22:54

    wow super pratique et super intéressant à intégré pour les forum rpg ♥ merci beaucoup du partage ! s'était super bien pensé !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 17:03