Tabela na Loja de icones

+2
Juan Carlos
Filipe Caetano
6 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Tabela na Loja de icones

Mensagem por Filipe Caetano 06.01.16 21:06

Detalhes da questão


Endereço do fórum: http://equipedayz.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá novamente! Estou na luta para colocar a loja de ícones já faz 8 horas, realmente é muito cansativo mas com a ajuda de vocês eu tenho certeza que vou conseguir, não tenho a mínima noção em JavaScript então peço ajuda de vocês nessa batalha.

É o seguinte, estou querendo colocar uma simples tabela na minha loja, mas não consigo colocar em HTML pois o sistema da loja de inserir itens é em Javascript, ja procurei saber se á formas de inserir tabelas em Javascript mas é muito complicado e confuso, então eu não tive escolha se não a pedir a vocês que sempre nos ajudam!
Código da MINHA tabela que eu quero inserir na loja:
Código:
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv">aaaaaa</td>
    <td class="tg-yxcv">bbbbbbb</td>
    <td class="tg-yxcv">cccccccc</td>
    <td class="tg-yxcv">dddddd</td>
    <td class="tg-yxcv">fffffffffff</td>
    <td class="tg-yxcv">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table>

Código da Loja (Sem alterações, código pego aqui mesmo no forumeiros feito pelo "Daemon":
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
 
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
 
    'Helmet': {
        icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
        preco: '250',
        descricao: 'Capacete de batalha'
    },
 
    'Charmander': {
        icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    }
 
 
  };
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
      $.ajax({
        url: '/u' + _userdata.user_id,
        type: 'GET',
        success: function(responseHtml)
        {
        var myPoints = $('#field_id-13 dd', responseHtml).text();
        $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
        },
        error: function(err)
        {
          console.log("AJAX error in request (Store points)");
        }
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  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] ' + preco + " pontos\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
        resetItems();
      });
      } 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 {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>

<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});

</script>

Agradeço, estou no aguardo!  Feliz
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Juan Carlos 07.01.16 1:45

Amigo teste este código e lembre-se de criar a página em html no modo simples para evitar erros e etc...
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
 
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
 
    'Helmet': {
        icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
        preco: '250',
        descricao: 'Capacete de batalha'
    },
 
    'Charmander': {
        icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    }
 
 
  };
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
      $.ajax({
        url: '/u' + _userdata.user_id,
        type: 'GET',
        success: function(responseHtml)
        {
        var myPoints = $('#field_id-13 dd', responseHtml).text();
        $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
        },
        error: function(err)
        {
          console.log("AJAX error in request (Store points)");
        }
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  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] ' + preco + " pontos\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
        resetItems();
      });
      } 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 {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>

<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});

</script>
</div>
/*testes*/
  <div>
  <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv">aaaaaa</td>
    <td class="tg-yxcv">bbbbbbb</td>
    <td class="tg-yxcv">cccccccc</td>
    <td class="tg-yxcv">dddddd</td>
    <td class="tg-yxcv">fffffffffff</td>
    <td class="tg-yxcv">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table>
      </div>
Juan Carlos

Juan Carlos
*

Membro desde : 09/12/2015
Mensagens : 31
Pontos : 45

http://mydesire-designer.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 07.01.16 4:15

Juan Carlos escreveu:Amigo teste este código e lembre-se de criar a página em html no modo simples para evitar erros e etc...
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
 
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
 
    'Helmet': {
        icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
        preco: '250',
        descricao: 'Capacete de batalha'
    },
 
    'Charmander': {
        icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    }
 
 
  };
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
      $.ajax({
        url: '/u' + _userdata.user_id,
        type: 'GET',
        success: function(responseHtml)
        {
        var myPoints = $('#field_id-13 dd', responseHtml).text();
        $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
        },
        error: function(err)
        {
          console.log("AJAX error in request (Store points)");
        }
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  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] ' + preco + " pontos\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
        resetItems();
      });
      } 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 {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>

<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});

</script>
</div>
/*testes*/
  <div>
  <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv">aaaaaa</td>
    <td class="tg-yxcv">bbbbbbb</td>
    <td class="tg-yxcv">cccccccc</td>
    <td class="tg-yxcv">dddddd</td>
    <td class="tg-yxcv">fffffffffff</td>
    <td class="tg-yxcv">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table>
      </div>
