Como crio uma loja no portal

3 participantes

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

Tópico resolvido Como crio uma loja no portal

Mensagem por Allenkar_ 15.11.15 20:47

Detalhes da questão


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

Descrição


Detalhes da questão


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

Descrição


Gostaria de criar uma loja no Portal do meu fórum, e usar os pontos ganhos pelo gerador de pontos para os membros comprarem nela, itens para a jornada pokémon deles. gostaria de saber como faço isso, pois dei uma olhada em alguns tutoriais e não consegui.
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Fraise 15.11.15 20:56

Boa noite, autor!

Por gentileza, consulte este tópico:
Seta https://ajuda.forumeiros.com/t99911

Cumprimentos.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Allenkar_ 15.11.15 21:17

O link não está abrindo
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Jhonn Walked 15.11.15 21:22

avatar

Jhonn Walked
**

Membro desde : 07/11/2015
Mensagens : 84
Pontos : 121

http://barao.livreforum.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Allenkar_ 15.11.15 22:38

Eu já tentei, mas não consegui fazer utilizando esse tutorial.
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Allenkar_ 15.11.15 23:31

Olá,
Consegui criar a pagina HTML, mas agora como a coloco no Portal do fórum?

Usei esse código:

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

    'Amulet Coin': {
        icone: 'http://cdn.bulbagarden.net/upload/f/f9/Bag_Amulet_Coin_VI_Sprite.png',
        preco: '150',
        descricao: 'Dobra o valor de dinheiro ganho na Jornada'
    },
 
    'Lucky Egg': {
        icone: 'http://www.serebii.net/itemdex/sprites/luckyegg.png',
        preco: '250',
        descricao: 'Gera um ganho extra de 50% em Lvl ganho pelo Pokémon que o segurar'
    },
 
    'Mega Bracelet': {
        icone: 'http://cdn.bulbagarden.net/upload/3/3e/Bag_Mega_Bracelet_Sprite.png',
        preco: '900',
        descricao: 'Tem a capacidade mega evoluir um pokémon quando este equipado com uma pedra especial'
    },

  'Master Ball': {
        icone: 'http://cdn.bulbagarden.net/upload/6/6d/Bag_Master_Ball_Sprite.png',
        preco: '1000',
        descricao: 'Captura qualquer pokémon sem linha de batalha'
    },
   
  'Raro Shiny': {
        icone: 'http://www.pkparaiso.com/imagenes/xy/sprites/animados-shiny/ditto.gif',
        preco: '1500',
        descricao: 'Compre qualquer pokémon Pokémon Raro Shiny!'
    },
  };
 
 
  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 onclick="buyItems()" value="Concluir compra" type="button" />  <input onclick="resetItems()" value="Resetar ítens" type="button" />
</div>
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Allenkar_ 16.11.15 0:22

Olá @Fraise,
eu utilizei o código e funcionou beleza, mas fui fazer o teste, quando o membro comprou, não chegou a mensagem para mim informando os itens comprados e nem o valor de pontos gastos. Alguém me ajuda?

Segue abaixo o código da minha loja:

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

    'Amulet Coin': {
        icone: 'http://cdn.bulbagarden.net/upload/f/f9/Bag_Amulet_Coin_VI_Sprite.png',
        preco: '150',
        descricao: 'Dobra o valor de dinheiro ganho na Jornada'
    },
  
    'Lucky Egg': {
        icone: 'http://www.serebii.net/itemdex/sprites/luckyegg.png',
        preco: '250',
        descricao: 'Gera um ganho extra de 50% em Lvl ganho pelo Pokémon que o segurar'
    },
  
    'Mega Bracelet': {
        icone: 'http://cdn.bulbagarden.net/upload/3/3e/Bag_Mega_Bracelet_Sprite.png',
        preco: '900',
        descricao: 'Tem a capacidade mega evoluir um pokémon quando este equipado com uma pedra especial'
    },

  'Master Ball': {
        icone: 'http://cdn.bulbagarden.net/upload/6/6d/Bag_Master_Ball_Sprite.png',
        preco: '1000',
        descricao: 'Captura qualquer pokémon sem linha de batalha'
    },
    
  'Raro Shiny': {
        icone: 'http://www.pkparaiso.com/imagenes/xy/sprites/animados-shiny/ditto.gif',
        preco: '1500',
        descricao: 'Compre qualquer pokémon Pokémon Raro Shiny!'
    },
  };
  
  
  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 de Pontos</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 onclick="buyItems()" value="Concluir compra" type="button" />  <input onclick="resetItems()" value="Resetar ítens" type="button" />
</div>
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Allenkar_ 16.11.15 1:02

Problema resolvido!
Já resolvi  o problema, sozinho mesmo!
Allenkar_

Allenkar_
**

Membro desde : 01/05/2014
Mensagens : 90
Pontos : 146

http://poke-mind.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Como crio uma loja no portal

Mensagem por Fraise 17.11.15 2:27

É bom quando vamos em busca da solução para os nossos próprios problemas, é da maneira em que aprendemos algo. Muito feliz

Como - Como crio uma loja no portal Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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