ArtigosSuporte ao código Loja de Emblemas
3 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
Suporte ao código Loja de Emblemas
por Mirotic 11.10.23 4:14
Detalhes da questão
Endereço do fórum: https://rift.forumeiros.com/
Versão do fórum: phpBB3
Descrição
Oi, há um tempo venho fazendo alterações num código da loja de adons, mas tem um erro que não consigo solucionar de jeito nenhum.
Quando adiciono itens no carrinho mostra a seguinte mensagem no valor total
NaN pontos
Aqui está a loja
https://rift.forumeiros.com/h2-loja-de-teste
Aqui está o código
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/a611d9acaf.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<span style="color: white; font-size: 28px; font-weight: bold;">Loja Online</span>
</div>
<div id="categorias">
<button class="categoriaButton" data-categoria="Todas">Todos</button>
<button class="categoriaButton" data-categoria="Profissões">Profissões</button>
<button class="categoriaButton" data-categoria="Farmácia">Farmácia</button>
<button class="categoriaButton" data-categoria="Armas">Armas</button>
<button class="categoriaButton" data-categoria="Veículos">Veículos</button>
<button class="categoriaButton" data-categoria="Viagem">Viagens</button>
<button class="categoriaButton" data-categoria="Residências">Residências</button>
<button class="categoriaButton" data-categoria="Negócios">Negócios</button>
<button class="categoriaButton" data-categoria="Mascotes">Mascotes</button>
<button class="categoriaButton" data-categoria="Souvenir">Souvenir</button>
<button class="categoriaButton" data-categoria="Black">Blackmarket</button>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<label for="cart-opn" class="abrir-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg></label>
<input type="radio" name="cart-o" class="cart-o" id="cart-opn"></input>
<input type="radio" name="cart-o" class="cart-o" id="cart-csd" checked></input>
<div id="lateral-content">
<label for="cart-csd" class="fechar-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></label></div>
<div id="cart">
<div class="cart">
</div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<!-- Adicione o campo de texto para presente aqui -->
<input type="radio" id="presenteSim" name="presente" value="Sim">
<label for="presenteSim">Enviar como presente</label>
<input type="radio" id="presenteNao" name="presente" value="Não" checked>
<label for="presenteNao">Não é um presente</label>
<br>
<div id="mensagemPresenteDiv" style="display: none;">
<input type="text" id="mensagemPresente" placeholder="Mensagem de presente" />
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" style="display: inline-block;" />
<input type="button" value="Resetar ítens" onclick="resetItems()" style="display: inline-block;" />
</div>
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
categoria: 'Estrelas',
icone: 'https://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA',
promo: false
},
'Helmet': {
categoria: 'Equipamentos',
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha',
promo: false
},
'Glock': {
categoria: 'Armas',
icone: 'https://cdn.awsli.com.br/600x450/225/225655/produto/1406192346e4bbfada5.jpg',
preco: '1400',
descricao: '',
promo: false
},
'Casa I': {
categoria: 'Residências',
icone: 'https://blog.archtrends.com/wp-content/uploads/2022/11/casasdeluxo00.jpeg',
preco: '1000000',
descricao: '',
promo: true
},
'Charmander': {
categoria: 'Pokémons',
icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokémon tipo fogo',
promo: false
}
};
var content = $('.content .itens');
function exibirProdutos(categoriaSelecionada) {
content.empty();
// Crie um array de produtos para classificá-los por preço
var produtosArray = [];
$.each(produtos, function (key, value) {
if (categoriaSelecionada === 'Todas' || value.categoria === categoriaSelecionada) {
produtosArray.push({
nome: key,
preco: parseInt(value.preco),
descricao: value.descricao,
icone: value.icone,
promo: value.promo
});
}
});
// Ordene os produtos em ordem decrescente de preço
produtosArray.sort(function (a, b) {
if (a.promo && !b.promo) {
return -1; // Itens em promoção vão para o topo
} else if (!a.promo && b.promo) {
return 1;
} else {
return b.preco - a.preco;
}
});
// Exiba os produtos na tabela
$.each(produtosArray, function (index, produto) {
var isPromo = produto.promo ? 'promo' : ''; // Verifique se o item está em promoção
content.append(
'<tr class="item">' +
' <td>' +
' <div class="item-box">' +
' <div class="icone"><img src="' + produto.icone + '"/></div>' +
' <div class="nome"><strong>' + produto.nome + '</strong></div>' +
' <div class="item-desc">' + produto.descricao + '</div>' +
' <div class="adicionar"><input class="buyitem ' + isPromo + '" type="button" onclick="addToCart(this)" value="' + produto.preco + '" style="display: inline-block;" /></div>' +
' </div>' +
' </td>' +
'</tr>'
);
});
}
// Função para lidar com o clique nos botões de categoria
$('.categoriaButton').click(function () {
var categoriaSelecionada = $(this).attr('data-categoria');
exibirProdutos(categoriaSelecionada);
});
// Exibir todos os produtos inicialmente
exibirProdutos('Todas');
$.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)");
}
});
// Mostrar/ocultar campo de mensagem de presente com base na escolha do usuário
$('input[name="presente"]').change(function() {
var presenteSelecionado = $('input[name="presente"]:checked').val();
if (presenteSelecionado === 'Sim') {
$('#mensagemPresenteDiv').show();
} else {
$('#mensagemPresenteDiv').hide();
}
});
});
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 presenteSelecionado = $('input[name="presente"]:checked').val();
var mensagemPresente = '';
if (presenteSelecionado === 'Sim') {
mensagemPresente = $('#mensagemPresente').val(); // Obtenha a mensagem de presente do campo de entrada
}
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '<div class="item">' +
' <div class="nome">' + item.charAt(0).toUpperCase() + item.slice(1) + '</div>' +
' <div class="preco">' + preco + ' pontos</div>' +
'</div>';
total += preco;
});
if (mensagemPresente) {
texto += '<div class="mensagem-presente">' + mensagemPresente + '</div>';
}
texto += '<div class="total">Valor total: ' + total + ' pontos</div>';
// Enviar a mensagem HTML
$.post('/post', {
'mode': 'newtopic',
'post': 'Enviar',
'f': '5',
'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 suficientes para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script>
</body>
<style type="text/css">
.i {
font-family: fontAwesome;
}
.header {
display: block;
padding: 60px;
background: var(--gradient);
text-align: center;
}
.header span {
font-family: Playfair Display;
text-transform: uppercase;
font-size: 50px !important;
}
div#categorias {
display: inline-flex;
flex-direction: row;
}
button.categoriaButton {
border: none;
padding: 9px 21.6px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
transition: .3s;
}
button.categoriaButton:hover {
background: #d1d1d1;
}
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;
}
.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: f0;
}
.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;}
.item-box {
display: flex;
align-items: center;
padding: 10px;
margin: 5px;
flex-direction: column;
height: 180px;
justify-content: space-between;
}
tbody.itens {
display: grid;
grid-template-columns: repeat(5, 100fr);
text-align: center;
place-items: center;
justify-content: center;
align-content: center;
column-gap: 0px;
padding: 30px 10px;
}
tr.item {
width: 200px;
display: flex;
background: white;
margin: 10px;
height: 240px;
align-content: center;
justify-content: center;
transition: .5s;
align-items: center;
border: 1px solid #00000026;
}
.preco {
width: 130px;
height: 30px;
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
align-items: center;
font-size: 14px;
font-family: Montserrat;
}
.preco:before {
content: "U$";
font-weight: 700;
margin-right: 2px;
opacity: 40%;
}
input.buyitem {
background: #539ee8;
border: none;
color: white;
padding: 10px 60px;
border-radius: 7px;
margin-top: 20px;
}
.icone img {
width: 100px !important;
height: 100px !important;
object-fit: cover;
margin-bottom: 20px;
border-radius: 15px;
}
.item-desc {
background: #00000087;
position: fixed; /* Altere de "absolute" para "fixed" para acompanhar o cursor */
padding: 10px;
color: white;
border-radius: 8px;
display: none;
z-index: 999; /* Garante que o elemento esteja acima de outros conteúdos */
pointer-events: none; /* Permite que o cursor interaja com os elementos subjacentes */
white-space: nowrap; /* Evita que o texto quebre para a próxima linha */
}
.promo {
background-color: #63ad63 !important;
}
div#lateral-content {
background: #ffffffeb;
position: fixed;
top: 10px;
bottom: 10px;
left: -310px;
border-radius: 10px;
width: 300px;
transition: .3s;
border: 1px solid #0000001c;
backdrop-filter: blur(12px);
}
input#cart-opn:checked ~ #lateral-content {
left: 10px;
}
label.abrir-cart {
background: #4c99ec;
padding: 10px;
position: fixed;
bottom: 30px;
left: 30px;
width: 40px;
height: 40px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 60px;
}
label.abrir-cart svg {
width: 25px;
height: 25px;
fill: aliceblue;
}
</style>
</html>
Mirotic- ***
- Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262 -
Re: Suporte ao código Loja de Emblemas
por tikky 11.10.23 9:57
Olá @Mirotic,
Substitua
Atenciosamente,
tikky.
Substitua
- Código:
$.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)");
}
});
- Código:
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + _userdata.user_points + '</span>');
Atenciosamente,
tikky.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Suporte ao código Loja de Emblemas
por Mirotic 11.10.23 18:24
tikky escreveu:Olá @Mirotic,
Substituapor
- Código:
$.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)");
}
});É uma nova variável implantada no início do ano que informa os pontos do membro quando conectado ao fórum.
- Código:
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + _userdata.user_points + '</span>');
Atenciosamente,
tikky.
Não funcionou!
Mirotic- ***
- Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262 -
Re: Suporte ao código Loja de Emblemas
por Musashi 11.10.23 20:50
Boa tarde @Mirotic!
Peço que altere o código acima por este:
Em caso de não funcionamento, informe por meio desse tópico.
(Aguardo resposta).
Atenciosamente,
o seu colega da comunidade, Musashi!
Peço que altere o código acima por este:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/a611d9acaf.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<span style="color: white; font-size: 28px; font-weight: bold;">Loja Online</span>
</div>
<div id="categorias">
<button class="categoriaButton" data-categoria="Todas">Todos</button>
<button class="categoriaButton" data-categoria="Profissões">Profissões</button>
<button class="categoriaButton" data-categoria="Farmácia">Farmácia</button>
<button class="categoriaButton" data-categoria="Armas">Armas</button>
<button class="categoriaButton" data-categoria="Veículos">Veículos</button>
<button class="categoriaButton" data-categoria="Viagem">Viagens</button>
<button class="categoriaButton" data-categoria="Residências">Residências</button>
<button class="categoriaButton" data-categoria="Negócios">Negócios</button>
<button class="categoriaButton" data-categoria="Mascotes">Mascotes</button>
<button class="categoriaButton" data-categoria="Souvenir">Souvenir</button>
<button class="categoriaButton" data-categoria="Black">Blackmarket</button>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<label for="cart-opn" class="abrir-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg></label>
<input type="radio" name="cart-o" class="cart-o" id="cart-opn"></input>
<input type="radio" name="cart-o" class="cart-o" id="cart-csd" checked></input>
<div id="lateral-content">
<label for="cart-csd" class="fechar-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s-32.8 12.5-45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></label></div>
<div id="cart">
<div class="cart">
</div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<!-- Adicione o campo de texto para presente aqui -->
<input type="radio" id="presenteSim" name="presente" value="Sim">
<label for="presenteSim">Enviar como presente</label>
<input type="radio" id="presenteNao" name="presente" value="Não" checked>
<label for="presenteNao">Não é um presente</label>
<br>
<div id="mensagemPresenteDiv" style="display: none;">
<input type="text" id="mensagemPresente" placeholder="Mensagem de presente" />
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" style="display: inline-block;" />
<input type="button" value="Resetar ítens" onclick="resetItems()" style="display: inline-block;" />
</div>
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
categoria: 'Estrelas',
icone: 'https://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA',
promo: false
},
'Helmet': {
categoria: 'Equipamentos',
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha',
promo: false
},
'Glock': {
categoria: 'Armas',
icone: 'https://cdn.awsli.com.br/600x450/225/225655/produto/1406192346e4bbfada5.jpg',
preco: '1400',
descricao: '',
promo: false
},
'Casa I': {
categoria: 'Residências',
icone: 'https://blog.archtrends.com/wp-content/uploads/2022/11/casasdeluxo00.jpeg',
preco: '1000000',
descricao: '',
promo: true
},
'Charmander': {
categoria: 'Pokémons',
icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokémon tipo fogo',
promo: false
}
};
var content = $('.content .itens');
function exibirProdutos(categoriaSelecionada) {
content.empty();
// Crie um array de produtos para classificá-los por preço
var produtosArray = [];
$.each(produtos, function (key, value) {
if (categoriaSelecionada === 'Todas' || value.categoria === categoriaSelecionada) {
produtosArray.push({
nome: key,
preco: parseInt(value.preco),
descricao: value.descricao,
icone: value.icone,
promo: value.promo
});
}
});
// Ordene os produtos em ordem decrescente de preço
produtosArray.sort(function (a, b) {
if (a.promo && !b.promo) {
return -1; // Itens em promoção vão para o topo
} else if (!a.promo and b.promo) {
return 1;
} else {
return b.preco - a.preco;
}
});
// Exiba os produtos na tabela
$.each(produtosArray, function (index, produto) {
var isPromo = produto.promo ? 'promo' : ''; // Verifique se o item está em promoção
content.append(
'<tr class="item">' +
' <td>' +
' <div class="item-box">' +
' <div class="icone"><img src="' + produto.icone + '"/></div>' +
' <div class="nome"><strong>' + produto.nome + '</strong></div>' +
' <div class="item-desc">' + produto.descricao + '</div>' +
' <div class="adicionar"><input class="buyitem ' + isPromo + '" type="button" onclick="addToCart(this)" data-myprice="' + produto.preco + '" value="' + produto.preco + '" style="display: inline-block;" /></div>' +
' </div>' +
' </td>' +
'</tr>'
);
});
}
$('.categoriaButton').click(function () {
var categoriaSelecionada = $(this).attr('data-categoria');
exibirProdutos(categoriaSelecionada);
});
exibirProdutos('Todas');
$.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)");
}
});
$('input[name="presente"]').change(function() {
var presenteSelecionado = $('input[name="presente"]:checked').val();
if (presenteSelecionado === 'Sim') {
$('#mensagemPresenteDiv').show();
} else {
$('#mensagemPresenteDiv').hide();
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).data('myprice')); // Corrigido para obter o preço corretamente
$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).data('myprice')); // Corrigido para obter o preço corretamente
$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 presenteSelecionado = $('input[name="presente"]:checked').val();
var mensagemPresente = '';
if (presenteSelecionado === 'Sim') {
mensagemPresente = $('#mensagemPresente').val(); // Obtenha a mensagem de presente do campo de entrada
}
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).data('myprice')); // Corrigido para obter o preço corretamente
texto += '<div class="item">' +
' <div class="nome">' + item.charAt(0).toUpperCase() + item.slice(1) + '</div>' +
' <div class="preco">' + preco + ' pontos</div>' +
'</div>';
total += preco;
});
if (mensagemPresente) {
texto += '<div class="mensagem-presente">' + mensagemPresente + '</div>';
}
texto += '<div class="total">Valor total: ' + total + ' pontos</div>';
$.post('/post', {
'mode': 'newtopic',
'post': 'Enviar',
'f': '5',
'subject': 'Pedido da loja',
'message': texto
}, function(data) {
console.log("Pedido enviado com sucesso.");
alert('Pedido enviado com sucesso!');
resetItems();
});
} else {
alert('Você não tem pontos suficientes para concluir a compra.');
}
} else {
alert('Adicione itens ao carrinho antes de concluir a compra.');
}
}
</script>
</body>
</html>
Em caso de não funcionamento, informe por meio desse tópico.
(Aguardo resposta).
Atenciosamente,
o seu colega da comunidade, Musashi!
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Re: Suporte ao código Loja de Emblemas
por Mirotic 12.10.23 1:36
Musashi escreveu:Boa tarde @Mirotic!
Peço que altere o código acima por este:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/a611d9acaf.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<span style="color: white; font-size: 28px; font-weight: bold;">Loja Online</span>
</div>
<div id="categorias">
<button class="categoriaButton" data-categoria="Todas">Todos</button>
<button class="categoriaButton" data-categoria="Profissões">Profissões</button>
<button class="categoriaButton" data-categoria="Farmácia">Farmácia</button>
<button class="categoriaButton" data-categoria="Armas">Armas</button>
<button class="categoriaButton" data-categoria="Veículos">Veículos</button>
<button class="categoriaButton" data-categoria="Viagem">Viagens</button>
<button class="categoriaButton" data-categoria="Residências">Residências</button>
<button class="categoriaButton" data-categoria="Negócios">Negócios</button>
<button class="categoriaButton" data-categoria="Mascotes">Mascotes</button>
<button class="categoriaButton" data-categoria="Souvenir">Souvenir</button>
<button class="categoriaButton" data-categoria="Black">Blackmarket</button>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<label for="cart-opn" class="abrir-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg></label>
<input type="radio" name="cart-o" class="cart-o" id="cart-opn"></input>
<input type="radio" name="cart-o" class="cart-o" id="cart-csd" checked></input>
<div id="lateral-content">
<label for="cart-csd" class="fechar-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s-32.8 12.5-45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></label></div>
<div id="cart">
<div class="cart">
</div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<!-- Adicione o campo de texto para presente aqui -->
<input type="radio" id="presenteSim" name="presente" value="Sim">
<label for="presenteSim">Enviar como presente</label>
<input type="radio" id="presenteNao" name="presente" value="Não" checked>
<label for="presenteNao">Não é um presente</label>
<br>
<div id="mensagemPresenteDiv" style="display: none;">
<input type="text" id="mensagemPresente" placeholder="Mensagem de presente" />
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" style="display: inline-block;" />
<input type="button" value="Resetar ítens" onclick="resetItems()" style="display: inline-block;" />
</div>
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
categoria: 'Estrelas',
icone: 'https://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA',
promo: false
},
'Helmet': {
categoria: 'Equipamentos',
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha',
promo: false
},
'Glock': {
categoria: 'Armas',
icone: 'https://cdn.awsli.com.br/600x450/225/225655/produto/1406192346e4bbfada5.jpg',
preco: '1400',
descricao: '',
promo: false
},
'Casa I': {
categoria: 'Residências',
icone: 'https://blog.archtrends.com/wp-content/uploads/2022/11/casasdeluxo00.jpeg',
preco: '1000000',
descricao: '',
promo: true
},
'Charmander': {
categoria: 'Pokémons',
icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokémon tipo fogo',
promo: false
}
};
var content = $('.content .itens');
function exibirProdutos(categoriaSelecionada) {
content.empty();
// Crie um array de produtos para classificá-los por preço
var produtosArray = [];
$.each(produtos, function (key, value) {
if (categoriaSelecionada === 'Todas' || value.categoria === categoriaSelecionada) {
produtosArray.push({
nome: key,
preco: parseInt(value.preco),
descricao: value.descricao,
icone: value.icone,
promo: value.promo
});
}
});
// Ordene os produtos em ordem decrescente de preço
produtosArray.sort(function (a, b) {
if (a.promo && !b.promo) {
return -1; // Itens em promoção vão para o topo
} else if (!a.promo and b.promo) {
return 1;
} else {
return b.preco - a.preco;
}
});
// Exiba os produtos na tabela
$.each(produtosArray, function (index, produto) {
var isPromo = produto.promo ? 'promo' : ''; // Verifique se o item está em promoção
content.append(
'<tr class="item">' +
' <td>' +
' <div class="item-box">' +
' <div class="icone"><img src="' + produto.icone + '"/></div>' +
' <div class="nome"><strong>' + produto.nome + '</strong></div>' +
' <div class="item-desc">' + produto.descricao + '</div>' +
' <div class="adicionar"><input class="buyitem ' + isPromo + '" type="button" onclick="addToCart(this)" data-myprice="' + produto.preco + '" value="' + produto.preco + '" style="display: inline-block;" /></div>' +
' </div>' +
' </td>' +
'</tr>'
);
});
}
$('.categoriaButton').click(function () {
var categoriaSelecionada = $(this).attr('data-categoria');
exibirProdutos(categoriaSelecionada);
});
exibirProdutos('Todas');
$.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)");
}
});
$('input[name="presente"]').change(function() {
var presenteSelecionado = $('input[name="presente"]:checked').val();
if (presenteSelecionado === 'Sim') {
$('#mensagemPresenteDiv').show();
} else {
$('#mensagemPresenteDiv').hide();
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).data('myprice')); // Corrigido para obter o preço corretamente
$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).data('myprice')); // Corrigido para obter o preço corretamente
$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 presenteSelecionado = $('input[name="presente"]:checked').val();
var mensagemPresente = '';
if (presenteSelecionado === 'Sim') {
mensagemPresente = $('#mensagemPresente').val(); // Obtenha a mensagem de presente do campo de entrada
}
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).data('myprice')); // Corrigido para obter o preço corretamente
texto += '<div class="item">' +
' <div class="nome">' + item.charAt(0).toUpperCase() + item.slice(1) + '</div>' +
' <div class="preco">' + preco + ' pontos</div>' +
'</div>';
total += preco;
});
if (mensagemPresente) {
texto += '<div class="mensagem-presente">' + mensagemPresente + '</div>';
}
texto += '<div class="total">Valor total: ' + total + ' pontos</div>';
$.post('/post', {
'mode': 'newtopic',
'post': 'Enviar',
'f': '5',
'subject': 'Pedido da loja',
'message': texto
}, function(data) {
console.log("Pedido enviado com sucesso.");
alert('Pedido enviado com sucesso!');
resetItems();
});
} else {
alert('Você não tem pontos suficientes para concluir a compra.');
}
} else {
alert('Adicione itens ao carrinho antes de concluir a compra.');
}
}
</script>
</body>
</html>
Em caso de não funcionamento, informe por meio desse tópico.
(Aguardo resposta).
Atenciosamente,
o seu colega da comunidade, Musashi!
Este também n funcionou.
Mirotic- ***
- Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262 -
Re: Suporte ao código Loja de Emblemas
por tikky 13.10.23 1:21
@Mirotic: Peço imensa desculpa! Li incorretamente a questão altere a página HTML para
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/a611d9acaf.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<span style="color: white; font-size: 28px; font-weight: bold;">Loja Online</span>
</div>
<div id="categorias">
<button class="categoriaButton" data-categoria="Todas">Todos</button>
<button class="categoriaButton" data-categoria="Profissões">Profissões</button>
<button class="categoriaButton" data-categoria="Farmácia">Farmácia</button>
<button class="categoriaButton" data-categoria="Armas">Armas</button>
<button class="categoriaButton" data-categoria="Veículos">Veículos</button>
<button class="categoriaButton" data-categoria="Viagem">Viagens</button>
<button class="categoriaButton" data-categoria="Residências">Residências</button>
<button class="categoriaButton" data-categoria="Negócios">Negócios</button>
<button class="categoriaButton" data-categoria="Mascotes">Mascotes</button>
<button class="categoriaButton" data-categoria="Souvenir">Souvenir</button>
<button class="categoriaButton" data-categoria="Black">Blackmarket</button>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<label for="cart-opn" class="abrir-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg></label>
<input type="radio" name="cart-o" class="cart-o" id="cart-opn"></input>
<input type="radio" name="cart-o" class="cart-o" id="cart-csd" checked></input>
<div id="lateral-content">
<label for="cart-csd" class="fechar-cart"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></label></div>
<div id="cart">
<div class="cart">
</div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<!-- Adicione o campo de texto para presente aqui -->
<input type="radio" id="presenteSim" name="presente" value="Sim">
<label for="presenteSim">Enviar como presente</label>
<input type="radio" id="presenteNao" name="presente" value="Não" checked>
<label for="presenteNao">Não é um presente</label>
<br>
<div id="mensagemPresenteDiv" style="display: none;">
<input type="text" id="mensagemPresente" placeholder="Mensagem de presente" />
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" style="display: inline-block;" />
<input type="button" value="Resetar ítens" onclick="resetItems()" style="display: inline-block;" />
</div>
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
categoria: 'Estrelas',
icone: 'https://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA',
promo: false
},
'Helmet': {
categoria: 'Equipamentos',
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha',
promo: false
},
'Glock': {
categoria: 'Armas',
icone: 'https://cdn.awsli.com.br/600x450/225/225655/produto/1406192346e4bbfada5.jpg',
preco: '1400',
descricao: '',
promo: false
},
'Casa I': {
categoria: 'Residências',
icone: 'https://blog.archtrends.com/wp-content/uploads/2022/11/casasdeluxo00.jpeg',
preco: '1000000',
descricao: '',
promo: true
},
'Charmander': {
categoria: 'Pokémons',
icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokémon tipo fogo',
promo: false
}
};
var content = $('.content .itens');
function exibirProdutos(categoriaSelecionada) {
content.empty();
// Crie um array de produtos para classificá-los por preço
var produtosArray = [];
$.each(produtos, function (key, value) {
if (categoriaSelecionada === 'Todas' || value.categoria === categoriaSelecionada) {
produtosArray.push({
nome: key,
preco: parseInt(value.preco),
descricao: value.descricao,
icone: value.icone,
promo: value.promo
});
}
});
// Ordene os produtos em ordem decrescente de preço
produtosArray.sort(function (a, b) {
if (a.promo && !b.promo) {
return -1; // Itens em promoção vão para o topo
} else if (!a.promo && b.promo) {
return 1;
} else {
return b.preco - a.preco;
}
});
// Exiba os produtos na tabela
$.each(produtosArray, function (index, produto) {
var isPromo = produto.promo ? 'promo' : ''; // Verifique se o item está em promoção
content.append(
'<tr class="item">' +
' <td>' +
' <div class="item-box">' +
' <div class="icone"><img src="' + produto.icone + '"/></div>' +
' <div class="nome"><strong>' + produto.nome + '</strong></div>' +
' <div class="item-desc">' + produto.descricao + '</div>' +
' <div class="adicionar"><input class="buyitem ' + isPromo + '" type="button" onclick="addToCart(this)" value="' + produto.preco + '" style="display: inline-block;" /></div>' +
' </div>' +
' </td>' +
'</tr>'
);
});
}
// Função para lidar com o clique nos botões de categoria
$('.categoriaButton').click(function () {
var categoriaSelecionada = $(this).attr('data-categoria');
exibirProdutos(categoriaSelecionada);
});
// Exibir todos os produtos inicialmente
exibirProdutos('Todas');
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + _userdata.user_points + '</span>');
// Mostrar/ocultar campo de mensagem de presente com base na escolha do usuário
$('input[name="presente"]').change(function() {
var presenteSelecionado = $('input[name="presente"]:checked').val();
if (presenteSelecionado === 'Sim') {
$('#mensagemPresenteDiv').show();
} else {
$('#mensagemPresenteDiv').hide();
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).parents('.item').find('.buyitem').val());
$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 presenteSelecionado = $('input[name="presente"]:checked').val();
var mensagemPresente = '';
if (presenteSelecionado === 'Sim') {
mensagemPresente = $('#mensagemPresente').val(); // Obtenha a mensagem de presente do campo de entrada
}
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '<div class="item">' +
' <div class="nome">' + item.charAt(0).toUpperCase() + item.slice(1) + '</div>' +
' <div class="preco">' + preco + ' pontos</div>' +
'</div>';
total += preco;
});
if (mensagemPresente) {
texto += '<div class="mensagem-presente">' + mensagemPresente + '</div>';
}
texto += '<div class="total">Valor total: ' + total + ' pontos</div>';
// Enviar a mensagem HTML
$.post('/post', {
'mode': 'newtopic',
'post': 'Enviar',
'f': '5',
'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 suficientes para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script>
</body>
<style type="text/css">
.i {
font-family: fontAwesome;
}
.header {
display: block;
padding: 60px;
background: var(--gradient);
text-align: center;
}
.header span {
font-family: Playfair Display;
text-transform: uppercase;
font-size: 50px !important;
}
div#categorias {
display: inline-flex;
flex-direction: row;
}
button.categoriaButton {
border: none;
padding: 9px 21.6px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
transition: .3s;
}
button.categoriaButton:hover {
background: #d1d1d1;
}
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;
}
.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: f0;
}
.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;}
.item-box {
display: flex;
align-items: center;
padding: 10px;
margin: 5px;
flex-direction: column;
height: 180px;
justify-content: space-between;
}
tbody.itens {
display: grid;
grid-template-columns: repeat(5, 100fr);
text-align: center;
place-items: center;
justify-content: center;
align-content: center;
column-gap: 0px;
padding: 30px 10px;
}
tr.item {
width: 200px;
display: flex;
background: white;
margin: 10px;
height: 240px;
align-content: center;
justify-content: center;
transition: .5s;
align-items: center;
border: 1px solid #00000026;
}
.preco {
width: 130px;
height: 30px;
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
align-items: center;
font-size: 14px;
font-family: Montserrat;
}
.preco:before {
content: "U$";
font-weight: 700;
margin-right: 2px;
opacity: 40%;
}
input.buyitem {
background: #539ee8;
border: none;
color: white;
padding: 10px 60px;
border-radius: 7px;
margin-top: 20px;
}
.icone img {
width: 100px !important;
height: 100px !important;
object-fit: cover;
margin-bottom: 20px;
border-radius: 15px;
}
.item-desc {
background: #00000087;
position: fixed; /* Altere de "absolute" para "fixed" para acompanhar o cursor */
padding: 10px;
color: white;
border-radius: 8px;
display: none;
z-index: 999; /* Garante que o elemento esteja acima de outros conteúdos */
pointer-events: none; /* Permite que o cursor interaja com os elementos subjacentes */
white-space: nowrap; /* Evita que o texto quebre para a próxima linha */
}
.promo {
background-color: #63ad63 !important;
}
div#lateral-content {
background: #ffffffeb;
position: fixed;
top: 10px;
bottom: 10px;
left: -310px;
border-radius: 10px;
width: 300px;
transition: .3s;
border: 1px solid #0000001c;
backdrop-filter: blur(12px);
}
input#cart-opn:checked ~ #lateral-content {
left: 10px;
}
label.abrir-cart {
background: #4c99ec;
padding: 10px;
position: fixed;
bottom: 30px;
left: 30px;
width: 40px;
height: 40px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 60px;
}
label.abrir-cart svg {
width: 25px;
height: 25px;
fill: aliceblue;
}
</style>
</html>
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Suporte ao código Loja de Emblemas
por Musashi 18.10.23 12:22
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Tópicos semelhantes» Modificar código de loja
» Código de loja não funciona
» Loja de emblemas não envia a mensagem privada aos administradores
» Código da Loja com sistema de aba não funciona
» Ajuda com Código de Loja
» Código de loja não funciona
» Loja de emblemas não envia a mensagem privada aos administradores
» Código da Loja com sistema de aba não funciona
» Ajuda com Código de Loja
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