Início
Olá galera da SSgamers, então estou aqui para compartilhar uma HTML- Loja de icones para colocar em seu Fórumeiros!
https://i.imgur.com/MnKcScf.png
Ícone;
Preço;
Descrição.
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: | ||
| 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>
Ícone;
Preço;
Descrição.
