Detalhes da questão

Endereço do fórum:
Versão do fórum: phpBB3

Descrição

Fazendo uso do seguinte código clica consegui adicionar a loja e ela está funcionando, com as modificações que fiz. Porém, gostaria que na mensagem gerada quando uma compra é efetuada que fosse incluída a descrição.

Como está:


Como gostaria que ficasse:

Olá @kkmlpk,

Altere a página HTML da loja de pontos para

Código:

<script src="//pull.cappuccicons.com/cpf.js"></script>
        <script type="text/javascript">
          $(function() {
          var produtos = {
       
        'Moedas': {
        icone: 'https://i.imgur.com/6EfqCtq.png',
        descricao: 'Contem cerca de 500 aurum.',
        preco: '25',
        cat: 1
        },
       
        'Pilha de moedas': {
        icone: 'https://i.imgur.com/T785urT.png',
        descricao: 'Contem cerca de 1.500 aurum.',
        preco: '50',
        cat: 1
        },
       
        'Bolsa pequena': {
        icone: 'https://i.imgur.com/7LrDs2t.png',
        descricao: 'Contem cerca de 5.000 aurum.',
        preco: '100',
        cat: 1
        },
       
        'Bolsa média': {
        icone: 'https://i.imgur.com/nDFIXNE.png',
        descricao: 'Contem cerca de 15.000 aurum.',
        preco: '200',
        cat: 1
        },
       
        'Pequena caixa': {
        icone: 'https://i.imgur.com/tqXNcSs.png',
        descricao: 'Contem cerca de 25.000 aurum.',
        preco: '250',
        cat: 1
        },
       
        'Baú': {
        icone: 'https://i.imgur.com/oxlFzNK.png',
        descricao: 'Contem cerca de 50.000 aurum.',
        preco: '300',
        cat: 1
        }
       
          };
       
       
          var content = $('.content-shop');
              $.each(produtos, function (key, value) {
       
                  content.find('[data-shop-cat="cat' + value.cat + '"] .content-shop-itens').append(
                  '<tr class="item1">' +
                  '  <td><td class="icone"><img src="' + value.icone + '" /></td>' +
                  '  <td><strong class="nome" style="color: ' + value.color + '">' + key + '</strong><i class="itemdesc"><div class="' + value.slot + '"></div>' + value.descricao + '</i></td>' +
                  '  <td>' +
                  '  <ul>' +
                  '  <li class="preco" data-myprice="' + value.preco + '">Preço: ' + value.preco + ' Palladium</li>' +
                  '  <li><button class="itembut" type="button" onclick="addToCart(this)" value="Adicionar ao carrinho"></button></li>' +
                  '  </ul>' +
                  '  </td>' +
                  '</tr>'
                  );
              });
         
         
            $('.myPoints').html('Meu saldo de Palladium:<span class="totalPoints">' + _userdata.user_points + '</span>');
       
          $('.tabs > .tab-link').click(function(){
            var $this = $(this);
          var tab_id = $this.attr('data-shop-tab');
          $('.tabs > .tab-link').removeClass('current');
          $('.tab-content').removeClass('current');
       
          $this.addClass('current');
                        $('[data-shop-cat="' + tab_id + '"]').addClass('current');
          });
       
          });
       
       
          var $total = 0;
          function addToCart(item) {
            var getItem = $(item).parents('.item1').find('.nome').text();
            var getDesc= $(item).parents('.item1').find('.itemdesc').text().trim();
            var getPrice = parseInt($(item).parents('.item1').find('.preco').attr('data-myprice'));
            $total += getPrice;
            $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Palladium');
            $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '" data-myprice-description="' + getDesc + '">' + getItem + '</span>');
          }
          function removeFromCart(item) {
            var getPrice = parseInt($(item).attr('data-myprice'));
            $total -= getPrice;
            $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Palladium');
            $(item).remove();
          }
          function resetItems() {
            $('.cart').empty();
            $total = 0;
            $('.total').empty();
          }
          function buyItems() {
            if(!$('.cart').is(':empty')) {
              var valPoints = parseInt($('.totalPoints').text());
              var valTotal = parseInt($('.totalVal').text());
              if(valPoints >= valTotal) {
              var texto = '';
              var total = 0;
              $('.item-cart').each(function() {
                var item = $(this).text();
                var desc = $(this).attr('data-myprice-description');
                var preco = parseInt($(this).attr('data-myprice'));
                texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
                //add line break at the end
                + ':[/b] ' + preco + " Palladium\n[b]Descrição: [/b]" + desc;
                total += preco;
              });
              texto += '\n\n[b]Valor total:[/b] ' + total + ' Palladium';
              $.post('/post', {
                            'mode': 'reply',
                            'post': '1',
                            't': '86',
                            'subject': 'Pedido da Loja',
                            'message': texto
                      }).done(function(e) {
                        var href = $(e).find('a[href^="/viewtopic"]').attr('href');
                        location.href = href;
                      });
                      } else {
                        alert("Você não tem Palladium suficiente para efetuar a compra");
                      }
                    } else {
                      alert("Seleccione para comprar");
                    }
                  }
        </script>
        <style type="text/css">
          [data-shop-cat] table {
          background: var(--fondo3);
          border-top: 1px solid var(--fondo2);
          border-collapse: separate;
          empty-cells: show;
          table-layout: fixed;
          width: 100%;
          display: flex;
          justify-content: space-around;
          width: 100%;
          }
       
        table.content {
                  border-collapse: separate;
                  empty-cells: show;
                  table-layout: fixed;
                  width: 100%;
                  display: flex;
                  justify-content: space-around;
        }
       
        table.content tr td {display: inline-block; width: 100%; text-align: center; margin-bottom: 5px;}
       
          .boxloja {
          border: 1px solid var(--fondo3);
          }
       
        .content ul, .content ol {
        margin-bottom: 1em;
        margin-left: 0px;
        }
       
          .txtloja {
        text-align: center;
        font: 40px 'against';
        font-weight: bold;
        letter-spacing: 5px;
        text-transform: uppercase;
        padding: 15px;
        }
       
          .itens .nome {font-size: 14px; font-family: 'Fira Sans',sans-serif; margin-bottom: 5px;}
          .itens .icone {
          text-align: center;
          }
       
          .itens .icone img {
          height: 75px;
          width: 50px;
          }
       
        .item1 {
          margin: 10px;
          width: calc(30% - 10px);
          padding: 9px;
          display: inline-block;
          align-items: center;
        background: var(--fundo2);
            border: var(--border);
        }
       
          .item-cart {
          display: inline-block;
          background: var(--highligh);
          margin: 11px 6px;
          cursor: pointer;
          padding: 6px;
          color: black;
          border-radius: 4px;
          }
       
          .item-cart:before {
          content: '\e9b3';
          font-family: 'cappuccicons';
          color: #000;
          padding-right: 5px;
          }
       
          .preco:before {
          content: '\eb90';
          font-family: 'cappuccicons';
          font-style: normal;   
          font-weight: normal;
          color: #fff;
          font-size: 12px;
          padding-right: 5px
          }
       
       
          .itens ul li {list-style-type: none;}
          .daemon {
          background: var(--backgrint);
          text-align: center;
          padding: 10px;
          }
       
        .itembut { width: 100%; padding: 10px; margin: 5px 0 0; text-transform: uppercase; color: var(--txtlight); font-size: 15px; font-family: 'Poppins'; font-size: 15px; cursor: pointer; }
       
        itembut:hover{opacity: 1}
       
                  .itembut{opacity: .9; width: 100%;
                  padding: 10px;
                  margin: 5px 0 0;
                  text-transform: uppercase;
                  color: #fff;
                  font-size: 15px;}
       
                .itembut {
                  border: var(--border);
                background: var(--fundo1);
                  }
       
                  button.itembut:after {
                  content: "Adicionar ao carrinho";
                  font-weight: 700;
                  color: var(--txtlight);
                  font-size: 11px;
                  }
       
          .daemon > h2 {
          border-width: 0;
          color: white;
          margin: 0;
          padding: 0;
          text-transform: lowercase;
          font: 700 45px 'Enchanted land';
          }
       
        #cart {
        background: var(--fundo1);
        border: var(--border);
        padding: 5px;
        }
       
        .cart { 
        min-height: 50px;
        padding-left: 55px;
        }
       
        .cart:before {
        content: '\ec7b';
        font-family:'cappuccicons';
        font-size: 27px;
        color: var(--highgold);
        position: absolute;
        margin: 17px 10px 0px -37px;
        }
       
          ul.tabs{
          margin: 0px;
          padding: 0px;
          list-style: none;
          background: var(--fundo2);
          text-transform: uppercase;
          font-family: 'poppins';
          }
       
          ul.tabs li{
          background: none;
          color: var(--textcolor);
          display: inline-block;
          padding: 12px 20px;
          cursor: pointer;
          }
       
          ul.tabs li.current{
          background: var(--highligh);
          color: white;
          }
       
          .tab-content{
          display: none;
          }
       
          .tab-content.current{
          display: inherit;
          }
       
          .icone {
          vertical-align: middle;
          text-align: center;
          }
       
          .icone img {
          height: 75px;
          width: 50px;
          }
          .total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: 'poppins';display: block;font-style: italic;font-weight: bold;}
       
          .wndsstxt{
          color: var(--textcolor);
          font-family: 'Fira Sans',sans-serif;
          font-size: 14px;
          text-transform: lowercase;
          line-height: 120%;
          white-space: normal;
          text-align: justify;
          padding: 15px;
          }
       
          .itemdesc {
        margin: 10px 0 0;
            padding-bottom: 5px;
            font-family: 'Poppins';
            font-size: 12px;
            color: var(--txtlight);
            display: block;
            font-style: normal;
            border-bottom: var(--border);
                  }
                  .itemdesc:hover { text-shadow: 0 0 5pxwhite; }
                .itens .nome {
                    color: #fff;
                    padding: 5px 10px;
                    display: block;
                    text-transform: uppercase;
                    font-size: 17px;
                    text-shadow: 0 0 10px;
                    user-select: none;
                }
          strong.nome {
            text-transform: uppercase;
            font: 13px 'poppins';
            font-weight: bold;
        }
       
          tbody.content-shop-itens {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
       
        input {
            padding: 0 15px;
            background: var(--fundo2);
            border: var(--border);
            color: var(--txtlight);
            height: 22px;
            font-size: 12px;
            font-family: 'poppins';
            font-weight: 400;
            outline: none;
            box-sizing: border-box;
        }
       
        </style>
        <main class="content">
          <div class="txtloja">Palladium's Shop</div>
          <div class="boxloja">
            <div class="content-shop">
              <ul class="tabs">
                <li class="tab-link current" data-shop-tab="cat1">Aurum</li>
                <li class="tab-link" data-shop-tab="cat2">Equipamento e Armas</li>
              </ul>
              <section class="tab-content current" data-shop-cat="cat1">
                <header class="daemon">
                </header>
                <table class="content">
                    <tbody class="content-shop-itens"></tbody>
                </table>
              </section>
           
              <section class="tab-content" data-shop-cat="cat2">
                <header class="daemon">       
                </header>
                <table class="content">
                    <tbody class="content-shop-itens"></tbody>
                </table>
              </section>   
       
            </div>
          <div id="cart">
              <div class="cart"></div>
              <span class="myPoints"></span>
              <span class="total"></span>
          </div>
          <div class="daemon">
              <input type="button" value="Concluir compra" onclick="buyItems()" role="button" />
              <input type="button" value="Resetar ítens" onclick="resetItems()" role="button" />
          </div>
        </div></main>

Atenciosamente,
tikky.

Olá, funcionou. Muito obrigada!!