Juan Infelizmente não era isso que eu queria, até por que em um momento em que esta editando eu fiz isso... Só que o que eu queria era poder organizar os itens dentro da tabela. Mesmo assim eu te agradeço por tentar em me ajudar. Feliz
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 07.01.16 23:43

!Up Por favor
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV 08.01.16 14:09

Olá!

Inserir é a parte fácil, mas me diga, isso também seria algo comprável? Ou só enfeite?
Isso muda completamente como farei o código. Piscada

Até!
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 09.01.16 7:54

MateusAnjosV escreveu:Olá!

Inserir é a parte fácil, mas me diga, isso também seria algo comprável? Ou só enfeite?
Isso muda completamente como farei o código. Piscada

Até!
Olá Mateus anjos! Essa idéia minha veio para que eu organiza-se os itens em categorias Exemplos: Arma primária, arma secundária etc. E sim, seria comprável, se der muito trabalho, pode fazer algo simples sem tabela mas pelo menos organizado nessas categorias igual da tabela aonde eu fiz. Obrigado por enquanto. Rindo Feliz
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 10.01.16 2:21

! Up
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 12.01.16 19:29

Up! (perdendo as esperanças...)
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV 12.01.16 19:50

Olá!

Eu esqueci do seu tópico, desculpe. Vamos primeiro pelo HTML, será assim?
Código:
<script type="text/javascript">
  $(function() {
 
 
 
</script>
<style type="text/css">
 
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
 
 
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
  padding: 10px;
  padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv">aaaaaa</td>
    <td class="tg-yxcv">bbbbbbb</td>
    <td class="tg-yxcv">cccccccc</td>
    <td class="tg-yxcv">dddddd</td>
    <td class="tg-yxcv">fffffffffff</td>
    <td class="tg-yxcv">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>


Algo a modificar?
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 12.01.16 19:55

MateusAnjosV escreveu:Olá!

Eu esqueci do seu tópico, desculpe. Vamos primeiro pelo HTML, será assim?
Código:
<script type="text/javascript">
  $(function() {
 
 
 
</script>
<style type="text/css">
  
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
  
  
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
  padding: 10px;
  padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv">aaaaaa</td>
    <td class="tg-yxcv">bbbbbbb</td>
    <td class="tg-yxcv">cccccccc</td>
    <td class="tg-yxcv">dddddd</td>
    <td class="tg-yxcv">fffffffffff</td>
    <td class="tg-yxcv">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>


Algo a modificar?
Oii, simplesmente o sistema de compra deixou de funcionar, tipo, deu até que certo, mas agora o que deixou de funcionar foi o sistema Triste to achando que o que quero fazer nao tem como fazer, eu acho.

@EDIT: Só ficou no visual sabe? mas as funcao de aparecer os pontos, etc parou de funcionar
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 15.01.16 16:19

up
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 17.01.16 0:04

Up! Meu projeto esta quase pronto, precisamos desta loja, seria muito bacana para os players ...
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead 17.01.16 2:08

Vou dar uma analisada e ver o que posso fazer.

@Edit:

Não entendi exatamente qual alteração quer fazer. Pode desenhar? Fica melhor..
Sir_Undead

Sir_Undead
***

Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 18.01.16 19:01

Sir_Undead escreveu:Vou dar uma analisada e ver o que posso fazer.

@Edit:

Não entendi exatamente qual alteração quer fazer. Pode desenhar? Fica melhor..
Olá Undead, mais ou menos isto:
Tabela na Loja de icones 2encl1g

Será que é possivel? ou seria muito complicado? O que eu queria fazer era fazer uma tabela, com os nomes dos tipos de itens em cima, e dentro do quadrado a imagem do item, mas com o sistema de loja funcionando entende? a tabela seria apenas o visual. Se não tivesse a tabela nao tem como eu colocar "Arma 1, Arma secundaria, Iten 1, Iten 2 Etc entende? Se não tiver como fazer a tabela, nao tem problema, eu só queria organizar os itens em grupo para o cliente comprar.
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead 18.01.16 19:36

Entendi, da pra fazer sim, acho que é fácil até. Vou tentar aqui. De qualquer forma, o sem alteração nenhuma já não funciona comigo direito. A MP pro ADM não é enviada e nada acontece dps da compra.
Sir_Undead

Sir_Undead
***

Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 19.01.16 18:35

Sir_Undead escreveu:Entendi, da pra fazer sim, acho que é fácil até. Vou tentar aqui. De qualquer forma, o sem alteração nenhuma já não funciona comigo direito. A MP pro ADM não é enviada e nada acontece dps da compra.
Estranho, por que eu já resolvi esse problema de MP, não me lembro se eu tinha criado o post ou se achei em algum tutorial, que pena, pois sem isso de nada vale o sistema, pois o Admin tem que saber o ato da compra, mas beleza, não tem problema, qualquer coisa se estiver tudo certinho e faltar apenas isto farei um novo tópico, feliz feliz por estar me ajudando! Feliz Muito feliz Feliz Muito feliz Feliz Muito feliz
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot 19.01.16 19:28

Olá, boa tarde!
Se bem entendi, você necessita de um sistema semelhante a este:

http://www.cicacenter.com.br/?pid=4
Tabela na Loja de icones K5PLl0j

Como pode ver, adaptei o código da loja e adicionei em abas para separar o conteúdo.

Caso seja isso, posso lhe fornecer o código e um tutorial explicativo(só será trabalhoso adicionar os produtos..).


Até! =)
Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 20.01.16 3:39

Troubleshoot escreveu:Olá, boa tarde!
Se bem entendi, você necessita de um sistema semelhante a este:

http://www.cicacenter.com.br/?pid=4
Tabela na Loja de icones K5PLl0j

Como pode ver, adaptei o código da loja e adicionei em abas para separar o conteúdo.

Caso seja isso, posso lhe fornecer o código e um tutorial explicativo(só será trabalhoso adicionar os produtos..).


Até! =)
Legal! que bacana Troubleshoot, mas será que pega certinho com o sistema da loja também pegando? Um abraço, até logo
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot 20.01.16 10:26

Sim!
Eu fiz este sistema baseado no código criado pelo @Daemon. Apenas ocultei o sistema de compra, já que em meu website não é necessário.

Olha, é um código bastante simples, porem, tem que se ber configurado para que as categorias em abas não 'buguem'.

Para cada aba, temos que mudar uma opção no código da loja.
Vou facilitar isso! Apenas preciso que você separe os produtos que serão mostrados em categorias, exemplo:
Tabela na Loja de icones TAhUl0r

Cada página .JS, é uma categoria de produtos diferente para o sistema de abas.
Quando fizer essas páginas, apenas me informe os links e nomes que irão aparecer nas abas.

Att! =)
Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 20.01.16 16:18

Troubleshoot escreveu:Sim!
Eu fiz este sistema baseado no código criado pelo @Daemon. Apenas ocultei o sistema de compra, já que em meu website não é necessário.

Olha, é um código bastante simples, porem, tem que se ber configurado para que as categorias em abas não 'buguem'.

Para cada aba, temos que mudar uma opção no código da loja.
Vou facilitar isso! Apenas preciso que você separe os produtos que serão mostrados em categorias, exemplo:
Tabela na Loja de icones TAhUl0r

Cada página .JS, é uma categoria de produtos diferente para o sistema de abas.
Quando fizer essas páginas, apenas me informe os links e nomes que irão aparecer nas abas.

Att! =)
TroubleShoot seria tipo assim:
Tabela na Loja de icones 2s60ljs
Só que ai nao tem nada no codigo, o que eu poderia colocar? até logo Feliz
@Edit: São só essas categorias mesmo:
Traje
Item 3
Item 2
Item 1
Arma Secundaria
Arma Primaria
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 22.01.16 16:37

