Listar itens por ordem alfabética em loja

Detalhes da questão

Endereço do fórum: https://somosmugiwara.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Seria possível que os itens listados no código de loja criado pelo @Daemon fossem apresentados por ordem alfabética?

https://ajuda.forumeiros.com/t99911p50-addon-criar-loja-de-icones

Olá @Connor R.,

Existem várias formas de conseguir com que os itens sejam apresentados por ordem alfabética. A primeira e a mais óbvia é inserir os itens de forma alfabética no código.

Convenhamos que essa opção é pouco eficiente, e portanto, peço que me forneça o código da Loja que está usando em seu fórum que irei fazer as adaptações necessárias para os itens serem exibidos de forma alfabética automaticamente.

Atenciosamente,
RafaelS.

@"RafaelS." abaixo segue o código da loja que estou usando no momento. Fiz algumas modificações, tanto no código quanto no css.

Eu tinha pensando em fazer algo com o .sort().

Código:


<script type="text/javascript">
      $(function() {
      var produtos = {  
  
        'Santos Futebol Clube': {
            icone: 'https://logodetimes.com/times/santos/logo-santos-256.png',
            preco: '100',
            status: 'A Venda',
            descricao: 'Bônus de 5 aparência<br>Apenas para Marinheiros',
            slot: 'time'
        },
 'São Paulo Futebol Clube': {
            icone: 'https://logodetimes.com/times/sao-paulo/logo-sao-paulo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Slot Cabeça<br>Bônus de 10 aparência',
            slot: 'time'
        },
 'Paris Saint-Germain Football Club': {
            icone: 'https://logodetimes.com/times/psg/logo-psg-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Real Madrid Club de Fútbol': {
            icone: 'https://logodetimes.com/times/real-madrid/logo-real-madrid-escudo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Jolly Roger do Barba Branca': {
            icone: 'https://i.imgur.com/xGn2SMu.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'bando'
        },
 'Bônus de Xp': {
            icone: 'https://i.imgur.com/63p1Gea.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'xp'
        },
 'Anúncio de Bando': {
            icone: 'https://i.imgur.com/h9G4KDQ.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'diversos'
        }  
  
      };
  
  
      var content = $('.content .itens');
          $.each(produtos, function (key, value) {
              content.append(
              '<tr class="item1" id="' + value.slot + '">' +
              '  <td class="icone"><img src="' + value.icone + '" /></td>' +
              '  <td><strong class="nome">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
              '  <td>' +
              '  <ul>' +
              '  <li><span class="preco" title="' + value.preco + ' Cash" data-myprice="' + value.preco + '">' + value.preco + '</span><span class="istatus">' + value.status + '</span></li>' +
              '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
        '  </ul>' +
              '  </td>' +
              '</tr>'
              );
          });
          $.ajax({
            url: '/u' + _userdata.user_id,
            type: 'GET',
            success: function(responseHtml)
            {
            var usi = $('.ipsType_pagetitle span strong', responseHtml).text();
            document.querySelector("[name='txtstart']").value = 'Compras de '+ usi +'';
            var myPoints = $('#field_id-13 .row_data div', responseHtml).text();
            $('.myPoints').html('Você possui um total de <span id="totalPoints" class="totalPoints">' + myPoints + '</span> Cash');
            },
            error: function(err)
            {
              console.log("AJAX error in request (Store points)");
            }
          });
      });
      var $total = 0;
      function addToCart(item) {
        var getItem = $(item).parents('.item1').find('.nome').text();
        var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
        $total += getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + ' | ' + getPrice + '</span>');
      }
      function removeFromCart(item) {
        var getPrice = parseInt($(item).attr('data-myprice'));
        $total -= getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $(item).remove();
      }
      function resetItems() {
        $('.cart').empty();
        $total = 0;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">0</span> Cash');;
      }
      function buyItems() {
        if(!$('.cart').is(':empty')) {
          var valPoints = parseInt($('.totalPoints').text());
          var valTotal = parseInt($('.totalVal').text());
          if(valPoints >= valTotal) {
          var texto = '';
          var total = 0;
          $('.item-cart').each(function() {
            var item = $(this).text();
            var preco = parseInt($(this).attr('data-myprice'));
            texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
            //add line break at the end
            + '[/b] pontos\n';
            total += preco;
          });
          texto += '\n[b]Valor Total:[/b] ' + total + ' pontos';
          $.post('/post', {
                'mode': 'newtopic',
                'post': '1',
                'f': '5',
                'subject': $('#fa-generated-title').val().trim(),
                'message': '<div class="officiel_cadre"><h1 class="officiel_titre">Level e Xp das aventuras</h1><div class="officiel_intro">' + texto + '</div></div>'
          }).done(function(e) {
            var href = $(e).find('a[href^="/viewtopic"]').attr('href');
            location.href = href;
          });
          } else {
            alert("Você não tem pontos suficiente para efetuar a compra");
          }
        } else {
          alert("O carrinho está vazio");
        }
      }
    </script>    <style type="text/css">
table.content{border-collapse:separate;empty-cells:show;table-layout:fixed;width:100%}
.itemdesc{color:#444;height:28px;margin:5px 0 0;padding-bottom:5px;font-size:11px;display:block}
.itens .nome{color:#fff;padding:5px 0;display:block;font-size:12px}
.itens .icone{padding:10px 0}
.itens .icone img{height:50px;width:50px}
.itens{text-align:center}
.totalPoints,.totalVal{font-size: 14px;padding:7px 10px 8px;color:#fff;font-weight:700;margin:0 5px}
button.itembut:after{content:"Adicionar ao carrinho";font-weight:700;color:#fff;font-size:11px}
.preco:before{content:"\f0d6";font-family:FontAwesome;font-style:normal;font-weight:400;color:#fff;font-size:12px;padding-right:5px}
.statistics{display:none}
button.itembut:before{content:"\f07a";font-family:FontAwesome;color:#fff;padding-right:10px}
.istatus{width:50%;float:right;text-align:center;background:gray;color:#fff;text-transform:uppercase;padding:2px 5px;font-size:10px}
.item-cart{display:inline-block;margin:2px 4px;cursor:pointer;font-weight:700;padding:5px;color:#fff;border-radius:2px}
table.content tr td{padding:0;width:100%;display:inline-block;text-align:center;background:#f0f0f0;border:1px solid #ccc;border-bottom:0;border-top:0}
.itens ul li{list-style-type:none}
.daemon{text-align:center;padding:2px}
.preco{color:#fff;float:left;text-align:center;padding:2px 5px;width:50%}
.itembut:hover{opacity:1}
.itembut{border-radius:0;background: #629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0;opacity:.8;width:100%;padding:10px;margin:5px 0 0;text-transform:uppercase;color:#fff;font-size:15px}
.item-cart,.carname,.totalPoints,.totalVal,.daemon,tr.item1 td.icone,.itens .nome,.preco{border-top-color: #920000 !important;background: #920000}
.item1{border: 4px solid #222;margin: 0 0 10px;width: calc(100% / 5);display: inline-block}
tr.item1 td.icone {border-top-width: 10px !important;border-top-style: groove !important}
.item-cart:after{content:"\f00d";font-family:FontAwesome;color:#fff;padding-left:5px}
.butrret,.butenviar:hover,.butreset:hover{text-decoration: underline}
.butrret,.butenviar,.butreset{width: 300px;font-size:11px;padding:10px;color:#fff;text-transform:uppercase;letter-spacing:1px;margin:10px 2px;font-weight:700}
.butrret{background:#946d00 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butenviar{background:#629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butreset{background:#333333 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.cart{background:#fff;min-height:45px;padding:5px;border:1px solid #ddd}
.tronco,.calca,.sapato,.pescoco,.dedo,.cabeca{width:60px;height:60px;position:absolute;background-repeat:no-repeat;margin-top:-11px;margin-left:-6px}
.dedo{background:url(https://i.imgur.com/2eKY0Ae.png)}
.pescoco{background:url(https://i.imgur.com/19ZeOvG.png)}
.sapato{background:url(https://i.imgur.com/VcTOqYG.png)}
.calca{background:url(https://i.imgur.com/VUb1Ydf.png)}
.tronco{background:url(https://i.imgur.com/M7wanFi.png)}
.cabeca{background:url(https://i.imgur.com/Hkv3JUC.png)}
.total,.myPoints{text-transform:uppercase;font-size:11px;display:block;font-weight:700;width:50%;float:left;padding:5px;background:rgb(0 0 0 / 57%);margin: 0;text-align:center;color:#fff}
.rtop2:hover,.item-cart:hover:after{color:#333}
.boxinp{text-align: center;padding: 10px}
.boxinp label{margin-left: 5px;vertical-align: middle}
.rtop2::before{content:"\f07a";font-family:FontAwesome;font-size:20px;font-style:normal;font-weight:700}
.rtop2::after{display:block}
.rtop2{font-size: 20px;text-align: center;cursor:pointer;font-weight:700;position:fixed;top:150px;padding:5px 10px;background:#fff;left:15px;color:#920000!important}
#cart2{display: none;position: fixed;left: 0;top: 0;width: 100%;background: rgb(51 51 51 / 0.9);height: 100%;padding: 200px 68px}
.carname{margin-right: 10px;padding: 10px;display: inline-block;color: #fff;text-transform: uppercase;font-weight: 700;font-size: 12px}
.boxinp span{margin-right: 10px}
[data-theme="dark"] table.content tr td{background: #222;border: 1px solid #444;border-bottom: 0;border-top: 0}
[data-theme="dark"] .itemdesc{color: #ddd}   </style>    <a class="rtop2" id="rtop2"></a>
<div class="daemon">
                                                                                                                                                                  <span style="color: #920000;font-size: 28px;font-weight: bold;background: #fff;padding: 5px;text-transform: uppercase;">Mugiwara Shop</span><span style="color: white;font-size: 15px;font-weight: bold;margin-left: 10px;">A melhor loja de diversos para o player.</span>
</div>
<div class="boxinp">
                                                <span>Filtar por:</span><input name="option" id="tipo0" onchange="rb_onchange(this)" type="radio" /><label for="tipo0">Todos</label>  <input name="option" id="tipo1" onchange="rb_onchange(this)" type="radio" /><label for="tipo1">Time Nacional</label>      <input name="option" id="tipo2" onchange="rb_onchange(this)" type="radio" /><label for="tipo2">Time Internacional</label><input name="option" id="tipo4" onchange="rb_onchange(this)" type="radio" /><label for="tipo4">Bando Preferido de One Piece</label><input name="option" id="tipo5" onchange="rb_onchange(this)" type="radio" /><label for="tipo5">Diversos</label><input name="option" id="tipo3" onchange="rb_onchange(this)" type="radio" /><label for="tipo3">Bônus</label>
</div>
                                                                                                                                                                                                                            
<table class="content">
                                                                                                                                                                                                                                             <tbody class="itens"></tbody>    
</table>
<div id="cart2">
                                                                                                                                                                                                                                                                                                                
 <div id="cart">
                                                                      
 <div class="carname">
                             Carrinho de Compras                            
 </div>
                         Clique no item para excluí-lo do carrinho de compras.                                                                                                                                                                                                                                                                                                                                                                                                                                      
 <div class="cart">
                                                                                                                                                                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                              
 <div>
                                                                                                                                                                                  <span class="myPoints"> </span>      <span class="total">Suas compras totalizam um valor de <span id="totalVal" class="totalVal">0</span> Cash</span>                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                  
 <div class="daemon">
                                                                                                                                                                                                                                                                                                                                                                                                                                  
 <button type="button" value="Enviar Pedido" onclick="buyItems()" class="butenviar">
                                                                                                                                                                                          Enviar Pedido                                                                                                                                                                                          
 </button>
                                                                                                                                                                                                                                                                                                                                                                                          
 <button type="button" value="Resetar Carrinho" onclick="resetItems()" class="butreset">
                                                                                                                                                                                          Resetar Carrinho                                                                                                                                                                                        
 </button>
                                                                                                                                                      
 <button type="button" value="Voltar as compras " class="butrret" id="butrret">
                                                                                                                                                                                          Voltar as compras                                                                                                                                                                                      
 </button>
                                                                                                                                                                                                                                                                                                                                                                                        
 </div>
</div><input type="hidden" id="fa-generated-title" name="txtstart" /><script>
function rb_onchange(s) {
 if (s.checked && s.id == "tipo0") {
   $('tr[id*="time"]').css( "display", "inline-block" );
   $('tr[id*="diversos"]').css( "display", "inline-block" );
   $('tr[id*="club"]').css( "display", "inline-block" );
   $('tr[id*="xp"]').css( "display", "inline-block" );
   $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo1") {
   $('tr[id*="time"]').css( "display", "inline-block" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo3") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "inline-block" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo4") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo5") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "inline-block" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      else if (s.checked && s.id == "tipo2") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "inline-block" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
    }
</script><script>
$(document).ready(function(){
  $('#rtop2').click(function(){
    $('#cart2').toggle();
  });
});

$(document).ready(function(){
  $('#butrret').click(function(){
    $('#cart2').toggle();
  });
});

$(document).ready(function(){
$('<style>.rtop2:after{content:"0"}</style>').appendTo('head');
$("#wrap").click(function(){
var cont = $('.cart span').size();
$('<style>.rtop2:after{content:"'+cont+'"}</style>').appendTo('head');
})});
</script>


Olá @Connor R.,

Eu presumi que já tivesse feito várias modificações, por isso mesmo é que optei por lhe pedir a sua versão da loja.

Infelizmente o .sort() aqui não vai dar certo, pois o @Daemon definiu os itens da loja como um objeto principal que contém vários sub-objetos (itens). Se ele tivesse optado por usar um Array ai sim, creio que daria certo usando esse método.

Segue o código adaptado para exibir os itens em ordem alfabética:

Código:


<script type="text/javascript">
      $(function() {
      var produtos = {  
  
        'Santos Futebol Clube': {
            icone: 'https://logodetimes.com/times/santos/logo-santos-256.png',
            preco: '100',
            status: 'A Venda',
            descricao: 'Bônus de 5 aparência<br>Apenas para Marinheiros',
            slot: 'time'
        },
 'São Paulo Futebol Clube': {
            icone: 'https://logodetimes.com/times/sao-paulo/logo-sao-paulo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Slot Cabeça<br>Bônus de 10 aparência',
            slot: 'time'
        },
 'Paris Saint-Germain Football Club': {
            icone: 'https://logodetimes.com/times/psg/logo-psg-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Real Madrid Club de Fútbol': {
            icone: 'https://logodetimes.com/times/real-madrid/logo-real-madrid-escudo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Jolly Roger do Barba Branca': {
            icone: 'https://i.imgur.com/xGn2SMu.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'bando'
        },
 'Bônus de Xp': {
            icone: 'https://i.imgur.com/63p1Gea.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'xp'
        },
 'Anúncio de Bando': {
            icone: 'https://i.imgur.com/h9G4KDQ.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'diversos'
        }  
  
      };
  
  
      var content = $('.content .itens');
          Object.keys(produtos).sort().forEach(function(key, value) {
              content.append(
              '<tr class="item1" id="' + value.slot + '">' +
              '  <td class="icone"><img src="' + value.icone + '" /></td>' +
              '  <td><strong class="nome">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
              '  <td>' +
              '  <ul>' +
              '  <li><span class="preco" title="' + value.preco + ' Cash" data-myprice="' + value.preco + '">' + value.preco + '</span><span class="istatus">' + value.status + '</span></li>' +
              '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
        '  </ul>' +
              '  </td>' +
              '</tr>'
              );
          });
          $.ajax({
            url: '/u' + _userdata.user_id,
            type: 'GET',
            success: function(responseHtml)
            {
            var usi = $('.ipsType_pagetitle span strong', responseHtml).text();
            document.querySelector("[name='txtstart']").value = 'Compras de '+ usi +'';
            var myPoints = $('#field_id-13 .row_data div', responseHtml).text();
            $('.myPoints').html('Você possui um total de <span id="totalPoints" class="totalPoints">' + myPoints + '</span> Cash');
            },
            error: function(err)
            {
              console.log("AJAX error in request (Store points)");
            }
          });
      });
      var $total = 0;
      function addToCart(item) {
        var getItem = $(item).parents('.item1').find('.nome').text();
        var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
        $total += getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + ' | ' + getPrice + '</span>');
      }
      function removeFromCart(item) {
        var getPrice = parseInt($(item).attr('data-myprice'));
        $total -= getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $(item).remove();
      }
      function resetItems() {
        $('.cart').empty();
        $total = 0;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">0</span> Cash');;
      }
      function buyItems() {
        if(!$('.cart').is(':empty')) {
          var valPoints = parseInt($('.totalPoints').text());
          var valTotal = parseInt($('.totalVal').text());
          if(valPoints >= valTotal) {
          var texto = '';
          var total = 0;
          $('.item-cart').each(function() {
            var item = $(this).text();
            var preco = parseInt($(this).attr('data-myprice'));
            texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
            //add line break at the end
            + '[/b] pontos\n';
            total += preco;
          });
          texto += '\n[b]Valor Total:[/b] ' + total + ' pontos';
          $.post('/post', {
                'mode': 'newtopic',
                'post': '1',
                'f': '5',
                'subject': $('#fa-generated-title').val().trim(),
                'message': '<div class="officiel_cadre"><h1 class="officiel_titre">Level e Xp das aventuras</h1><div class="officiel_intro">' + texto + '</div></div>'
          }).done(function(e) {
            var href = $(e).find('a[href^="/viewtopic"]').attr('href');
            location.href = href;
          });
          } else {
            alert("Você não tem pontos suficiente para efetuar a compra");
          }
        } else {
          alert("O carrinho está vazio");
        }
      }
    </script>    <style type="text/css">
table.content{border-collapse:separate;empty-cells:show;table-layout:fixed;width:100%}
.itemdesc{color:#444;height:28px;margin:5px 0 0;padding-bottom:5px;font-size:11px;display:block}
.itens .nome{color:#fff;padding:5px 0;display:block;font-size:12px}
.itens .icone{padding:10px 0}
.itens .icone img{height:50px;width:50px}
.itens{text-align:center}
.totalPoints,.totalVal{font-size: 14px;padding:7px 10px 8px;color:#fff;font-weight:700;margin:0 5px}
button.itembut:after{content:"Adicionar ao carrinho";font-weight:700;color:#fff;font-size:11px}
.preco:before{content:"\f0d6";font-family:FontAwesome;font-style:normal;font-weight:400;color:#fff;font-size:12px;padding-right:5px}
.statistics{display:none}
button.itembut:before{content:"\f07a";font-family:FontAwesome;color:#fff;padding-right:10px}
.istatus{width:50%;float:right;text-align:center;background:gray;color:#fff;text-transform:uppercase;padding:2px 5px;font-size:10px}
.item-cart{display:inline-block;margin:2px 4px;cursor:pointer;font-weight:700;padding:5px;color:#fff;border-radius:2px}
table.content tr td{padding:0;width:100%;display:inline-block;text-align:center;background:#f0f0f0;border:1px solid #ccc;border-bottom:0;border-top:0}
.itens ul li{list-style-type:none}
.daemon{text-align:center;padding:2px}
.preco{color:#fff;float:left;text-align:center;padding:2px 5px;width:50%}
.itembut:hover{opacity:1}
.itembut{border-radius:0;background: #629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0;opacity:.8;width:100%;padding:10px;margin:5px 0 0;text-transform:uppercase;color:#fff;font-size:15px}
.item-cart,.carname,.totalPoints,.totalVal,.daemon,tr.item1 td.icone,.itens .nome,.preco{border-top-color: #920000 !important;background: #920000}
.item1{border: 4px solid #222;margin: 0 0 10px;width: calc(100% / 5);display: inline-block}
tr.item1 td.icone {border-top-width: 10px !important;border-top-style: groove !important}
.item-cart:after{content:"\f00d";font-family:FontAwesome;color:#fff;padding-left:5px}
.butrret,.butenviar:hover,.butreset:hover{text-decoration: underline}
.butrret,.butenviar,.butreset{width: 300px;font-size:11px;padding:10px;color:#fff;text-transform:uppercase;letter-spacing:1px;margin:10px 2px;font-weight:700}
.butrret{background:#946d00 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butenviar{background:#629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butreset{background:#333333 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.cart{background:#fff;min-height:45px;padding:5px;border:1px solid #ddd}
.tronco,.calca,.sapato,.pescoco,.dedo,.cabeca{width:60px;height:60px;position:absolute;background-repeat:no-repeat;margin-top:-11px;margin-left:-6px}
.dedo{background:url(https://i.imgur.com/2eKY0Ae.png)}
.pescoco{background:url(https://i.imgur.com/19ZeOvG.png)}
.sapato{background:url(https://i.imgur.com/VcTOqYG.png)}
.calca{background:url(https://i.imgur.com/VUb1Ydf.png)}
.tronco{background:url(https://i.imgur.com/M7wanFi.png)}
.cabeca{background:url(https://i.imgur.com/Hkv3JUC.png)}
.total,.myPoints{text-transform:uppercase;font-size:11px;display:block;font-weight:700;width:50%;float:left;padding:5px;background:rgb(0 0 0 / 57%);margin: 0;text-align:center;color:#fff}
.rtop2:hover,.item-cart:hover:after{color:#333}
.boxinp{text-align: center;padding: 10px}
.boxinp label{margin-left: 5px;vertical-align: middle}
.rtop2::before{content:"\f07a";font-family:FontAwesome;font-size:20px;font-style:normal;font-weight:700}
.rtop2::after{display:block}
.rtop2{font-size: 20px;text-align: center;cursor:pointer;font-weight:700;position:fixed;top:150px;padding:5px 10px;background:#fff;left:15px;color:#920000!important}
#cart2{display: none;position: fixed;left: 0;top: 0;width: 100%;background: rgb(51 51 51 / 0.9);height: 100%;padding: 200px 68px}
.carname{margin-right: 10px;padding: 10px;display: inline-block;color: #fff;text-transform: uppercase;font-weight: 700;font-size: 12px}
.boxinp span{margin-right: 10px}
[data-theme="dark"] table.content tr td{background: #222;border: 1px solid #444;border-bottom: 0;border-top: 0}
[data-theme="dark"] .itemdesc{color: #ddd}   </style>    <a class="rtop2" id="rtop2"></a>
<div class="daemon">
                                                                                                                                                                  <span style="color: #920000;font-size: 28px;font-weight: bold;background: #fff;padding: 5px;text-transform: uppercase;">Mugiwara Shop</span><span style="color: white;font-size: 15px;font-weight: bold;margin-left: 10px;">A melhor loja de diversos para o player.</span>
</div>
<div class="boxinp">
                                                <span>Filtar por:</span><input name="option" id="tipo0" onchange="rb_onchange(this)" type="radio" /><label for="tipo0">Todos</label>  <input name="option" id="tipo1" onchange="rb_onchange(this)" type="radio" /><label for="tipo1">Time Nacional</label>      <input name="option" id="tipo2" onchange="rb_onchange(this)" type="radio" /><label for="tipo2">Time Internacional</label><input name="option" id="tipo4" onchange="rb_onchange(this)" type="radio" /><label for="tipo4">Bando Preferido de One Piece</label><input name="option" id="tipo5" onchange="rb_onchange(this)" type="radio" /><label for="tipo5">Diversos</label><input name="option" id="tipo3" onchange="rb_onchange(this)" type="radio" /><label for="tipo3">Bônus</label>
</div>
                                                                                                                                                                                                                            
<table class="content">
                                                                                                                                                                                                                                             <tbody class="itens"></tbody>    
</table>
<div id="cart2">
                                                                                                                                                                                                                                                                                                                
 <div id="cart">
                                                                      
 <div class="carname">
                             Carrinho de Compras                            
 </div>
                         Clique no item para excluí-lo do carrinho de compras.                                                                                                                                                                                                                                                                                                                                                                                                                                      
 <div class="cart">
                                                                                                                                                                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                              
 <div>
                                                                                                                                                                                  <span class="myPoints"> </span>      <span class="total">Suas compras totalizam um valor de <span id="totalVal" class="totalVal">0</span> Cash</span>                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                  
 <div class="daemon">
                                                                                                                                                                                                                                                                                                                                                                                                                                  
 <button type="button" value="Enviar Pedido" onclick="buyItems()" class="butenviar">
                                                                                                                                                                                          Enviar Pedido                                                                                                                                                                                          
 </button>
                                                                                                                                                                                                                                                                                                                                                                                          
 <button type="button" value="Resetar Carrinho" onclick="resetItems()" class="butreset">
                                                                                                                                                                                          Resetar Carrinho                                                                                                                                                                                        
 </button>
                                                                                                                                                      
 <button type="button" value="Voltar as compras " class="butrret" id="butrret">
                                                                                                                                                                                          Voltar as compras                                                                                                                                                                                      
 </button>
                                                                                                                                                                                                                                                                                                                                                                                        
 </div>
</div><input type="hidden" id="fa-generated-title" name="txtstart" /><script>
function rb_onchange(s) {
 if (s.checked && s.id == "tipo0") {
   $('tr[id*="time"]').css( "display", "inline-block" );
   $('tr[id*="diversos"]').css( "display", "inline-block" );
   $('tr[id*="club"]').css( "display", "inline-block" );
   $('tr[id*="xp"]').css( "display", "inline-block" );
   $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo1") {
   $('tr[id*="time"]').css( "display", "inline-block" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo3") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "inline-block" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo4") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo5") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "inline-block" );
   $('tr[id*="club"]').css( "display", "none" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
      else if (s.checked && s.id == "tipo2") {
   $('tr[id*="time"]').css( "display", "none" );
   $('tr[id*="diversos"]').css( "display", "none" );
   $('tr[id*="club"]').css( "display", "inline-block" );
   $('tr[id*="xp"]').css( "display", "none" );
   $('tr[id*="bando"]').css( "display", "none" );
      }
    }
</script><script>
$(document).ready(function(){
  $('#rtop2').click(function(){
    $('#cart2').toggle();
  });
});
 
$(document).ready(function(){
  $('#butrret').click(function(){
    $('#cart2').toggle();
  });
});
 
$(document).ready(function(){
$('<style>.rtop2:after{content:"0"}</style>').appendTo('head');
$("#wrap").click(function(){
var cont = $('.cart span').size();
$('<style>.rtop2:after{content:"'+cont+'"}</style>').appendTo('head');
})});
</script>

Queira me informar caso funcione corretamente, pois poderei estar atualizando o plugin com esta pequena melhoria.

Atenciosamente
RafaelS.

@RafaelS. Não funcionou, vou lhe passar o link onde estou testando.

https://somosmugiwara.forumeiros.com/h101-

Ps: como faço para marcar o membro, não estou conseguindo.

Connor R. escreveu:@RafaelS. Não funcionou, vou lhe passar o link onde estou testando.

https://somosmugiwara.forumeiros.com/h101-

Olá @Connor R.,

Acabei de visualizar a página e os itens aparecem em ordem alfabética. Experimente limpar o cache/cookies do seu navegador ou usar um separador anônimo.

Connor R. escreveu:Ps: como faço para marcar o membro, não estou conseguindo.

Para marcar membros com pontuação ou outros caracteres especiais no nome, você precisa colocar as aspas.

Código:

@"RafaelS."

Até breve,
RafaelS.

@RafaelS. Limpei o cache, mas aparece apenas os nomes dos itens. irei testar em outro navegador, aqui estou utilizando o Edge.

Edit: Aqui como está aparecendo.
Edit2: Acho que sei o que está acontecendo, está colocando todas outras informações em ordem alfabética também, quando no caso deveria ser apenas o título.

Olá @Connor R.,

Desde já peço desculpa, eu estava olhando apenas os nomes e não reparei que o resto das informações dos ítens tinha sumido.

Veja se o seguinte código resulta:

Código:

 <script type="text/javascript">
      $(function() {
      var produtos = { 
 
        'Santos Futebol Clube': {
            icone: 'https://logodetimes.com/times/santos/logo-santos-256.png',
            preco: '100',
            status: 'A Venda',
            descricao: 'Bônus de 5 aparência<br>Apenas para Marinheiros',
            slot: 'time'
        },
 'São Paulo Futebol Clube': {
            icone: 'https://logodetimes.com/times/sao-paulo/logo-sao-paulo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Slot Cabeça<br>Bônus de 10 aparência',
            slot: 'time'
        },
 'Paris Saint-Germain Football Club': {
            icone: 'https://logodetimes.com/times/psg/logo-psg-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Real Madrid Club de Fútbol': {
            icone: 'https://logodetimes.com/times/real-madrid/logo-real-madrid-escudo-256.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'club'
        },
 'Jolly Roger do Barba Branca': {
            icone: 'https://i.imgur.com/xGn2SMu.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'bando'
        },
 'Bônus de Xp': {
            icone: 'https://i.imgur.com/63p1Gea.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'xp'
        },
 'Anúncio de Bando': {
            icone: 'https://i.imgur.com/h9G4KDQ.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'diversos'
        } 
 
      };

sortedProducts = Object.keys(produtos)
    .sort()
    .reduce(function (acc, key) {
        acc[key] = produtos[key];
        return acc;
    }, {});
 
      var content = $('.content .itens');
          $.each(sortedProducts, function (key, value) {
              content.append(
              '<tr class="item1" id="' + value.slot + '">' +
              '  <td class="icone"><img src="' + value.icone + '" /></td>' +
              '  <td><strong class="nome">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
              '  <td>' +
              '  <ul>' +
              '  <li><span class="preco" title="' + value.preco + ' Cash" data-myprice="' + value.preco + '">' + value.preco + '</span><span class="istatus">' + value.status + '</span></li>' +
              '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
        '  </ul>' +
              '  </td>' +
              '</tr>'
              );
          });
          $.ajax({
            url: '/u' + _userdata.user_id,
            type: 'GET',
            success: function(responseHtml)
            {
            var usi = $('.ipsType_pagetitle span strong', responseHtml).text();
            document.querySelector("[name='txtstart']").value = 'Compras de '+ usi +'';
            var myPoints = $('#field_id-13 .row_data div', responseHtml).text();
            $('.myPoints').html('Você possui um total de <span id="totalPoints" class="totalPoints">' + myPoints + '</span> Cash');
            },
            error: function(err)
            {
              console.log("AJAX error in request (Store points)");
            }
          });
      });
      var $total = 0;
      function addToCart(item) {
        var getItem = $(item).parents('.item1').find('.nome').text();
        var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
        $total += getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + ' | ' + getPrice + '</span>');
      }
      function removeFromCart(item) {
        var getPrice = parseInt($(item).attr('data-myprice'));
        $total -= getPrice;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">' + $total + '</span> Cash');
        $(item).remove();
      }
      function resetItems() {
        $('.cart').empty();
        $total = 0;
        $('.total').html('Suas compras totalizam um valor de <span class="totalVal">0</span> Cash');;
      }
      function buyItems() {
        if(!$('.cart').is(':empty')) {
          var valPoints = parseInt($('.totalPoints').text());
          var valTotal = parseInt($('.totalVal').text());
          if(valPoints >= valTotal) {
          var texto = '';
          var total = 0;
          $('.item-cart').each(function() {
            var item = $(this).text();
            var preco = parseInt($(this).attr('data-myprice'));
            texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
            //add line break at the end
            + '[/b] pontos\n';
            total += preco;
          });
          texto += '\n[b]Valor Total:[/b] ' + total + ' pontos';
          $.post('/post', {
                'mode': 'newtopic',
                'post': '1',
                'f': '5',
                'subject': $('#fa-generated-title').val().trim(),
                'message': '<div class="officiel_cadre"><h1 class="officiel_titre">Level e Xp das aventuras</h1><div class="officiel_intro">' + texto + '</div></div>'
          }).done(function(e) {
            var href = $(e).find('a[href^="/viewtopic"]').attr('href');
            location.href = href;
          });
          } else {
            alert("Você não tem pontos suficiente para efetuar a compra");
          }
        } else {
          alert("O carrinho está vazio");
        }
      }
    </script>    <style type="text/css">
table.content{border-collapse:separate;empty-cells:show;table-layout:fixed;width:100%}
.itemdesc{color:#444;height:28px;margin:5px 0 0;padding-bottom:5px;font-size:11px;display:block}
.itens .nome{color:#fff;padding:5px 0;display:block;font-size:12px}
.itens .icone{padding:10px 0}
.itens .icone img{height:50px;width:50px}
.itens{text-align:center}
.totalPoints,.totalVal{font-size: 14px;padding:7px 10px 8px;color:#fff;font-weight:700;margin:0 5px}
button.itembut:after{content:"Adicionar ao carrinho";font-weight:700;color:#fff;font-size:11px}
.preco:before{content:"\f0d6";font-family:FontAwesome;font-style:normal;font-weight:400;color:#fff;font-size:12px;padding-right:5px}
.statistics{display:none}
button.itembut:before{content:"\f07a";font-family:FontAwesome;color:#fff;padding-right:10px}
.istatus{width:50%;float:right;text-align:center;background:gray;color:#fff;text-transform:uppercase;padding:2px 5px;font-size:10px}
.item-cart{display:inline-block;margin:2px 4px;cursor:pointer;font-weight:700;padding:5px;color:#fff;border-radius:2px}
table.content tr td{padding:0;width:100%;display:inline-block;text-align:center;background:#f0f0f0;border:1px solid #ccc;border-bottom:0;border-top:0}
.itens ul li{list-style-type:none}
.daemon{text-align:center;padding:2px}
.preco{color:#fff;float:left;text-align:center;padding:2px 5px;width:50%}
.itembut:hover{opacity:1}
.itembut{border-radius:0;background: #629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0;opacity:.8;width:100%;padding:10px;margin:5px 0 0;text-transform:uppercase;color:#fff;font-size:15px}
.item-cart,.carname,.totalPoints,.totalVal,.daemon,tr.item1 td.icone,.itens .nome,.preco{border-top-color: #920000 !important;background: #920000}
.item1{border: 4px solid #222;margin: 0 0 10px;width: calc(100% / 5);display: inline-block}
tr.item1 td.icone {border-top-width: 10px !important;border-top-style: groove !important}
.item-cart:after{content:"\f00d";font-family:FontAwesome;color:#fff;padding-left:5px}
.butrret,.butenviar:hover,.butreset:hover{text-decoration: underline}
.butrret,.butenviar,.butreset{width: 300px;font-size:11px;padding:10px;color:#fff;text-transform:uppercase;letter-spacing:1px;margin:10px 2px;font-weight:700}
.butrret{background:#946d00 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butenviar{background:#629400 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butreset{background:#333333 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.cart{background:#fff;min-height:45px;padding:5px;border:1px solid #ddd}
.tronco,.calca,.sapato,.pescoco,.dedo,.cabeca{width:60px;height:60px;position:absolute;background-repeat:no-repeat;margin-top:-11px;margin-left:-6px}
.dedo{background:url(https://i.imgur.com/2eKY0Ae.png)}
.pescoco{background:url(https://i.imgur.com/19ZeOvG.png)}
.sapato{background:url(https://i.imgur.com/VcTOqYG.png)}
.calca{background:url(https://i.imgur.com/VUb1Ydf.png)}
.tronco{background:url(https://i.imgur.com/M7wanFi.png)}
.cabeca{background:url(https://i.imgur.com/Hkv3JUC.png)}
.total,.myPoints{text-transform:uppercase;font-size:11px;display:block;font-weight:700;width:50%;float:left;padding:5px;background:rgb(0 0 0 / 57%);margin: 0;text-align:center;color:#fff}
.rtop2:hover,.item-cart:hover:after{color:#333}
.boxinp{text-align: center;padding: 10px}
.boxinp label{margin-left: 5px;vertical-align: middle}
.rtop2::before{content:"\f07a";font-family:FontAwesome;font-size:20px;font-style:normal;font-weight:700}
.rtop2::after{display:block}
.rtop2{font-size: 20px;text-align: center;cursor:pointer;font-weight:700;position:fixed;top:150px;padding:5px 10px;background:#fff;left:15px;color:#920000!important}
#cart2{display: none;position: fixed;left: 0;top: 0;width: 100%;background: rgb(51 51 51 / 0.9);height: 100%;padding: 200px 68px}
.carname{margin-right: 10px;padding: 10px;display: inline-block;color: #fff;text-transform: uppercase;font-weight: 700;font-size: 12px}
.boxinp span{margin-right: 10px}
[data-theme="dark"] table.content tr td{background: #222;border: 1px solid #444;border-bottom: 0;border-top: 0}
[data-theme="dark"] .itemdesc{color: #ddd}  </style>    <a class="rtop2" id="rtop2"></a>
<div class="daemon">
                                                                                                                                                                  <span style="color: #920000;font-size: 28px;font-weight: bold;background: #fff;padding: 5px;text-transform: uppercase;">Mugiwara Shop</span><span style="color: white;font-size: 15px;font-weight: bold;margin-left: 10px;">A melhor loja de diversos para o player.</span>
</div>
<div class="boxinp">
                                                <span>Filtar por:</span><input name="option" id="tipo0" onchange="rb_onchange(this)" type="radio" /><label for="tipo0">Todos</label>  <input name="option" id="tipo1" onchange="rb_onchange(this)" type="radio" /><label for="tipo1">Time Nacional</label>      <input name="option" id="tipo2" onchange="rb_onchange(this)" type="radio" /><label for="tipo2">Time Internacional</label><input name="option" id="tipo4" onchange="rb_onchange(this)" type="radio" /><label for="tipo4">Bando Preferido de One Piece</label><input name="option" id="tipo5" onchange="rb_onchange(this)" type="radio" /><label for="tipo5">Diversos</label><input name="option" id="tipo3" onchange="rb_onchange(this)" type="radio" /><label for="tipo3">Bônus</label>
</div>
                                                                                                                                                                                                                           
<table class="content">
                                                                                                                                                                                                                                            <tbody class="itens"></tbody>   
</table>
<div id="cart2">
                                                                                                                                                                                                                                                                                                               
 <div id="cart">
                                                                     
 <div class="carname">
                            Carrinho de Compras                           
 </div>
                        Clique no item para excluí-lo do carrinho de compras.                                                                                                                                                                                                                                                                                                                                                                                                                                     
 <div class="cart">
                                                                                                                                                                                                                                                                                                                                                                                                                                                           
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                           
 </div>
                                                                                                                                                                                                                                                             
 <div>
                                                                                                                                                                                  <span class="myPoints"> </span>      <span class="total">Suas compras totalizam um valor de <span id="totalVal" class="totalVal">0</span> Cash</span>                                                                           
 </div>
                                                                                                                                                                                                                                                                                                                 
 <div class="daemon">
                                                                                                                                                                                                                                                                                                                                                                                                                                 
 <button type="button" value="Enviar Pedido" onclick="buyItems()" class="butenviar">
                                                                                                                                                                                          Enviar Pedido                                                                                                                                                                                         
 </button>
                                                                                                                                                                                                                                                                                                                                                                                         
 <button type="button" value="Resetar Carrinho" onclick="resetItems()" class="butreset">
                                                                                                                                                                                          Resetar Carrinho                                                                                                                                                                                       
 </button>
                                                                                                                                                     
 <button type="button" value="Voltar as compras " class="butrret" id="butrret">
                                                                                                                                                                                          Voltar as compras                                                                                                                                                                                     
 </button>
                                                                                                                                                                                                                                                                                                                                                                                       
 </div>
</div><input type="hidden" id="fa-generated-title" name="txtstart" /><script>
function rb_onchange(s) {
 if (s.checked && s.id == "tipo0") {
  $('tr[id*="time"]').css( "display", "inline-block" );
  $('tr[id*="diversos"]').css( "display", "inline-block" );
  $('tr[id*="club"]').css( "display", "inline-block" );
  $('tr[id*="xp"]').css( "display", "inline-block" );
  $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo1") {
  $('tr[id*="time"]').css( "display", "inline-block" );
  $('tr[id*="diversos"]').css( "display", "none" );
  $('tr[id*="club"]').css( "display", "none" );
  $('tr[id*="xp"]').css( "display", "none" );
  $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo3") {
  $('tr[id*="time"]').css( "display", "none" );
  $('tr[id*="diversos"]').css( "display", "none" );
  $('tr[id*="club"]').css( "display", "none" );
  $('tr[id*="xp"]').css( "display", "inline-block" );
  $('tr[id*="bando"]').css( "display", "none" );
      }
      if (s.checked && s.id == "tipo4") {
  $('tr[id*="time"]').css( "display", "none" );
  $('tr[id*="diversos"]').css( "display", "none" );
  $('tr[id*="club"]').css( "display", "none" );
  $('tr[id*="xp"]').css( "display", "none" );
  $('tr[id*="bando"]').css( "display", "inline-block" );
      }
      if (s.checked && s.id == "tipo5") {
  $('tr[id*="time"]').css( "display", "none" );
  $('tr[id*="diversos"]').css( "display", "inline-block" );
  $('tr[id*="club"]').css( "display", "none" );
  $('tr[id*="xp"]').css( "display", "none" );
  $('tr[id*="bando"]').css( "display", "none" );
      }
      else if (s.checked && s.id == "tipo2") {
  $('tr[id*="time"]').css( "display", "none" );
  $('tr[id*="diversos"]').css( "display", "none" );
  $('tr[id*="club"]').css( "display", "inline-block" );
  $('tr[id*="xp"]').css( "display", "none" );
  $('tr[id*="bando"]').css( "display", "none" );
      }
    }
</script><script>
$(document).ready(function(){
  $('#rtop2').click(function(){
    $('#cart2').toggle();
  });
});
 
$(document).ready(function(){
  $('#butrret').click(function(){
    $('#cart2').toggle();
  });
});
 
$(document).ready(function(){
$('<style>.rtop2:after{content:"0"}</style>').appendTo('head');
$("#wrap").click(function(){
var cont = $('.cart span').size();
$('<style>.rtop2:after{content:"'+cont+'"}</style>').appendTo('head');
})});
</script>

Atenciosamente,
RafaelS.

Funcionou perfeitamente, thanks mano.

Ótimo!

Tópico resolvido Movido para "Questões resolvidas".