Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Suporte 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

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Suporte ao código Loja de Emblemas

Mensagem 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

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem por tikky 11.10.23 9:57

Olá @Mirotic,

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)");
        }
      });
por
Código:
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + _userdata.user_points + '</span>');
É uma nova variável implantada no início do ano que informa os pontos do membro quando conectado ao fórum.


Atenciosamente,
tikky.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7821
Pontos : 9063

Ir para o topo Ir para baixo

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem por Mirotic 11.10.23 18:24

tikky escreveu:Olá @Mirotic,

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)");
        }
      });
por
Código:
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + _userdata.user_points + '</span>');
É uma nova variável implantada no início do ano que informa os pontos do membro quando conectado ao fórum.


Atenciosamente,
tikky.


Não funcionou! Aff
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem por Musashi 11.10.23 20:50

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! Muito feliz
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem 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! Muito feliz


Este também n funcionou.
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem 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

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7821
Pontos : 9063

Ir para o topo Ir para baixo

Tópico resolvido Re: Suporte ao código Loja de Emblemas

Mensagem por Musashi 18.10.23 12:22

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Permissões neste sub-fórum
Não podes responder a tópicos