@Up
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 23.01.16 18:38

@up Ajuda/Confuso
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 25.01.16 22:42

!up
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot 26.01.16 12:46

Bom dia!
Peço desculpas pela minha demora em responder, mas estou bastante ocupado...

Preciso que adicione os produtos normalmente, seguindo o tutorial. Apenas preciso que separe os produtos por páginas .JS

Att.
Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV 26.01.16 15:06

Olá Filipe!

Eu lhe peço desculpas por toda essa demora, espero que consiga resolver a sua questão.
Eu fiz uma loja especialmente para você:
Código:
<script type="text/javascript">
  $(function() {
  $('#ver').click(function(e){
   
        e.preventDefault();
        $('#achat_user_prefs').fadeToggle();
        });
       
  html = '';
  total = '';
 setInterval(function(){
      $('#achat_user_prefs').html(html);
      }, 100);
 
  $('.tg-yxcv').append('<div class="comprar" style="float: right;color: green;font-weight: bold;font-size: 14px">C</div>'); 
  $('.tg-yxcv').each(function(){
  r = $(this).text();
  tot = $(this).attr('preco');
  $(this).find('.comprar').click(function(){
  html += r + '<br>'; 
  total += tot;
alert("Adicionado ao carrinho.");
 
  });
 
  });
 
  });
 
 
