Loja de ícones com categorias

Detalhes da questão

Endereço do fórum: https://pepb.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá Convidado, eu vi que podia se criar uma loja de icons no fórum. Eu cria uma loja se possivel parecida a uma que vi neste fórum: https://www.policiadop.com/

Se puderem me ajudar agradecia

Atenciosamente, Martim286

Olá,

Você pode ver esse tópico.

Não tem como saber qual a loja do site especificado sem o link direto.

Ravic escreveu:Olá,

Você pode ver esse tópico.

Não tem como saber qual a loja do site especificado sem o link direto.

Boas, Ravic!

Encontrei após uma procura, o link da loja do fórum que enviei: https://www.policiadop.com/h8-

Atenciosamente, Martim286

Up Up

Olá @Martim286,

Quais são as categorias que o senhor quer que a loja de ícones tenha?


Aguardo uma resposta sua!
Atenciosamente,
pedxz.

Olá!

Eu desejava uma que dissesse: "Bonificações" e outra dizendo "Icones"

Atenciosamente, Martim286

Up up

Up Up

@Martim286: Crie uma nova página HTML e use o seguinte código:

Código:

<script type="text/javascript">
  $(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado.
    cat: 1 = Bonificações e cat: 2 = Ícones*/
  
    'Gold Star': {
        icone: 'https://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA',
        cat: 1
    },
  
    'Helmet': {
        icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
        preco: '250',
        descricao: 'Capacete de batalha',
        cat: 1
    },
  
    'Charmander': {
        icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo',
        cat: 2
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
  
  
  };
  
  
  var content = $('.content-shop');
      $.each(produtos, function (key, value) {
  
          content.find('[data-shop-cat="cat' + value.cat + '"] .content-shop-itens').append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;">' + (value.icone ? '<img loading="lazy" src="' + value.icone + '" alt="' + key + '" />' : '') + '</td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="https://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" role="button" /></li>' +
          '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
      $.ajax({
        url: '/u' + _userdata.user_id,
        type: 'GET',
        success: function(responseHtml)
        {
        var myPoints = $('#field_id-13 dd', responseHtml).text();
        $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
        },
        error: function(err)
        {
          console.log("AJAX error in request (Store points)");
        }
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  function buyItems() {
    if(!$('.cart').is(':empty')) {
      var valPoints = parseInt($('.totalPoints').text());
      var valTotal = parseInt($('.totalVal').text());
      if(valPoints >= valTotal) {
      var texto = '';
      var total = 0;
      $('.item-cart').each(function() {
        var item = $(this).text();
        var preco = parseInt($(this).attr('data-myprice'));
        texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':[/b] ' + preco + " pontos\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
        resetItems();
      });
      } else {
        alert("Você não tem pontos suficiente para efetuar a compra");
      }
    } else {
      alert("O carrinho está vazio");
    }
  }
</script>
<style type="text/css">
[data-shop-cat] table {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
  .daemon > h2 {
  border-width: 0;
  color: white;
  margin: 0;
  padding: 0;
  }
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<main class="content">
  <h1 class="page-title" style="border-width: 0; padding: 0; margin: 0; margin-bottom: 3rem; color:#3e464c;font-family:Roboto, sans-serif;font-size:3rem;font-weight:500;">Loja</h1>
 <div class="content-shop">
  
  <section data-shop-cat="cat1">
   <header class="daemon"><h2>Bonificações</h2></header>
   <table><tbody class="content-shop-itens"></tbody></table>
  </section>
  
   <section data-shop-cat="cat2">
   <header class="daemon"><h2>Ícones</h2></header>
   <table><tbody class="content-shop-itens"></tbody></table>
  </section>
  
 </div>
</main>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <span class="total"></span>
</div><div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" role="button" />
  <input type="button" value="Resetar ítens" onclick="resetItems()" role="button" />
</div>

Para adicionar um novo ítem a loja basta seguir os passos deste tópico: "[ADDON] Criar loja de ícones". Para adicionar a uma certa categoria em baixo de:

Código:

descricao: 'Pokemón tipo fogo',

adicione:

Código:

cat: 1

1 para "Bonificações"
2 para "Ícones"

Olá!

Infelizmente o HTML que me enviou não surtiu efeito  Como pode ver aqui: https://i.servimg.com/u/f54/20/23/21/47/screen23.png

Aguardo resposta!

Atenciosamente,Martim286

Edite a página HTML e na opção "Você deseja utilizar o início e o final da página do seu fórum" marque como "Sim"!

Editei mas infelizmente não ficou como eu queria  Peço desculpa ocupar demasiado o seu tempo mas os emblemas ficaram despropocionais e não ficaram as categorias como eu desejava..Como se pode ver no link que enviei na minha 3° postagem a loja tem categorias separadas...Não sei explicar bem melhor vendo mesmo :/

Se conseguir me ajudar agradecia

Atenciosamente, Martim286

Edit: Tem aqui a print de como ficou: https://i.servimg.com/u/f54/20/23/21/47/screen24.png

Altere a página para:

Código:

<script type="text/javascript">
   $(function() {
   var produtos = {
  
     /* Ícones da loja abaixo.
     Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
     Não adicione vírgula após o último ítem adicionado.
     cat: 1 = Bonificações e cat: 2 = Ícones*/
  
     'Gold Star': {
         icone: 'https://i.imgur.com/taaL40o.png',
         preco: '200',
         descricao: 'Stars WHOA',
         cat: 1
     },
  
     'Helmet': {
         icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
         preco: '250',
         descricao: 'Capacete de batalha',
         cat: 1
     },
  
     'Charmander': {
         icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
         preco: '250',
         descricao: 'Pokemón tipo fogo',
         cat: 2
     }
     // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
  
  
   };
  
  
   var content = $('.content-shop');
       $.each(produtos, function (key, value) {
  
           content.find('[data-shop-cat="cat' + value.cat + '"] .content-shop-itens').append(
           '<tr class="item">' +
           '  <td class="icone" style="width: 10%;">' + (value.icone ? '<img loading="lazy" src="' + value.icone + '" alt="' + key + '" title="' + value.descricao + '"/>' : '') + '</td>' +
           '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
           '  <td>' +
           '  <ul>' +
           '  <li class="preco" data-myprice="' + value.preco + '"><img src="https://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
           '  <br />' +
           '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" role="button" /></li>' +
           '  </ul>' +
           '  </td>' +
           '</tr>'
           );
       });
       $.ajax({
         url: '/u' + _userdata.user_id,
         type: 'GET',
         success: function(responseHtml)
         {
         var myPoints = $('#field_id-13 dd', responseHtml).text();
         $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
         },
         error: function(err)
         {
           console.log("AJAX error in request (Store points)");
         }
       });
  
   $('.tabs > .tab-link').click(function(){
     var $this = $(this);
   var tab_id = $this.attr('data-shop-tab');
   $('.tabs > .tab-link').removeClass('current');
   $('.tab-content').removeClass('current');
  
   $this.addClass('current');
                 $('[data-shop-cat="' + tab_id + '"]').addClass('current');
   });
  
   });
  
  
   var $total = 0;
   function addToCart(item) {
     var getItem = $(item).parents('.item').find('.nome').text();
     var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
     $total += getPrice;
     $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
     $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
   }
   function removeFromCart(item) {
     var getPrice = parseInt($(item).attr('data-myprice'));
     $total -= getPrice;
     $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
     $(item).remove();
   }
   function resetItems() {
     $('.cart').empty();
     $total = 0;
     $('.total').empty();
   }
   function buyItems() {
     if(!$('.cart').is(':empty')) {
       var valPoints = parseInt($('.totalPoints').text());
       var valTotal = parseInt($('.totalVal').text());
       if(valPoints >= valTotal) {
       var texto = '';
       var total = 0;
       $('.item-cart').each(function() {
         var item = $(this).text();
         var preco = parseInt($(this).attr('data-myprice'));
         texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
         //add line break at the end
         + ':[/b] ' + preco + " pontos\n";
         total += preco;
       });
       texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
       $.post('/privmsg', {
             'mode': 'post',
             'post': '1',
             'folder': 'inbox',
             'usergroup': '1',
             'subject': 'Pedido da loja',
             'message': texto
       }).done(function() {
         alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
         resetItems();
       });
       } else {
         alert("Você não tem pontos suficiente para efetuar a compra");
       }
     } else {
       alert("O carrinho está vazio");
     }
   }
</script>
<style type="text/css">
   [data-shop-cat] table {
   background: #fafafa;
   border: 1px solid #eaeaea;
   border-collapse: separate;
   empty-cells: show;
   table-layout: fixed;
   width: 100%;
   }
   .itens .nome {font-size: 14px;}
   .itens .icone {
   text-align: center;
   }
   .itens .icone img {
   height: 50px;
   width: 50px;
   }
   .item-cart {
   background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
   margin: 3px 4px;
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
   padding: 5px;
   padding-left: 25px;
   color: white;
   border-radius: 3px;
   }
   table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
   .itens ul li {list-style-type: none;}
   .daemon {
   background: #333;
   text-align: center;
   padding: 10px;
   }
   .daemon > h2 {
   border-width: 0;
   color: white;
   margin: 0;
   padding: 0;
   }
   #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;
   }
   ul.tabs{
   margin: 0px;
   padding: 0px;
   list-style: none;
   }
   ul.tabs li{
   background: none;
   color: #222;
   display: inline-block;
   padding: 12px 20px;
   cursor: pointer;
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
   }
   ul.tabs li.current{
   background: #333;
   color: white;
   }
   .tab-content{
   display: none;
   }
   .tab-content.current{
   display: inherit;
   }
   .icone {
   vertical-align: middle;
   text-align: center;
   }
   .icone img {
   height: 50px;
   width: 50px;
   }
   .total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<main class="content">
   <h1 class="page-title" style="border-width: 0; padding: 0; margin: 0; margin-bottom: 3rem; color:#3e464c;font-family:Roboto, sans-serif;font-size:3rem;font-weight:500;">Loja</h1>
   <div class="content-shop">
      <ul class="tabs">
         <li class="tab-link current" data-shop-tab="cat1">Bonificações</li>
         <li class="tab-link" data-shop-tab="cat2">Ícones</li>
      </ul>
      <section class="tab-content current" data-shop-cat="cat1">
         <header class="daemon">
            <h2>Bonificações</h2>
         </header>
         <table>
            <tbody class="content-shop-itens"></tbody>
         </table>
      </section>
      <section class="tab-content" data-shop-cat="cat2">
         <header class="daemon">
            <h2>Ícones</h2>
         </header>
         <table>
            <tbody class="content-shop-itens"></tbody>
         </table>
      </section>
   </div>
   <div id="cart">
      <div class="cart"></div>
      <span class="myPoints"></span>
      <span class="total"></span>
   </div>
   <div class="daemon">
      <input type="button" value="Concluir compra" onclick="buyItems()" role="button" />
      <input type="button" value="Resetar ítens" onclick="resetItems()" role="button" />
   </div>
</main>

Ficou muito bem obrigado!

Pode fechar!

Atenciosamente,Martim286

Tópico resolvido Movido para "Questões resolvidas".