Alterações da loja no fórum

[Cabuloso_Obscure]

Detalhes da questão

Endereço do fórum: https://brasilplayobscure.forumeiros.com/forum
Versão do fórum: AwesomeBB

Descrição

olá! estou com um HTML de loja pro fórum... só que na hora da compra ele não diminui o Cash, teria como fazer com que cada compra ele remova os Cash da conta?

( vi o codigo neste tópico: https://ajuda.forumeiros.com/t114849-suporte-para-codigo-de-loja?highlight=loja+coins )


outro problema tambem é que está com o bugzinho tipo, tem letras e numeros aleatorio (f0d6) do lado do preço

tem tambem como colocar 2 botões clicavel para eu redirecionar os players?
codigo é esse abaixo

Código:

<script type="text/javascript">
      $(function() {
      var produtos = {
 
 
        'Boné da Marinha': {
            icone: 'https://i.imgur.com/5DK7xHe.png',
            preco: '100',
            status: 'A Venda',
            descricao: 'Bônus de 5 aparência<br>Apenas para Marinheiros',
            slot: 'new'
        },
 'Chapéu de Capitão': {
            icone: 'https://i.imgur.com/e9onsbS.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Slot Cabeça<br>Bônus de 10 aparência',
            slot: 'new'
        },
 'Gold Star 5': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 0': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 2': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 3': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 
        'Helmet': {
            icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
            preco: '250',
            status: 'A Venda',
            descricao: 'Capacete de batalha'
        },
 
        'Charmander': {
            icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
            preco: '250',
            status: 'A Venda',
            descricao: 'Pokemón tipo fogo'
        }
 
 
      };
 
 
      var content = $('.content .itens');
          $.each(produtos, function (key, value) {
              content.append(
              '<tr class="item1">' +
              '  <td class="icone"><img src="' + value.icone + '" /></td>' +
              '  <td><strong class="nome">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
              '  <td>' +
              '  <ul>' +
              '  <li><span class="preco" title="' + value.preco + ' Cash" data-myprice="' + value.preco + '">' + value.preco + '</span><span class="istatus">' + value.status + '</span></li>' +
              '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
        '  </ul>' +
              '  </td>' +
              '</tr>'
              );
          });
          $.ajax({
            url: '/u' + _userdata.user_id,
            type: 'GET',
            success: function(responseHtml)
            {
            var myPoints = $('#field_id-13 dd div', responseHtml).text();
            $('.myPoints').html('Você possui um total de <span class="totalPoints">' + myPoints + '</span> Cash');
            },
            error: function(err)
            {
              console.log("AJAX error in request (Store points)");
            }
          });
      });
      var $total = 0;
      function addToCart(item) {
        var getItem = $(item).parents('.item1').find('.nome').text();
        var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
        $total += getPrice;
        $('.total').html('Suas compras totalizaram um valor de <span class="totalVal">' + $total + '</span> Cash');
        $('.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('Suas compras totalizaram um valor de <span class="totalVal">' + $total + '</span> Cash');
        $(item).remove();
      }
      function resetItems() {
        $('.cart').empty();
        $total = 0;
        $('.total').html('Suas compras totalizaram um valor de <span class="totalVal">0</span> Cash');;
      }
      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<br>";
            total += preco;
          });
          texto += '<br><br>[b]Valor total:[/b] ' + total + ' pontos';
          $.post('/post', {
                'mode': 'reply',
                'post': '1',
                't': '24',
                'subject': 'Pedido da loja',
                'message': texto
          }).done(function(e) {
            var href = $(e).find('a[href^="/viewtopic"]').attr('href');
            location.href = href;
          });
          } else {
            alert("Você não tem pontos suficiente para efetuar a compra");
          }
        } else {
          alert("O carrinho está vazio");
        }
      }
    </script>    <style type="text/css">
    table.content {
      background: #fafafa;
      border: 1px solid #eaeaea;
      border-collapse: separate;
      empty-cells: show;
      table-layout: fixed;
      width: 100%;
    }
.itemdesc{height: 28px;margin: 5px 0 0;
    padding-bottom: 5px;
    font-size: 11px;
    display: block;
    border-bottom: 1px solid #ddd}
    .itens .nome {color: #fff;
    padding: 5px 10px;display: block;
    font-size: 12px}
    .itens .icone {
    padding: 10px 0
    }
.cart:before{    content: "Carrinho de compras:";
    text-transform: uppercase;
    padding: 5.3px;
    font-size: 12px;
    float: left;
    font-weight: 700;
    background: #333;
    color: #fff;
    border-radius: 2px}
    .itens .icone img {
      height: 50px;
      width: 50px;
    }
.totalPoints,.totalVal{    padding: 10px;
    background: #ffffff;
    color: #002c54;
    font-weight: 700;
    margin: 0 5px}
button.itembut:after {
    content: "Adicionar ao carrinho";
    font-weight: 700;
    color: #fff;
    font-size: 11px;
}
.preco:before {
    content: "\f0d6";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    padding-right: 5px
}
button.itembut:before {
    content: "\f07a";
    font-family: FontAwesome;
    color: #fff;
    padding-right: 10px;
}
.istatus{width: 50%;
    float: right;
    text-align: center;
    background: #808080;
    color: #fff;
    text-transform: uppercase;
    padding: 2px 5px;
    font-size: 10px}
    .item-cart {display:inline-block;
      background: #002c54;
      margin: 0 4px;
      cursor: pointer;
      font-weight: bold;
      padding: 5px;
      color: white;
      border-radius: 2px;
    }
    table.content tr td {padding: 0;width:100%;display:inline-block;text-align: center;background: #f0f0f0;border: 1px solid #ccc;
    border-bottom: 0;
    border-top: 0}
    .itens ul li {list-style-type: none;}
    .daemon {
      text-align: center;
      padding: 2px;
    }
.preco{color: #fff;
    float: left;
    text-align: center;
    padding: 2px 5px;
    width: 50%}
.anun970{width: 970px;
    margin: 10px auto;
    padding: 4px}
.itembut:hover{opacity: 1}
.itembut{opacity: .9; width: 100%;
    padding: 10px;
    margin: 5px 0 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 15px}
.daemon,.item1,.itens .nome,.preco,.itembut{border-color:#004c92;background:#004c92}
.item1{border-top-width: 10px;
    border-top-style: groove;
    margin: 5px 3px;
    width: 231.6px;
    display: inline-block}
.cart:after{float:right;font-size:10px;content:"Clique no x para excluir o item do carrinho."}
.item-cart:before {
content: "\f00d";
    font-family: FontAwesome;
    color: #fff;
    padding-right: 5px;
}
.butenviar:hover,.butreset:hover{opacity:1}
.butenviar,.butreset{opacity:.9;font-size: 10px;padding: 10px;border-radius:2px;    color: #fff;
    text-transform: uppercase;letter-spacing: 1px;
    margin: 0 5px 10px;
    font-weight: 700}
.butenviar{background: #87c214 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butreset{background: #eb4337 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.cart {
      background: white;
      min-height: 41px;
      padding: 5px;
      border: 1px solid #ddd;
    }
.new{width: 60px;
    height: 60px;
    position: absolute;
    background-repeat: no-repeat;
    margin-top: -11px;
    margin-left: -6px;
    background: url(https://i.imgur.com/Hkv3JUC.png)}
    .total, .myPoints {text-transform: uppercase;
    font-size: 11px;
    margin-top: 5px;
    display: block;
    font-weight: 700;
    width: 50%;
    float: left;
    padding: 5px;
    background: #002c54;
    margin: 10px 0;
    text-align: center;
    color: #fff;
    height: 26px}
    </style>  
<div class="daemon">
                        <span style="color: #004c92;font-size: 28px;font-weight: bold;background: #fff;padding: 5px;text-transform: uppercase;">Mugiwara Shop Equip</span><span style="color: white;font-size: 15px;font-weight: bold;margin-left: 10px;">A melhor loja de equipamentos para o seu personagem.</span>
</div>
                                                                                          
<table class="content">
                                                                                                  <tbody class="itens"></tbody>  
</table>
<div class="anun970">
                                    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>                          
 <!--                              Cabeçalho Grande                              --><ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-2720529644880550" data-ad-slot="9400812425"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
                                                                                          
<div id="cart">
                                                                                                                                                                                      
 <div class="cart">
                                                                                                                                                                      
 </div>
                                                                                                                                      
</div>
                                      
<div>
                                        <span class="myPoints"> </span>      <span class="total">Suas compras totalizaram um valor de <span class="totalVal">0</span> Cash</span>
</div>
                                                                                          
<div class="daemon">
                                                                                                                                            
 <button type="button" value="Enviar Pedido" onclick="buyItems()" class="butenviar">
                                                Enviar Pedido                                              
 </button>
                                                                                                    
 <button type="button" value="Resetar Carrinho" onclick="resetItems()" class="butreset">
                                                Resetar Carrinho                                            
 </button>
                                                                                                  
</div>
<div class="anun970">
                                    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>                          
 <!--                              Cabeçalho Grande                              --><ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-2720529644880550" data-ad-slot="9400812425"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

[tikky]

Olá @Cabuloso_Obscure,

cada compra ele remova os Cash da conta?

Não é possível. É um processo manual que o administrador do fórum deve fazer.

outro problema tambem é que está com o bugzinho tipo, tem letras e numeros aleatorio (f0d6) do lado do preço

Basta instalar o font awesome no seu fórum/ou na página HTML, leia: "Instalação do font awesome".

tem tambem como colocar 2 botões clicavel para eu redirecionar os players?

Deve ser mais assertivo do que deseja. Estes pontos vão ser adicionados onde?


Cordialmente,
pedxz.

[Cabuloso_Obscure]

olá @Pedxz
os botões pegando como base a frase '' CARRINHO DE COMPRAS '' sabe a linha dessa frase? seria no meio dela lado

e muito obrigado por tentar me ajudar <3

[Don Corleone]

Mande o link da página HTML onde o código se encontra. Eu fui o adaptador desta loja, a partir do código do Daemon. Esta é uma versão antiga. Abaixo segue um modelo com filtros e um botão de carrinho de compras.

https://somosmugiwara.forumeiros.com/h101-

[Cabuloso_Obscure]

opa, o link está aqui, amigo.

https://brasilplayobscure.forumeiros.com/h9-loja

[Don Corleone]

Veja se é isto o desejado por você.

Código:

<script type="text/javascript">
      $(function() {
      var produtos = {
 
 
        'Boné da Marinha': {
            icone: 'https://i.imgur.com/5DK7xHe.png',
            preco: '100',
            status: 'A Venda',
            descricao: 'Bônus de 5 aparência<br>Apenas para Marinheiros',
            slot: 'new'
        },
 'Chapéu de Capitão': {
            icone: 'https://i.imgur.com/e9onsbS.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Slot Cabeça<br>Bônus de 10 aparência',
            slot: 'new'
        },
 'Gold Star 5': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 0': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 2': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 'Gold Star 3': {
            icone: 'https://i.imgur.com/taaL40o.png',
            preco: '200',
            status: 'A Venda',
            descricao: 'Stars WHOA',
            slot: 'new'
        },
 
        'Helmet': {
            icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
            preco: '250',
            status: 'A Venda',
            descricao: 'Capacete de batalha'
        },
 
        'Charmander': {
            icone: 'https://i.servimg.com/u/f72/18/07/42/17/shop_i33.png',
            preco: '250',
            status: 'A Venda',
            descricao: 'Pokemón tipo fogo'
        }
 
 
      };
 
 
      var content = $('.content .itens');
          $.each(produtos, function (key, value) {
              content.append(
              '<tr class="item1">' +
              '  <td class="icone"><img src="' + value.icone + '" /></td>' +
              '  <td><strong class="nome">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
              '  <td>' +
              '  <ul>' +
              '  <li><span class="preco" title="' + value.preco + ' Cash" data-myprice="' + value.preco + '">' + value.preco + '</span><span class="istatus">' + value.status + '</span></li>' +
              '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
        '  </ul>' +
              '  </td>' +
              '</tr>'
              );
          });
          $.ajax({
            url: '/u' + _userdata.user_id,
            type: 'GET',
            success: function(responseHtml)
            {
            var myPoints = $('#field_id-13 dd div', responseHtml).text();
            $('.myPoints').html('Você possui um total de <span class="totalPoints">' + myPoints + '</span> Cash');
            },
            error: function(err)
            {
              console.log("AJAX error in request (Store points)");
            }
          });
      });
      var $total = 0;
      function addToCart(item) {
        var getItem = $(item).parents('.item1').find('.nome').text();
        var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
        $total += getPrice;
        $('.total').html('Suas compras totalizaram um valor de <span class="totalVal">' + $total + '</span> Cash');
        $('.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('Suas compras totalizaram um valor de <span class="totalVal">' + $total + '</span> Cash');
        $(item).remove();
      }
      function resetItems() {
        $('.cart').empty();
        $total = 0;
        $('.total').html('Suas compras totalizaram um valor de <span class="totalVal">0</span> Cash');;
      }
      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<br>";
            total += preco;
          });
          texto += '<br><br>[b]Valor total:[/b] ' + total + ' pontos';
          $.post('/post', {
                'mode': 'reply',
                'post': '1',
                't': '24',
                'subject': 'Pedido da loja',
                'message': texto
          }).done(function(e) {
            var href = $(e).find('a[href^="/viewtopic"]').attr('href');
            location.href = href;
          });
          } else {
            alert("Você não tem pontos suficiente para efetuar a compra");
          }
        } else {
          alert("O carrinho está vazio");
        }
      }
    </script>    <style type="text/css">
    table.content {
      background: #fafafa;
      border: 1px solid #eaeaea;
      border-collapse: separate;
      empty-cells: show;
      table-layout: fixed;
      width: 100%;
    }
.itemdesc{height: 28px;margin: 5px 0 0;
    padding-bottom: 5px;
    font-size: 11px;
    display: block;
    border-bottom: 1px solid #ddd}
    .itens .nome {color: #fff;
    padding: 5px 10px;display: block;
    font-size: 12px}
    .itens .icone {
    padding: 10px 0
    }
.cart:before{    content: "Carrinho de compras:";
    text-transform: uppercase;
    padding: 5.3px;
    font-size: 12px;
    float: left;
    font-weight: 700;
    background: #333;
    color: #fff;
    border-radius: 2px}
    .itens .icone img {
      height: 50px;
      width: 50px;
    }
.totalPoints,.totalVal{    padding: 10px;
    background: #ffffff;
    color: #002c54;
    font-weight: 700;
    margin: 0 5px}
button.itembut:after {
    content: "Adicionar ao carrinho";
    font-weight: 700;
    color: #fff;
    font-size: 11px;
}
.preco:before {
    content: "\f0d6";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    padding-right: 5px
}
button.itembut:before {
    content: "\f07a";
    font-family: FontAwesome;
    color: #fff;
    padding-right: 10px;
}
.istatus{width: 50%;
    float: right;
    text-align: center;
    background: #808080;
    color: #fff;
    text-transform: uppercase;
    padding: 2px 5px;
    font-size: 10px}
    .item-cart {display:inline-block;
      background: #002c54;
      margin: 0 4px;
      cursor: pointer;
      font-weight: bold;
      padding: 5px;
      color: white;
      border-radius: 2px;
    }
    table.content tr td {padding: 0;width:100%;display:inline-block;text-align: center;background: #f0f0f0;border: 1px solid #ccc;
    border-bottom: 0;
    border-top: 0}
    .itens ul li {list-style-type: none;}
    .daemon {
      text-align: center;
      padding: 2px;
    }
.preco{color: #fff;
    float: left;
    text-align: center;
    padding: 2px 5px;
    width: 50%}
.anun970{width: 970px;
    margin: 10px auto;
    padding: 4px}
.itembut:hover{opacity: 1}
.itembut{opacity: .9; width: 100%;
    padding: 10px;
    margin: 5px 0 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 15px}
.daemon,.item1,.itens .nome,.preco,.itembut{border-color:#004c92;background:#004c92}
.item1{border-top-width: 10px;
    border-top-style: groove;
    margin: 5px 3px;
    width: 231.6px;
    display: inline-block}
.cart:after{float:right;font-size:10px;content:"Clique no x para excluir o item do carrinho."}
.item-cart:before {
content: "\f00d";
    font-family: FontAwesome;
    color: #fff;
    padding-right: 5px;
}
.butenviar:hover,.butreset:hover{opacity:1}
.butenviar,.butreset{opacity:.9;font-size: 10px;padding: 10px;border-radius:2px;    color: #fff;
    text-transform: uppercase;letter-spacing: 1px;
    margin: 0 5px 10px;
    font-weight: 700}
.butenviar{background: #87c214 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.butreset{background: #eb4337 url(https://i.servimg.com/u/f74/18/12/37/46/highli11.png) repeat-x 0 0}
.cart {
      background: white;
      min-height: 41px;
      padding: 5px;
      border: 1px solid #ddd;
    }
.new{width: 60px;
    height: 60px;
    position: absolute;
    background-repeat: no-repeat;
    margin-top: -11px;
    margin-left: -6px;
    background: url(https://i.imgur.com/Hkv3JUC.png)}
    .total, .myPoints {text-transform: uppercase;
    font-size: 11px;
    margin-top: 5px;
    display: block;
    font-weight: 700;
    width: 50%;
    float: left;
    padding: 5px;
    background: #002c54;
    margin: 10px 0;
    text-align: center;
    color: #fff;
    height: 26px}
    </style> 
<div class="daemon">
                        <span style="color: #004c92;font-size: 28px;font-weight: bold;background: #fff;padding: 5px;text-transform: uppercase;">Mugiwara Shop Equip</span><span style="color: white;font-size: 15px;font-weight: bold;margin-left: 10px;">A melhor loja de equipamentos para o seu personagem.</span>
</div>
                                                                                         
<table class="content">
                                                                                                  <tbody class="itens"></tbody> 
</table>
<div class="anun970">
                                    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>                         
 <!--                              Cabeçalho Grande                              --><ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-2720529644880550" data-ad-slot="9400812425"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
                                                                                         
<div id="cart">
                                                                                                                                                                                     
 <div class="cart">
                                                                                                                                                                     
 </div>
                                                                                                                                     
</div>
                                     
<div>
                                        <span class="myPoints"> </span>      <span class="total">Suas compras totalizaram um valor de <span class="totalVal">0</span> Cash</span>
</div>
                                                                                         
<div class="daemon">
                                                                                                                                           
 <button type="button" value="Enviar Pedido" onclick="buyItems()" class="butenviar">
                                                Enviar Pedido                                             
 </button>
                                                                                                   
 <button type="button" value="Resetar Carrinho" onclick="resetItems()" class="butreset">
                                                Resetar Carrinho                                           
 </button>
 
  <button type="button" value="Redirecionar1">
                                                Redirecionar1                                           
 </button>
 
  <button type="button" value="Redirecionar2">
                                                Redirecionar2                                           
 </button>
                                                                                                 
</div>
<div class="anun970">
                                    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>                         
 <!--                              Cabeçalho Grande                              --><ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-2720529644880550" data-ad-slot="9400812425"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

[Cabuloso_Obscure]

Sim, obrigado.

[tikky]

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