</script>
<style type="text/css">
      #achat_user_prefs span {color: red;position: absolute;margin-left:40%;margin-top: -15px;}
  #achat_user_prefs {
    position: absolute;
    color: black;
    background: #DDD;
    padding: 10px;
    border: 1px solid #BBB;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-weight: bold;
    text-shadow: 0 1px white;
    box-shadow: 3px 3px 10px #888, inset 0 20px 20px #EEE;
    max-height: 200px;
    overflow: auto;
    left: 5%;
    font-size: 12px;
    min-height: 200px;
    min-width: 200px;
    margin-top: -290px;
    text-align: center;
  display: none;
}
 
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
 
 
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
  padding: 10px;
  padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style><div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table><div id="cart">
  <div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
  <tr>
    <th class="tg-tstl">Arma Primaria<br></th>
    <th class="tg-tstl">Arma Secundaria<br></th>
    <th class="tg-tstl">Item 1<br></th>
    <th class="tg-tstl">Item 2<br></th>
    <th class="tg-tstl">Item 3<br></th>
    <th class="tg-tstl">Traje</th>
  </tr>
  <tr>
    <td class="tg-yxcv" preco="100">aaaaaa</td>
    <td class="tg-yxcv" preco="100">bbbbbbb</td>
    <td class="tg-yxcv" preco="100">cccccccc</td>
    <td class="tg-yxcv" preco="100">dddddd</td>
    <td class="tg-yxcv" preco="100">fffffffffff</td>
    <td class="tg-yxcv" preco="100">gggggggg</td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
  <tr>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
    <td class="tg-yxcv"></td>
  </tr>
</table></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div><div class="daemon">
  <div id="achat_user_prefs">Carregando...</div>
      <input type="button" style="float: left;background: darkred !important;border-color: #BB2929 !important;box-shadow: 0px 2px 0px 0px #BB2929 inset, 0px 2px 3px #BB2929"  value="Ver carrinho" class="addButton" id="ver" />
  <input type="button" style="background: green !important;border-color: green !important;box-shadow: 0px 2px 0px 0px green inset, 0px 2px 3px green;" value="Concluir compra" class="addButton" id="concluir" onclick="$.post('/privmsg', { 'mode': 'post', 'post': '1', 'folder': 'inbox', 'usergroup': '1', 'subject': 'Pedido da loja', 'message': '[color=white]' + html + total + '[/color]', }).done(function() { alert('Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens'); html = ''; total = ''; });" />
  <input type="button" style="background: red !important;border-color: #BB2929 !important;box-shadow: 0px 2px 0px 0px #BB2929 inset, 0px 2px 3px #BB2929"  value="Resetar ítens" class="addButton" onclick="html = ''; total = ''; alert('Resetado');" />
     
</div>

O que acha? Algumas funções são limitadas, devido ao meu tempo disponível, me perdoe.
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Guh_. 26.01.16 15:22

Esse código e para por no javascript ou na folha css ? '-'
Guh_.

Guh_.
*

Membro desde : 08/01/2016
Mensagens : 33
Pontos : 69

http://brg-samp.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano 26.01.16 19:44

Olá pessoal, quero agradecer a todos que disponibilizaram do seu tempo por me ajudar, creio também que de tantas visualizações, novos membro também irão utilizar este sistema. Obrigado MateusAnjosV, Troubleshoot e Juan Carlos por tentarem me ajudar, estou desistindo do Post, até mais pessoal, valeu!
Filipe Caetano

Filipe Caetano
*

Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47

http://equipedayz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV 26.01.16 20:16

É uma pena. Aos futuros usuários que vão utilizar: o meu último código funciona.

Tabela na Loja de icones Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos