SSGamers - 10 Anos online por você.

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Loja de Icones no Fórum - !

Taxy_InSaniTy
Taxy_InSaniTy
--> Postador Iniciante
--> Postador Iniciante


Mensagens : 29
Moedas : 2061
Data de inscrição : 05/06/2016

Loja de Icones no Fórum - ! Empty Loja de Icones no Fórum - !

Mensagem por Taxy_InSaniTy Ter 5 Fev 2019 - 5:49

Olá galera da SSgamers, então estou aqui para compartilhar uma HTML- Loja de icones para colocar em seu Fórumeiros!



Criar loja de ícones
Aprenda a adicionar uma loja de ícones em seu fórum.
Características e aplicação
Criador: @Daemon
Versão: 1.2
Versão: Todas as versões
Resultado da aplicação:
https://i.imgur.com/MnKcScf.png

Local de instalação
A instalação é única, e pode ser feita apenas criando uma nova página HTML. Para isso, acesse Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão das páginas HTML >> Crie a página, e adicione o seguinte conteúdo

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'    },      '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> 
Nome do ícone;
Ícone;
Preço;
Descrição.



Loja de Icones no Fórum - ! RMplHlOoSfCCDMRAgBXLoQ
Loja de Icones no Fórum - ! KCKcLwcPRt2Apm1K-0_N4w

    Data/hora atual: Qua 8 Dez 2021 - 18:35