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.


    Mise en forme Boutique Onyx

    Melissandre Pearce
    Melissandre Pearce
    FémininAge : 26Messages : 31

    le Dim 8 Sep 2019 - 15:49

    Bonjour avec une copine on créer un forum sur le thème des Sims et il m'aie venue à l'idée de mettre la jolie boutique que Onyx à créer. Par contre j'ai fait des modifications pour que cela soit plus à mon goût, tel que suggérer tout au long du tutoriel, mais la j'ai un souci. Lorsque je rajoute des articles à la boutique, au lieu de ce mettre tous côte à côte, ils sont un à la suite de l'autre. C'est-à-dire sur la même colonne.

    Voici donc le visuel que cela donne:



    Pour le code je le mettrai ici si on me le demande vue que c'est un grand code.

    Merci beaucoup d'avance ! :)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5113

    le Dim 8 Sep 2019 - 19:00

    Coucou o/

    Effectivement ça serait plus simple de rajouter le code ! Aussi, est ce que tu peux mettre le lien s'il te plait ? Cela permet en utilisant l'inspecteur d'élément du navigateur de regarder le code html / css "en direct" et du coup c'est encore plus simple pour aider :)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Melissandre Pearce
    Melissandre Pearce
    FémininAge : 26Messages : 31

    le Lun 9 Sep 2019 - 2:29

    Merci beaucoup pour le réponse je vous donne le lien d'ou je fais mes tests, puis le code de ma feuille html.

    http://ylenna21-test.forumactif.com/t1-mode-achat

    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' />
      <link href="https://fonts.googleapis.com/css?family=Megrim|Unica+One&display=swap" rel="stylesheet">
      <style type="text/css">
        /* Apparence des scrollbars */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: #ba8ac2;
        border-radius: 15px;
            }

    ::-webkit-scrollbar-track {
      background-color: #ba8ac2;
        border-radius: 15px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #e3f5ec;
      border-radius: 15px;
          }
     
    /* Fin scrollbars */
        /*Corps*/
        body {
        margin: 0px;
        }
        /*Le bloc entier de la boutique*/
        #boutique {
      margin: auto;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        font-family:'unica one', cursive;
        }
        /*Le bloc du titre de la boutique*/
        #boutique_top {
        background: #375386;
        border-bottom: 0;
        color: #FFFFFF;
        font-family: 'megrim', cursive;
        font-size: 23px;
        margin: 10px 0;
        letter-spacing: 1px;
        line-height: 26px;
        padding: 6px 50px;
        text-transform: uppercase;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
        text-align: left;
        padding-top: 5px;
        width: 130px;
        height: 560px;
        margin-right: 3px;
        }
        /*Les boutons de tri*/
        #trier, #trier2 {
        width: 130px;
        color: #FFFFFF;
        line-height: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 3px 0px;
        font-family: 'unica one', cursive;
        margin: 2px 0;
        text-transform: uppercase;
        font-size: 11px;
        background-color: #375386;
        border: 0px solid black;
        }
        /*Titres des catégories*/
        .menu_title {
        color: #57D9B8;
        font-size: 16px;
        display: block;
        margin: 12px 0px;
        font-weight: 700;
        line-height: 16px;
        font-family: 'megrim', cursive;
        }
        /*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: 704px;
        margin-top: 3px;
        margin-bottom: 3px;
        text-align: center;
        }
        /*Div de un seul item*/
        .contenu_shoponglet > div {
        flex-grow: 1;
        margin: 5px;
        width: 185px
        }
        /*Bloc qui contient l'item*/
        .item_bloc {
        background-color: #375386;
        padding: 10px;
        display: grid;
        grid-template-columns: 50px auto 30px;
        grid-template-areas: "item nombart boutaj" "item categart categart" "titrart titrart titrart" "descart descart descart";
        border-radius: 5px;
        box-shadow: 1px 1px 2px -1px #db9d67;
        grid-gap: 7px;
        width:400px;
        }
        /*Prix des items*/
        .prix {
        background-color: rgb(103, 30, 84);
        color: #ffe0c4;
        display: block;
        border-radius: 3px;
        display: flex;
        grid-area: item;
        flex-wrap: wrap;
        width: 100px;
        align-items: center;
        padding: 3px;
        position: relative;
        font-size: 15px;
        justify-content: center;
        }
        /*Image de l'item*/
        .item_bloc > img:first-child {
        display: inline-block;
        width: 100px;
        height: 100px;
        }
        /*Nom de l'item*/
        .item_name {
            font-size: 13px;
        max-height: 40px;
        line-height: 16px;
        font-weight: 700;
        margin: 2px 0px;
        color: #57D9B8;
        grid-area: titrart;
        }
        /*Input du nombre d'item à acheter*/
        input[type="number"] {
        border: 1px solid #ffe9d6;
        background-color: #ffffff;
        text-align: center;
        font-size: 18px;
        font-family: 'unica one', cursive;
        width: 100%;
            line-height: 13px;
        }
        /*Partie du panier*/
        #bottom {
      position: relative;
        display: inline-block;
        margin: auto;
        width: 100%;
        color: #000000;
        margin-top: 20px;
        text-align: center;
        overflow: hidden;
        }
        /*Titre du panier*/
        #bottom_top {
        background: #375386;
        border-bottom: 0;
        color: #FFFFFF;
        font-family: 'megrim', cursive;
        font-size: 23px;
        margin: 10px 0;
        letter-spacing: 1px;
        line-height: 26px;
        padding: 6px 50px;
        text-transform: uppercase;
        }
        /*Panier visible*/
        #vuepanier {
      height: 100px;
        background-color: #ffffff;
        margin-top: 3px;
        color: #000000;
        font-size: 13px;
        padding: 3px;
        text-align: left;
        overflow: auto;
        }
        /*Bouton effacer et soumettre le panier*/
        #soumettrepanier, #effacerpanier {
     width: 130px;
        color: #FFFFFF;
        line-height: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 3px 0px;
        font-family: 'unica one', cursive;
        text-transform: uppercase;
        font-size: 11px;
        background-color: #375386;
        border: 0px solid black;
        display: inline-block;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 5px;
        }
        /*Bouton soumettre le panier*/
        #effacerpanier {
      width: 130px;
        color: #FFFFFF;
        line-height: 11px;
        letter-spacing: 1px;
        padding: 3px 0px;
        font-family: 'unica one', cursive;
        text-transform: uppercase;
        font-size: 11px;
        background-color: #375386;
        border: 0px solid black;
        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;
        }
        /* clignotant de nouveautés*/
        .flash {
        animation: clignotage 1s infinite;
        }
        /*Ajout prix config*/
        .ajoutprix {
        border: 0px solid black;
        color: #fffdf4;
        line-height: 13px;
        letter-spacing: 2px;
        font-size: 0px;
        background: #57D9B8 url(https://i.imgur.com/nZmieHE.png) no-repeat 4px center;
        grid-area: boutaj;
        text-transform: uppercase;
        font-family: 'unica one', cursive;
        }
        /*Categ*/
        .categ {
        color: #57D9B8;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        grid-area: categart;
        line-height: 10px;
        text-align: center;
        }
        /* Description item*/
        .desc {
        text-align: justify;
        line-height: 15px;
        grid-area: descart;
        font-size: 11px;
        padding: 6px 11px;
        background: #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()">Tout Afficher</button><br />
          <button id="trier" type="button" onclick="triage()">Trier !</button><br />
          <ul id="Nouveautes" style="margin : 20px 0">
            <li class="flash">
              <input type="checkbox" name="Nouveau">
                <b>Nouveautés !</b>
              </li>
            </ul>

          <!-- DÉBUT CATÉGORIE CATÉGORIES -->
          <span class="menu_title">Catégories</span>
          <ul id="Objet">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Cuisine" />
              Cuisine
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Salle de bain" />
              Salle de bain
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Chambre" />
              Chambre
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Salon" />
              Salon
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Salle à manger" />
              Salle à manger
            </li>
            <!-- OPTION #6 -->
            <li><input type="checkbox" name="Bureau" />
              Bureau
            </li>
            <!-- OPTION # -->
            <li><input type="checkbox" name="Chambre d'enfant" />
              Chambre d'enfant
            </li>
            <!-- OPTION # -->
            <li><input type="checkbox" name="Extérieur" />
              Extérieur
            </li>
          </ul>
          <!-- FIN CATÉGORIE CATÉGORIES -->

          <!-- DÉBUT CATÉGORIE FONTION -->
          <span class="menu_title">Fonctions</span>
          <ul id="Niveau">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Confort" />
              Confort
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Surfaces" />
              Surfaces
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Plomberie" />
              Plomberie
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Activités" />
              Activités & Compétances
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Décorations" />
              Décorations
            </li>
                    <!-- OPTION #6 -->
            <li><input type="checkbox" name="Enfants" />
              Enfants
            </li>
                    <!-- OPTION #7 -->
            <li><input type="checkbox" name="Éclairage" />
              Éclairage
            </li>
                    <!-- OPTION #8 -->
            <li><input type="checkbox" name="Électronique" />
              Électronique
            </li>
                    <!-- OPTION #9 -->
            <li><input type="checkbox" name="Électroménager" />
              Électroménager
            </li>
                    <!-- OPTION #10 -->
            <li><input type="checkbox" name="Rangement" />
              Rangement
            </li>
          </ul>
          <!-- FIN CATÉGORIE FONCTIONS -->

          <!-- DÉBUT CATÉGORIE PRIX -->
          <span class="menu_title">Prix</span>
          <ul id="Prix">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="0_20" />
              0-20§
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="21_60" />
              21-60§
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="61_100" />
              61-100§
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="101_200" />
              101-200§
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="201_300" />
              201-300§
            </li>
            <!-- OPTION #6 -->
            <li><input type="checkbox" name="Min300" />
              Plus de 300§
            </li>
          </ul>
          <!-- FIN CATÉGORIE PRIX -->

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

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

            <!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://na.lvlt.sims3store.cdn.ea.com/u/f/sims/sims3/sims3store/objects/bedSingleAnC/Thumbnail_300x300.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
            <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </div>
            </div>
            <!-- FIN ITEM --><!-- DÉBUT ITEM -->
          <div class="Chambre Confort 0_20">
              <div class="item_bloc">
                <div class="prix"><img src="https://zupimages.net/up/17/26/t4m9.png" /><br/>
                  <span class="nbprix">10</span> §</div>
                <button class="ajoutprix" type="button">Ajouter</button>
                <div class="ach"><span class="pri">
                <input type="number" value="1" min="1" /></span>
                </div>
                <div class="item_name">Lit Simple Dure</div>
                <div class="categ">Chambre - Confort</div>
                <div class="desc">Lit simple offrant un petit confort, cela prend un certain temps pour s'endormir dû au matelas dur.</div>
              </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</button>
        <input type="submit" id="soumettrepanier" value="Acheter" name="post" />
        <textarea name="message" id="message" style="display:none"></textarea>
        <input type="hidden" value="reply" name="mode" />
        <input type="hidden" value="70" name="t1-mode-achat" />
        <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>
    Melissandre Pearce
    Melissandre Pearce
    FémininAge : 26Messages : 31

    le Mer 11 Sep 2019 - 14:18

    UP svp :)
    Melissandre Pearce
    Melissandre Pearce
    FémininAge : 26Messages : 31

    le Dim 15 Sep 2019 - 14:35

    UP :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 20 Sep 2019 - 22:10