Ajustar Loja de HTML

Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá!

Gostaria de uns ajustes na minha loja HTML o código que estou a usar é este:

Código:

<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: ''
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: ''
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: ''
    },

 
  };
 
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></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="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
      '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseFloat($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $(item).remove();
  }
  function buyItems() {


    $('.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;
    });
 final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
    jQuery.post('/privmsg', {
                'mode': 'post',
                'post': '1',
                'folder': 'inbox',
                'usergroup': '1',
                'subject': 'Master Publicitário - Pedido da Loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }
 
  $(window).load(function(){  $('.item:last').after('<tr class="item"><td class="icone" style="width: 10%;"><img src="http://i19.servimg.com/u/f19/18/07/03/67/rt10.png" /></td><td style="width: 50%;"><strong  id="rank">Texto + Cor do rank</strong><br /></td><td><ul><li class="" data-myprice="200" id="separetteus"><img src="http://i.imgur.com/qdiucii.png" /> Preço: 1500 pontos</li><br /><li><input type="button" id="mateushsop" onclick="" value="Adicionar ao carrinho" /></li></ul></td></tr>');   
 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul').prepend('<input type=color name="teste" style="padding: 1px;width: 25px;border: 1px solid gray;background: none"></input><input type="text" id="rankteus" value=""></input>'); 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul > li:nth-child(5) > input[type="button"]').on('click', function(){
    if($('#itemteus').text() == "Texto + Cor do rank"){alert("Remova o item antes de comprar novamente!");
    return false}else {
    var ttt = $('input[type="color"]').val();
    var tt = $('#rankteus').val();
    texto += '\n\n [b]Texto + Cor do rank:[/b] Cor: ' + ttt + ' Rank: ' +  tt + '\n'; 
    }
 });
     
     
      $(document).on('click', '#mateushsop', function(){
       
              $('.cart').append('<span class="item-cart2" id="itemteus" onclick="$(this).remove(); $total -= 200;">Texto + Cor do rank</span>');
          $total += 200;
        setInterval(function(){  $('.total').html('Valor total: ' + $total + ' pontos');}, 1000);
                             
       
        });
       

       
       
       
       
 

 
       
 

    });
 
 
</script>
<style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome, #rank {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;
}
  .item-cart2 {
  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;
}
#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 {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style>  <div class="warn">
Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br><br>
• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br>
• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br>
• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br><br>
Caso tenha alguma dúvida contate a equipa de moderação.
</div><br><div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table><div id="cart">
  <div class="cart"></div>
  <span class="total"></span>
</div><div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
</div>

Basicamente queria agora retirar aquele campo que esta em vermelho "Texto + Cor do rank" sem danificar o código porque já estive a tentar e não consegui:


E depois queria colocar por baixo dos títulos como "Divulgação por Mensagem Privada; Divulgação por Assinatura; Divulgação no Final dos Tópicos" uma pequena descrição por baixo algo como:

- https://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones

Deixo aqui a página HTML da Loja: http://master-publicitario.forumeiros.com/h1-master-publicitario-loja

Olá,

Então você quer tirar totalmente o Texo + cor e deixar Divulgação no Final dos Tópicos como a última opção, certo? E depois a descrição você já pode adicionar no espaço correspondente. Apenas me confirme se é isso mesmo que eu entendi que eu finalizo o código.

Att.

@Ace quero retirar como esta na print aquele campo do "Texto + Cor" e colocar em cada título por baixo uma pequena descrição percebeu?

@Edit:
Altere pra este código

Código:

<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: ''
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: ''
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: ''
    },

 
  };
 
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></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="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
      '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseFloat($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $(item).remove();
  }
  function buyItems() {


    $('.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;
    });
 final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
    jQuery.post('/privmsg', {
                'mode': 'post',
                'post': '1',
                'folder': 'inbox',
                'usergroup': '1',
                'subject': 'Master Publicitário - Pedido da Loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }     
</script><style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome, #rank {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;
}
  .item-cart2 {
  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;
}
#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 {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style> 
<div class="warn">
    Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
     <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - Loja</span>
</div>
<table class="content">
          
   <tbody class="itens">
      
   </tbody>
</table>
<div id="cart">
      
   <div class="cart">
      
   </div>
     <span class="total"></span>
</div>
<div class="daemon">
     <input type="button" value="Concluir compra" onclick="buyItems()" />
</div>

Seria este resultado:
http://supersupport.forumeiros.com/h1-lojajaja

Resultou mas falta colocar as descrições por baixo é possível?

Olá senhor,
Assim que deseja?
http://supersupport.forumeiros.com/h1-lojajaja
Se quer assim, altere o código pra baixo:

Código:

<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: 'testeeeeeeeeeeee'
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: 'testeeeeeeeeeeeeeeee'
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: 'testeeeeeeeeeeee'
    },

 
  };
 
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></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="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
      '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseFloat($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $(item).remove();
  }
  function buyItems() {


    $('.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;
    });
 final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
    jQuery.post('/privmsg', {
                'mode': 'post',
                'post': '1',
                'folder': 'inbox',
                'usergroup': '1',
                'subject': 'Master Publicitário - Pedido da Loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }     
</script><style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome, #rank {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;
}
  .item-cart2 {
  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;
}
#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 {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style> 
<div class="warn">
     Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
       <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - Loja</span>
</div>
<table class="content">
            
   <tbody class="itens">
       
   </tbody>
</table>
<div id="cart">
        
   <div class="cart">
       
   </div>
       <span class="total"></span>
</div>
<div class="daemon">
       <input onclick="buyItems()" value="Concluir compra" type="button" />
</div>

Cumprimentos.
Cutie Tuteur

Perfeito amigo obrigado e resolvido.