[AddOn] Criar loja de ícones
+29
Mixeuzinho
BichodoMato
SSChaos
Luiz
Heishiro
Hancki
YouTube3
Admin Easy Cheats
Aesth
Allenkar_
Jhonn Walked
HilterHP
Fraise
Master A
Shek
motinhas
GM_Bardock15
RafaelS.
Holkis
VitorC.
KauanPixel
IsmaelS.
cocas20
Mauricio Molina
Troubleshoot
MateusA
Shaman
JScript
Daemon
33 participantes
Página 2 de 2
Página 2 de 2 • 1, 2
[AddOn] Criar loja de ícones
Relembrando a primeira mensagem :
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:
Importante: Leia as notações no ínicio do código! |
Última edição por Daemon em 13.11.15 15:42, editado 6 vez(es)
Re: [AddOn] Criar loja de ícones
Acabei de testar novamente e funciona na perfeição.cocas20 escreveu:Amigo no meu não funciona, ja criei um conta de teste e ta dando erro na mesma...
Se essa moeda for um campo de perfil ou o valor ficar registado no perfil de cada usuário, podemos usar isso em vez dos pontos do fórumHeishiro escreveu:existe algum modo de fazer esta loja nao usar pontos de forum e sim soh enviar a mensagem manualmente?
eh que tenho um forum de rpg e temos uma moeda queremos usar
ou seja queria que os itens fossem somente enviado os pedidos pro meu inbox e eu ativaria e descontaria manualmente
Re: [AddOn] Criar loja de ícones
Sim sim eh um valor que fica no forum mas como eu nao manjo muito bem eu nao sei como colocar
Re: [AddOn] Criar loja de ícones
Boa noite.Heishiro escreveu:Sim sim eh um valor que fica no forum mas como eu nao manjo muito bem eu nao sei como colocar
Por favor, aconselhamos que crie uma dúvida separada deste assunto para obter ajuda.
Atenciosamente,
Shek
Re: [AddOn] Criar loja de ícones
Adorei esse plugin. Ótimo!
Última edição por Luiz~ em 08.04.17 23:14, editado 1 vez(es)
Re: [AddOn] Criar loja de ícones
Bug que eu encontrei em meu fórum:
- Os administradores não estão recebendo MP.
Sugestão.
- Usei um perfil teste no fórum pra comprar e consegui, mas os pontos não foram retirados do perfil depois da compra, o que faz com o que o usuário possa repetir a compra quantas vezes quiser.
Os pontos de reputação não podem ser alterados por adminstradores, então creio que usá-los como dinheiro possa ser um problema.
- Os administradores não estão recebendo MP.
Sugestão.
- Usei um perfil teste no fórum pra comprar e consegui, mas os pontos não foram retirados do perfil depois da compra, o que faz com o que o usuário possa repetir a compra quantas vezes quiser.
Os pontos de reputação não podem ser alterados por adminstradores, então creio que usá-los como dinheiro possa ser um problema.
Re: [AddOn] Criar loja de ícones
isadora991 escreveu:Não receber Mp -.-aff
Para que o código funcione, você precisa permitir o uso de formulários externos! Ative pelo painel!
Re: [AddOn] Criar loja de ícones
Daemon escreveu:isadora991 escreveu:Não receber Mp -.-aff
Para que o código funcione, você precisa permitir o uso de formulários externos! Ative pelo painel!
Pode mim dizer onde ativa
Convidado- Convidado
Re: [AddOn] Criar loja de ícones
Gostei muito desse método, só tenho uma dúvida, é possível trocar os "Pontos" geridos na pagina por algum campo de RPG específico? Daqueles que aparecem na ficha do usuário?
Re: [AddOn] Criar loja de ícones
Olá @Mixeuzinho,Mixeuzinho escreveu:tenho tudo, mas como acedo à loja?
Este Setor é reservado para opinar sobre o código apresentado. Qualquer questão deverá ser aberta no setor de códigos.
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: [AddOn] Criar loja de ícones
Seria possível adicionar a funcionabilidade de removar o valor total de pontos da compra diretamente do perfil do usuário que comprou?
Re: [AddOn] Criar loja de ícones
Como que faz pra enviar a MP? Não ta indo, quando fazemos o pedido. Falaram acima que tinha que ativar formulário externo, onde faço isso? Não sei o que tem de errado. Só alterei o que sabia, fiz umas edições no design pra que ficasse de acordo com o estilo que eu queria, mas não entendo por que não funciona;
- 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: 'https://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: 'https://i.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 = $('.shopper .itens');
$.each(produtos, function (key, value) {
content.append(
'<li class="item">' +
' <div class="icone" style="width: 10%;"><img class="product" src="' + value.icone + '" /></div>' +
' <div class="blockinfos"><div class="nome">' + key + '</div><div class="descshop">' + value.descricao + '</div></div>' +
' <div>' +
' <div>' +
' <div class="preco" data-myprice="' + value.preco + '"><img src="https://i.imgur.com/huEIQkG.png" /><span class="valueshop">D$ ' + value.preco + ' dracmas</span></div>' +
' </div>' +
' <br />' +
' <div><input type="buttonbuy" onclick="addToCart(this)" value="Adicionar ao Carrinho" /></div>' +
' </div>' +
'</li>'
);
});
$.ajax({
url: '/u' + _userdata.user_id,
type: 'GET',
success: function(responseHtml)
{
var myPoints = $('#field_id-13 dd', responseHtml).text();
$('.myPoints').html('Meu saldo de dracmas: $ <span class="totalPoints">' + myPoints + ',00</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 dracmas suficiente para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script><style type="text/css">
ul.itens {
width: 1203px;
height: auto;
overflow: auto;
position: relative;
left: -23px;
}
img.product {
width: 100px;
height: 100px;
margin-left: 35px;
}
.blockinfos {
width: 179px;
padding: 10px;
border-top: 1px solid #313131;
}
li.item {
float: left;
width: 200px;
list-style-type: none;
height: 375px;
border-bottom: 1px solid #313131;
border-right: 1px solid #313131;
padding: 10px;
}
span.valueshop {
position: relative;
top: -11px;
font-family: roboto;
color: #cacaca;
margin-left: 0px;
}
.shopper{
border: 1px solid #313131;
font-family: roboto;
background: #0c0c0c;
padding: 0px;
text-align: justify;
margin-top: -1px;
width: 1204px;
position: relative;
right: -1px;
}
.preco img {
width: 30px;
margin-left: 10px;
}
.descshop {
margin-top: 2px;
outline: 1px solid #171717;
outline-offset: 3px;
padding: 7px;
font-size: 11px;
font-family: roboto;
height: 150px;
color: #cacaca;
line-height: 12px;
overflow: auto;
}
.nome {
font-size: 15px;
font-family: cinzel decorative;
color: #cacaca;
width: 150px;
word-spacing: 0px;
letter-spacing: 1px;
text-overflow: ellipsis;
height: 24px;
font-weight: 600;
}
.item-cart {
background: #00d5ab 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;
}
.daemon {
background: #cacaca;
text-align: center;
padding: 10px;
border: 1px solid #2b2b2b;
margin-top: 35px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
span.titleshop {
font-size: 28px;
font-family: cinzel decorative;
color: #000000;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
}
.itens ul li {list-style-type: none;}
#cart {
background: #0c0c0c;
border: 1px solid #313131;
margin-top: 0px;
padding: 5px;
width: 1204px;
position: relative;
left: 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
}
.cart {
background: #171717;
min-height: 50px;
padding: 5px;
border: 1px solid #313131;
border-radius: 5px;
}
input[type="buttonbuy"] {
position: relative;
top: -13px;
width: 165px;
text-align: center;
font-family: cinzel;
left: 8px;
font-size: 11px;
color: #000;
font-weight: 900;
padding: 5px;
cursor: pointer;
letter-spacing: 0.5px;
background: #e6e6e6;
border-radius: 5px;
}
span.total {
margin-top: -8px;
}
.total, .myPoints {
font-size: 13px;
margin-top: 5px;
background: transparent;
display: block;
font-style: normal;
font-weight: 600;
font-family: cinzel;
letter-spacing: 1px;
font-size: 11px;
text-align: center;
padding: 5px;
margin-bottom: 5px;
}
span.totalPoints {
background: #e6e6e6;
color: #000;
padding: 4px;
font-family: initial;
border-radius: 4px;
}
</style>
<div class="daemon">
<span class="titleshop">Loja</span>
</div>
<div class="shopper">
<ul class="itens">
</ul>
</div>
<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>
Re: [AddOn] Criar loja de ícones
Nág Silva escreveu:Como que faz pra enviar a MP? Não ta indo, quando fazemos o pedido. Falaram acima que tinha que ativar formulário externo, onde faço isso? Não sei o que tem de errado. Só alterei o que sabia, fiz umas edições no design pra que ficasse de acordo com o estilo que eu queria, mas não entendo por que não funciona;
- 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: 'https://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: 'https://i.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 = $('.shopper .itens');
$.each(produtos, function (key, value) {
content.append(
'<li class="item">' +
' <div class="icone" style="width: 10%;"><img class="product" src="' + value.icone + '" /></div>' +
' <div class="blockinfos"><div class="nome">' + key + '</div><div class="descshop">' + value.descricao + '</div></div>' +
' <div>' +
' <div>' +
' <div class="preco" data-myprice="' + value.preco + '"><img src="https://i.imgur.com/huEIQkG.png" /><span class="valueshop">D$ ' + value.preco + ' dracmas</span></div>' +
' </div>' +
' <br />' +
' <div><input type="buttonbuy" onclick="addToCart(this)" value="Adicionar ao Carrinho" /></div>' +
' </div>' +
'</li>'
);
});
$.ajax({
url: '/u' + _userdata.user_id,
type: 'GET',
success: function(responseHtml)
{
var myPoints = $('#field_id-13 dd', responseHtml).text();
$('.myPoints').html('Meu saldo de dracmas: $ <span class="totalPoints">' + myPoints + ',00</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 dracmas suficiente para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script><style type="text/css">
ul.itens {
width: 1203px;
height: auto;
overflow: auto;
position: relative;
left: -23px;
}
img.product {
width: 100px;
height: 100px;
margin-left: 35px;
}
.blockinfos {
width: 179px;
padding: 10px;
border-top: 1px solid #313131;
}
li.item {
float: left;
width: 200px;
list-style-type: none;
height: 375px;
border-bottom: 1px solid #313131;
border-right: 1px solid #313131;
padding: 10px;
}
span.valueshop {
position: relative;
top: -11px;
font-family: roboto;
color: #cacaca;
margin-left: 0px;
}
.shopper{
border: 1px solid #313131;
font-family: roboto;
background: #0c0c0c;
padding: 0px;
text-align: justify;
margin-top: -1px;
width: 1204px;
position: relative;
right: -1px;
}
.preco img {
width: 30px;
margin-left: 10px;
}
.descshop {
margin-top: 2px;
outline: 1px solid #171717;
outline-offset: 3px;
padding: 7px;
font-size: 11px;
font-family: roboto;
height: 150px;
color: #cacaca;
line-height: 12px;
overflow: auto;
}
.nome {
font-size: 15px;
font-family: cinzel decorative;
color: #cacaca;
width: 150px;
word-spacing: 0px;
letter-spacing: 1px;
text-overflow: ellipsis;
height: 24px;
font-weight: 600;
}
.item-cart {
background: #00d5ab 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;
}
.daemon {
background: #cacaca;
text-align: center;
padding: 10px;
border: 1px solid #2b2b2b;
margin-top: 35px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
span.titleshop {
font-size: 28px;
font-family: cinzel decorative;
color: #000000;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
}
.itens ul li {list-style-type: none;}
#cart {
background: #0c0c0c;
border: 1px solid #313131;
margin-top: 0px;
padding: 5px;
width: 1204px;
position: relative;
left: 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
}
.cart {
background: #171717;
min-height: 50px;
padding: 5px;
border: 1px solid #313131;
border-radius: 5px;
}
input[type="buttonbuy"] {
position: relative;
top: -13px;
width: 165px;
text-align: center;
font-family: cinzel;
left: 8px;
font-size: 11px;
color: #000;
font-weight: 900;
padding: 5px;
cursor: pointer;
letter-spacing: 0.5px;
background: #e6e6e6;
border-radius: 5px;
}
span.total {
margin-top: -8px;
}
.total, .myPoints {
font-size: 13px;
margin-top: 5px;
background: transparent;
display: block;
font-style: normal;
font-weight: 600;
font-family: cinzel;
letter-spacing: 1px;
font-size: 11px;
text-align: center;
padding: 5px;
margin-bottom: 5px;
}
span.totalPoints {
background: #e6e6e6;
color: #000;
padding: 4px;
font-family: initial;
border-radius: 4px;
}
</style>
<div class="daemon">
<span class="titleshop">Loja</span>
</div>
<div class="shopper">
<ul class="itens">
</ul>
</div>
<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>
Olá @Nág Silva,
Este setor serve para a partilha de códigos e não ao suporte. Se a senhora tiver dúvidas pode abrir no Setor de suporte (códigos)
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: [AddOn] Criar loja de ícones
@Anjel: Em caso de dúvida deve usar o suporte do fórum. Nesta secção só é permitido o feedback dos códigos por parte dos participantes.Anjel escreveu:como faço para ativar agora?
Cordialmente,
tikky.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Página 2 de 2 • 1, 2
Página 2 de 2
Permissões neste sub-fórum
Não podes responder a tópicos