AccueilRechercherS'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 filtrage automatique

    Onyx
    Onyx
    FémininAge : 28Messages : 3349

    Lun 4 Juil 2016 - 6:56

    Rappel du premier message :




    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 (Système de Boutique avec filtrage automatique - Page 2 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



    gwenM
    gwenM
    FémininAge : 25Messages : 278

    Lun 13 Mai 2019 - 20:56

    merci
    Illeanëlia
    Illeanëlia
    FémininAge : 35Messages : 393

    Jeu 30 Mai 2019 - 8:58

    Merci pour ce partage c'est super pratique et très bien pensé ^^
    Hancok
    Hancok
    FémininAge : 37Messages : 1323

    Dim 9 Juin 2019 - 13:26

    Hello, c'est vraiment super ce partage, j'adore, merci beaucoup.




    Système de Boutique avec filtrage automatique - Page 2 A67g
    Sybline
    Sybline
    FémininAge : 35Messages : 27

    Mar 10 Déc 2019 - 21:00

    Il est super ^^ merci ^^
    Nasträlya
    Nasträlya
    FémininAge : 26Messages : 242

    Dim 9 Fév 2020 - 0:40

    Merci ! =D



    :friends:
    Système de Boutique avec filtrage automatique - Page 2 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Thelma
    Thelma
    FémininAge : 31Messages : 33

    Jeu 7 Mai 2020 - 12:04

    Je suis curieuse!!
    Merci pour ce partage!
    Evaporter
    Evaporter
    FémininAge : 28Messages : 2

    Dim 5 Juil 2020 - 18:20

    C'est. Un. Truc. De. Malade.

    On construit un forum Pokémon, tu n'as pas idée de mon état de hype ! :hug:
    Je vais tester ce merveilleux code sur mon forum test, si ça fonctionne je te le prendrai et n'oublierai surtout pas de créditer, bravo à toi et merci mille fois ! ♥
    Artween
    Artween
    FémininAge : 27Messages : 3

    Lun 21 Déc 2020 - 11:35

    Merci beaucoup j'adore j'adore j'adore :aww:
    Moon Night
    Moon Night
    FémininAge : 24Messages : 6

    Sam 13 Mar 2021 - 0:45

    Ce LS est vraiment incroyable. Merci beaucoup pour le travail fourni !
    CrimsonTulip
    CrimsonTulip
    FémininAge : 22Messages : 5

    Ven 11 Juin 2021 - 4:07

    Cette boutique est parfaite ! Merci beaucoup :3
    OMJ
    OMJ
    FémininAge : 31Messages : 92

    Lun 14 Juin 2021 - 18:23

    merci beaucoup Very Happy C'est génial :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 9 Déc 2021 - 15:43