Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Arrumar Menu
Hoje à(s) 1:17 por Mr.Probz

» Imagem de fundo
Hoje à(s) 1:11 por idarkdg

» Mudança De Legenda
Hoje à(s) 1:04 por Mr.Probz

» Ausência dos campos de perfil
Hoje à(s) 0:51 por lavinnia

» Página inicial HTML personalizada
Hoje à(s) 0:41 por Nean

» Membro do mês
Hoje à(s) 0:36 por Nean

» Mudança de dominío pago para gratuito
Ontem à(s) 22:12 por Octávio Ferreira

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Mr.Probz
 
Nean
 
Apollo
 
lavinnia
 
idarkdg
 

Quem está conectado
99 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 91 Visitantes :: 2 Motores de busca

Apollo, Burnquist, Harleen, idarkdg, luuuiiiz, Mr.Probz, Nean, PrisoN†BreaK

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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 Qua 6 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Juan Carlos em Qui 7 Jan 2016 - 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
Nível 4

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

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Qui 7 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Qui 7 Jan 2016 - 23:43

!Up Por favor

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em Sex 8 Jan 2016 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Sab 9 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Dom 10 Jan 2016 - 2:21

! Up

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Ter 12 Jan 2016 - 19:29

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

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em Ter 12 Jan 2016 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Ter 12 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Sex 15 Jan 2016 - 16:19

up

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Dom 17 Jan 2016 - 0:04

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

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead em Dom 17 Jan 2016 - 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
Nível 8

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

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Seg 18 Jan 2016 - 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:


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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Sir_Undead em Seg 18 Jan 2016 - 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
Nível 8

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

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Ter 19 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em Ter 19 Jan 2016 - 19:28

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

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2139
Pontos Ativos : 4674

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Qua 20 Jan 2016 - 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


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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em Qua 20 Jan 2016 - 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:


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
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2139
Pontos Ativos : 4674

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Qua 20 Jan 2016 - 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:


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

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Sex 22 Jan 2016 - 16:37

@Up

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Sab 23 Jan 2016 - 18:38

@up Ajuda/Confuso

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Seg 25 Jan 2016 - 22:42

!up

Filipe Caetano
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Troubleshoot em Ter 26 Jan 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2139
Pontos Ativos : 4674

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

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em Ter 26 Jan 2016 - 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
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por Guh_. em Ter 26 Jan 2016 - 15:22

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

Guh_.
Nível 4

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

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

Resolvido Re: Tabela na Loja de icones

Mensagem por Filipe Caetano em Ter 26 Jan 2016 - 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
Nível 4

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

http://equipedayz.forumeiros.com/

Resolvido Re: Tabela na Loja de icones

Mensagem por MateusAnjosV em Ter 26 Jan 2016 - 20:16

É 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".

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5