Como eu consigo por mais de um icone na loja de icones do fórum.

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

Atendido / Resolvido Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por JrMAFiA 17.11.15 14:35

Detalhes da questão


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

Descrição


Galera to tendo uma certa dificuldade de adicionar mais um icone para a pessoa comprar em meu fórum,olhei o tutorial  https://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones mais não consegui colocar mais um icone para as pessoas poder comprar no tutorial fala que é depois da virgula mais sou pessimo em HTML,por isso to tendo essa difículdade grande.
JrMAFiA

JrMAFiA
Usuário avançado

Masculino
Inscrito dia : 20/04/2015
Mensagens : 377
Pontos ativos : 643

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por MateusAnjosV 17.11.15 14:37

Boa tarde!

Teste esse código:
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {

    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
   
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
  'nomeicon': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
    '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'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  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>

Feliz
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1714
Pontos ativos : 2356

http://holder.forumeiros.com/

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por JrMAFiA 17.11.15 14:40

mateus eu ja tenho esse codigo colocado em meu fórum,mais eu não consigo por mais de um icone.
JrMAFiA

JrMAFiA
Usuário avançado

Masculino
Inscrito dia : 20/04/2015
Mensagens : 377
Pontos ativos : 643

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por MateusAnjosV 17.11.15 14:41

Boa tarde!

Você o testou? Eu acrescentei mais um ícone:
Código:
'nomeicon': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
Verifique... diga quantos quer adicionar.

Feliz
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1714
Pontos ativos : 2356

http://holder.forumeiros.com/

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por JrMAFiA 17.11.15 14:44

A sim mateus,eu quero 8,mais pelo que eu vi depois disso }, voce acrescentou mais um ?
JrMAFiA

JrMAFiA
Usuário avançado

Masculino
Inscrito dia : 20/04/2015
Mensagens : 377
Pontos ativos : 643

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por MateusAnjosV 17.11.15 14:49

Boa tarde!

Vou lhe explicar e fornecer o código, ok?
Explicação:
A base para adicionar é essa:
Código:
'nomeicon': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
Com isso adicionaremos mais um icon!
Onde adicionar? No código procure por:
Código:
  'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
Você deve adicionar após a ,
Ex:
Código:
  'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },

'nomeicon': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
Código:
Terá de alterar a url, leia o código!!! Ok? Eu comentei ele, apenas leia e substitua.
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {

    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
    
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
  'nomeicon': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
'nomeicon2': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
'nomeicon3': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
'nomeicon4': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
'nomeicon5': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },
'nomeicon6': {
        icone: 'URLNOVOICON',
        preco: '2000',
        descricao: 'DESCRIÇÃONOVOICON'
    },

    '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'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
  
  
  };
  
  
  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>
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1714
Pontos ativos : 2356

http://holder.forumeiros.com/

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por JrMAFiA 17.11.15 14:50

Tendeu agora muito obrigado mesmo mateus Muito feliz
JrMAFiA

JrMAFiA
Usuário avançado

Masculino
Inscrito dia : 20/04/2015
Mensagens : 377
Pontos ativos : 643

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por JrMAFiA 17.11.15 14:52

Só uma pergunta os membros quando comprar eu recebo a notificação ?
JrMAFiA

JrMAFiA
Usuário avançado

Masculino
Inscrito dia : 20/04/2015
Mensagens : 377
Pontos ativos : 643

Atendido / Resolvido Re: Como eu consigo por mais de um icone na loja de icones do fórum.

Mensagem por Chagas 17.11.15 15:36

Olá,
Cuidado com double-post, ao sua pergunta ontem, somente só se for configurado enviando pra conta /u1 (conta fundadora) que irá funcionar tudo perfeitamente.




Wamki


Como eu consigo por mais de um icone na loja de icones do fórum. IX6xWl9
"Eu quero um punhado de estrelas... eu quero a doçura do verbo viver."

Eu sou o Chagas,
Eu aconselho-lhe ler os seguintes tópicos:

Flecha ajudeiros Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Flecha ajudeiros Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Flecha ajudeiros Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

Chagas

Chagas
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/10/2015
Mensagens : 876
Pontos ativos : 1081

https://pelotao.forumeiros.com

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


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