Adicionar descrição a mensagem gerada loja de pontos
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Adicionar descrição a mensagem gerada loja de pontos
Detalhes da questão
Endereço do fórum:
Versão do fórum: phpBB3
Descrição
Fazendo uso do seguinte código clica consegui adicionar a loja e ela está funcionando, com as modificações que fiz. Porém, gostaria que na mensagem gerada quando uma compra é efetuada que fosse incluída a descrição.
Como está:
![Adicionar descrição a mensagem gerada loja de pontos GW1LWRc](https://i.imgur.com/gW1LWRc.png)
Como gostaria que ficasse:
![Adicionar descrição a mensagem gerada loja de pontos 0UizqFU](https://i.imgur.com/0UizqFU.png)
Última edição por kkmlpk em 29.10.23 1:23, editado 1 vez(es)
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Adicionar descrição a mensagem gerada loja de pontos
Olá @kkmlpk,
Altere a página HTML da loja de pontos para
tikky.
Altere a página HTML da loja de pontos para
- Código:
<script src="//pull.cappuccicons.com/cpf.js"></script>
<script type="text/javascript">
$(function() {
var produtos = {
'Moedas': {
icone: 'https://i.imgur.com/6EfqCtq.png',
descricao: 'Contem cerca de 500 aurum.',
preco: '25',
cat: 1
},
'Pilha de moedas': {
icone: 'https://i.imgur.com/T785urT.png',
descricao: 'Contem cerca de 1.500 aurum.',
preco: '50',
cat: 1
},
'Bolsa pequena': {
icone: 'https://i.imgur.com/7LrDs2t.png',
descricao: 'Contem cerca de 5.000 aurum.',
preco: '100',
cat: 1
},
'Bolsa média': {
icone: 'https://i.imgur.com/nDFIXNE.png',
descricao: 'Contem cerca de 15.000 aurum.',
preco: '200',
cat: 1
},
'Pequena caixa': {
icone: 'https://i.imgur.com/tqXNcSs.png',
descricao: 'Contem cerca de 25.000 aurum.',
preco: '250',
cat: 1
},
'Baú': {
icone: 'https://i.imgur.com/oxlFzNK.png',
descricao: 'Contem cerca de 50.000 aurum.',
preco: '300',
cat: 1
}
};
var content = $('.content-shop');
$.each(produtos, function (key, value) {
content.find('[data-shop-cat="cat' + value.cat + '"] .content-shop-itens').append(
'<tr class="item1">' +
' <td><td class="icone"><img src="' + value.icone + '" /></td>' +
' <td><strong class="nome" style="color: ' + value.color + '">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '">Preço: ' + value.preco + ' Palladium</li>' +
' <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
$('.myPoints').html('Meu saldo de Palladium:<span class="totalPoints">' + _userdata.user_points + '</span>');
$('.tabs > .tab-link').click(function(){
var $this = $(this);
var tab_id = $this.attr('data-shop-tab');
$('.tabs > .tab-link').removeClass('current');
$('.tab-content').removeClass('current');
$this.addClass('current');
$('[data-shop-cat="' + tab_id + '"]').addClass('current');
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item1').find('.nome').text();
var getDesc= $(item).parents('.item1').find('.itemdesc').text().trim();
var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Palladium');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '" data-myprice-description="' + getDesc + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseInt($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Palladium');
$(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 desc = $(this).attr('data-myprice-description');
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " Palladium\n[b]Descrição: [/b]" + desc;
total += preco;
});
texto += '\n\n[b]Valor total:[/b] ' + total + ' Palladium';
$.post('/post', {
'mode': 'reply',
'post': '1',
't': '86',
'subject': 'Pedido da Loja',
'message': texto
}).done(function(e) {
var href = $(e).find('a[href^="/viewtopic"]').attr('href');
location.href = href;
});
} else {
alert("Você não tem Palladium suficiente para efetuar a compra");
}
} else {
alert("Seleccione para comprar");
}
}
</script>
<style type="text/css">
[data-shop-cat] table {
background: var(--fondo3);
border-top: 1px solid var(--fondo2);
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
display: flex;
justify-content: space-around;
width: 100%;
}
table.content {
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
display: flex;
justify-content: space-around;
}
table.content tr td {display: inline-block; width: 100%; text-align: center; margin-bottom: 5px;}
.boxloja {
border: 1px solid var(--fondo3);
}
.content ul, .content ol {
margin-bottom: 1em;
margin-left: 0px;
}
.txtloja {
text-align: center;
font: 40px 'against';
font-weight: bold;
letter-spacing: 5px;
text-transform: uppercase;
padding: 15px;
}
.itens .nome {font-size: 14px; font-family: 'Fira Sans',sans-serif; margin-bottom: 5px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 75px;
width: 50px;
}
.item1 {
margin: 10px;
width: calc(30% - 10px);
padding: 9px;
display: inline-block;
align-items: center;
background: var(--fundo2);
border: var(--border);
}
.item-cart {
display: inline-block;
background: var(--highligh);
margin: 11px 6px;
cursor: pointer;
padding: 6px;
color: black;
border-radius: 4px;
}
.item-cart:before {
content: '\e9b3';
font-family: 'cappuccicons';
color: #000;
padding-right: 5px;
}
.preco:before {
content: '\eb90';
font-family: 'cappuccicons';
font-style: normal;
font-weight: normal;
color: #fff;
font-size: 12px;
padding-right: 5px
}
.itens ul li {list-style-type: none;}
.daemon {
background: var(--backgrint);
text-align: center;
padding: 10px;
}
.itembut { width: 100%; padding: 10px; margin: 5px 0 0; text-transform: uppercase; color: var(--txtlight); font-size: 15px; font-family: 'Poppins'; font-size: 15px; cursor: pointer; }
itembut:hover{opacity: 1}
.itembut{opacity: .9; width: 100%;
padding: 10px;
margin: 5px 0 0;
text-transform: uppercase;
color: #fff;
font-size: 15px;}
.itembut {
border: var(--border);
background: var(--fundo1);
}
button.itembut:after {
content: "Adicionar ao carrinho";
font-weight: 700;
color: var(--txtlight);
font-size: 11px;
}
.daemon > h2 {
border-width: 0;
color: white;
margin: 0;
padding: 0;
text-transform: lowercase;
font: 700 45px 'Enchanted land';
}
#cart {
background: var(--fundo1);
border: var(--border);
padding: 5px;
}
.cart {
min-height: 50px;
padding-left: 55px;
}
.cart:before {
content: '\ec7b';
font-family:'cappuccicons';
font-size: 27px;
color: var(--highgold);
position: absolute;
margin: 17px 10px 0px -37px;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
background: var(--fundo2);
text-transform: uppercase;
font-family: 'poppins';
}
ul.tabs li{
background: none;
color: var(--textcolor);
display: inline-block;
padding: 12px 20px;
cursor: pointer;
}
ul.tabs li.current{
background: var(--highligh);
color: white;
}
.tab-content{
display: none;
}
.tab-content.current{
display: inherit;
}
.icone {
vertical-align: middle;
text-align: center;
}
.icone img {
height: 75px;
width: 50px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: 'poppins';display: block;font-style: italic;font-weight: bold;}
.wndsstxt{
color: var(--textcolor);
font-family: 'Fira Sans',sans-serif;
font-size: 14px;
text-transform: lowercase;
line-height: 120%;
white-space: normal;
text-align: justify;
padding: 15px;
}
.itemdesc {
margin: 10px 0 0;
padding-bottom: 5px;
font-family: 'Poppins';
font-size: 12px;
color: var(--txtlight);
display: block;
font-style: normal;
border-bottom: var(--border);
}
.itemdesc:hover { text-shadow: 0 0 5pxwhite; }
.itens .nome {
color: #fff;
padding: 5px 10px;
display: block;
text-transform: uppercase;
font-size: 17px;
text-shadow: 0 0 10px;
user-select: none;
}
strong.nome {
text-transform: uppercase;
font: 13px 'poppins';
font-weight: bold;
}
tbody.content-shop-itens {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
input {
padding: 0 15px;
background: var(--fundo2);
border: var(--border);
color: var(--txtlight);
height: 22px;
font-size: 12px;
font-family: 'poppins';
font-weight: 400;
outline: none;
box-sizing: border-box;
}
</style>
<main class="content">
<div class="txtloja">Palladium's Shop</div>
<div class="boxloja">
<div class="content-shop">
<ul class="tabs">
<li class="tab-link current" data-shop-tab="cat1">Aurum</li>
<li class="tab-link" data-shop-tab="cat2">Equipamento e Armas</li>
</ul>
<section class="tab-content current" data-shop-cat="cat1">
<header class="daemon">
</header>
<table class="content">
<tbody class="content-shop-itens"></tbody>
</table>
</section>
<section class="tab-content" data-shop-cat="cat2">
<header class="daemon">
</header>
<table class="content">
<tbody class="content-shop-itens"></tbody>
</table>
</section>
</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()" role="button" />
<input type="button" value="Resetar ítens" onclick="resetItems()" role="button" />
</div>
</div></main>
tikky.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
Re: Adicionar descrição a mensagem gerada loja de pontos
Olá, funcionou. Muito obrigada!!
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Adicionar descrição a mensagem gerada loja de pontos
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Código para obter pontos por mensagem, sem utilizar o sistema de pontos?
» Criação de um tópico ao comprar algo na Loja de Pontos
» Ajustes na loja de pontos
» Criar loja de pontos
» Retirar os "dois pontos" da descrição de perfil
» Criação de um tópico ao comprar algo na Loja de Pontos
» Ajustes na loja de pontos
» Criar loja de pontos
» Retirar os "dois pontos" da descrição de perfil
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos