Tabela na Loja de icones

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

Resolvido Tabela na Loja de icones

Mensagem por Filipe Caetano em 06/01/16, 07:06 pm

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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Juan Carlos em 06/01/16, 11:45 pm

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>
avatar

Juan Carlos
Nível 4

Masculino
Inscrito dia : 09/12/2015
Mensagens : 31
Pontos Ativos : 45

Ver perfil do usuário http://mydesire-designer.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 07/01/16, 02:15 am

@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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 07/01/16, 09:43 pm

!Up Por favor
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em 08/01/16, 12:09 pm

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é!
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1444
Pontos Ativos : 2025

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 09/01/16, 05:54 am

@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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 10/01/16, 12:21 am

! Up
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 12/01/16, 05:29 pm

Up! (perdendo as esperanças...)
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em 12/01/16, 05:50 pm

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?
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1444
Pontos Ativos : 2025

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 12/01/16, 05:55 pm

@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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 15/01/16, 02:19 pm

up
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 16/01/16, 10:04 pm

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

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead em 17/01/16, 12:08 am

Vou dar uma analisada e ver o que posso fazer.

@Edit:

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

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 212

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 18/01/16, 05:01 pm

@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:


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

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead em 18/01/16, 05:36 pm

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

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 212

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 19/01/16, 04:35 pm

@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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em 19/01/16, 05:28 pm

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

http://www.cicacenter.com.br/?pid=4


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é! =)
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2196
Pontos Ativos : 2939

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 20/01/16, 01:39 am

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

http://www.cicacenter.com.br/?pid=4


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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em 20/01/16, 08:26 am

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:


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! =)
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2196
Pontos Ativos : 2939

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 20/01/16, 02:18 pm

@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:


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:

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
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 22/01/16, 02:37 pm

@Up
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 23/01/16, 04:38 pm

@up Ajuda/Confuso
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 25/01/16, 08:42 pm

!up
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em 26/01/16, 10:46 am

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

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2196
Pontos Ativos : 2939

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em 26/01/16, 01:06 pm

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1444
Pontos Ativos : 2025

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Guh_. em 26/01/16, 01:22 pm

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

Guh_.
Nível 4

Masculino
Inscrito dia : 08/01/2016
Mensagens : 33
Pontos Ativos : 69

Ver perfil do usuário http://brg-samp.forumeiros.com/forum

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em 26/01/16, 05:44 pm

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!
avatar

Filipe Caetano
Nível 4

Masculino
Inscrito dia : 04/01/2016
Mensagens : 33
Pontos Ativos : 47

Ver perfil do usuário http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em 26/01/16, 06:16 pm

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

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1444
Pontos Ativos : 2025

Ver perfil do usuário http://ajuda.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum