Problemas em código HTML - Loja

Problemas em código HTML - Loja

 por IsmaelS. 19.05.15 20:08

Olá!

Eu estou a utilizar este código HTML para uma Loja:

Código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="http://translate.googleapis.com/translate_static/css/translateelement.css">
<script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.Tabs li').click(function(){
                jQuery('.Tabs li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).find('a');
 return false;
        });
jQuery('a.all_itens').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas1').show();
                });
jQuery('a.all_pay').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas2').show();
                });
});
</script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
  $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('span:first').html()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
 
    $('.cart-item').unbind('click');
 
    $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
text += "Total de Pontos = €" + total;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>
<script>
function enviatag(tag, local) {
  var message = "[size=13][font=Trebuchet MS][center][b]Pedido de tag BS[/b][/center][center]&nbsp;[/center][b]Preço total:[/b] 540 pontos[center][/center][b]Tag:[/b] "+tag+"[/font][/size]";
  jQuery(local).html(message);
  jQuery(local).closest('form').find('input[name="post"]').click();
}
$(function() {
  $.get('/profile?mode=editprofile', function(prof) {
      var link=$('form[action="/profile"] .main-head .subtitle a[href^="/u"]',prof).attr('href');
      $.get(link, function(cash) {
        my_cash=$('#profile-advanced-details .main-content .middleline dl:contains("Pontos") dd',cash).text();
        $('.myc cash').html(my_cash);
      });
  });
});
</script>
<style type="text/css">
.cart_items, #checkout{
padding: 10px;
border-radius: 3px;
background: white;
border: 1px solid #cdcdcd;
margin: 2px 10px;
}
.cartWrapper{width:100%;}
.statused li {list-style-type: none;}
.theList li {
list-style-type: upper-hexadecimal;
background: rgb(225, 241, 249);
margin: 1px 3px;
color: white;
font: bold italic 12px helvetica;
border-radius: 3px 5px 5px 3px;
display: inline-block;
padding: 2px 10px 2px 2px;
cursor: pointer;
}
.theList li:before {
content: " ";
position: relative;
display: inline-block;
height: 1px;
width: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgb(113, 194, 235);
left: -14px;
top: 1px;
}
.main .cont, .box_r, .box_t{
padding: 9px;
background: #ebf0f3;
}
.box_r {background: white;}
.LayoutLeft {
padding-left: 150px;
}
.Layout_smallleft {
position: relative;
width: 140px;
margin-left: -150px;
float: left;
}
.Tabs ul {
width: 149px !important;
margin-top: 10px;
border-top: 1px solid #DBE4EF;
border-left: 1px solid #DBE4EF;
}
.Tabs li {
background: #f6f8fb;
color: #808080;
border-bottom: 1px solid #DBE4EF;
font-size: 13px;
}
.Tabs li.active a {
width: 135px;
position: relative;
z-index: 8000;
border-right: 1px solid #fff;
background: #fff !important;
color: #353535 !important;
font-weight: bold;
}
.Tabs li a {
display: block;
padding: 10px 8px;
outline: 0;
color: #8d8d8d;
border-right: 1px solid #DBE4EF;
-webkit-transition: background-color 0.1s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
}
.Tabs li a:hover {
background: #eaeff5;
color: #808080;
}
#usercp_content {
min-height: 395px;
}
.message {
background: #ebfcdf;
padding: 10px;
border: 1px solid #a4cfa4;
color: #0e440e;
line-height: 1.6;
font-size: 12px;
}
.pun table.table td {padding: 10px;}
.pun table.table td.row2 {
background-color: #f1f6f9;
}
input[type="button"] {
 margin: 5px;
}
.Tabs.Layout_smallleft ul {padding: 0px;}
.myc {cursor: pointer;}
#abas1 h4.title {font-size: 17px;color: rgb(22, 74, 145);}
  span.totaler {
background: rgb(245, 241, 220);
border: 1px solid rgb(193, 196, 0);
padding: 4px;
color: rgb(147, 147, 11);
}
</style><div class="main">
  <div class="main-head">
  <div class="page-title"><h2>Loja</h2></div>
  </div>
 <div class="main-content cont">
  <div class="LayoutLeft clearfix">
        <div class="Tabs Layout_smallleft">
  <ul>
      <li class="active">
        <a href="#" title="Todos os ítens" class="all_itens">Todos os ítens</a>
      </li>
                <li>
        <a href="#" title="Carrinho de Compras" class="all_pay">Concluir o pedido</a>
      </li>
  </ul>
</div>
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
<!-- Início aba 1 -->
  <div id="abas1" class="abas">     
      <div class="box_r">
       
        <div class="message" style="margin:10px">
                            <b class="myc">Seus pontos: <cash style="font-style: italic;">2295</cash></b>
                            <br>
            <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png"> Compre com sabedoria, mas verifique se tem pontos suficientes para sua compra.
        </div><div class="main-head">
  <div class="page-title"><h2>Ítens</h2></div>
  </div>
<table class="table" cellspacing="0">
  <tbody class="statused">
<tr id="item1" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Nerd</h4>
 
</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item1" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Preço: 250 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item2" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - TV</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item2" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="325"><img src="http://i.imgur.com/qdiucii.png"> Preço: 325 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item3" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Jedi</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item3" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="450"><img src="http://i.imgur.com/qdiucii.png"> Preço: 450 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item4" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Blue</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item4" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="725"><img src="http://i.imgur.com/qdiucii.png"> Preço: 725 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
   
   
</tr>
    <tr id="item5" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Chuva</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item5" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="900"><img src="http://i.imgur.com/qdiucii.png"> Preço: 900 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item222" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<a id="tag" name="tag" accesskey="g"></a>
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
  <h4 class="title">Texto + Cor de Rank</h4><br><span>Poderá escolher o texto e cor que desejar, <strong>as cores não podem ser idênticas aos da Staff e o texto sem ser ofensivo.</strong>
</span></td>
<td class="col_f_post">
  <ul>
  <input value="Comprar" class="addButton" onclick="enviatag(jQuery('#tagtext').val(),jQuery('#taglocal'));" type="button"> 
  <li class="views desc points" data-myprice="600"><img src="http://i.imgur.com/qdiucii.png"> Preço: 540 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
        <li class="views desc">
<form action="/privmsg" method="post" name="post">
<input name="username[]" style="display:none" value="iChees" type="text">
<input value="Pedido de tag" style="display:none;" maxlength="64" name="subject" class="usernameinput" type="text">
<input id="tagtext" placeholder="Tag (apenas 1 palavra). Exemplo: moto" style="width: 70%;padding: 4.5px 8px;display: inline-block;margin: 6px 0 0 0;" type="text">
  <textarea name="message" style="display:none" id="taglocal"></textarea>
<span class="buttons">
<input style="display:none" name="post" class="addButton" type="submit">
</span>
</form>
</li>
      </ul>
  </td>
</tr>
  </tbody>
</table>
     
      </div>
  </div>
<!-- Fim aba 1 -->

<!-- Início aba 2 --><div id="abas2" class="abas" style="display: none"><div class="box_r"><div class="main-head">
  <div class="page-title"><h2>Carrinho de Compras</h2></div>
  </div><div class="cartWrapper"><div class="cart" id="cartj"><div class="cart_body"><div class="cart_items">
<ul class="theList">
</ul>
</div>
</div>
</div>

    </div><div id="checkout">
    Gostaria de confirmar sua compra? Para isso terá de clicar em "ENVIAR PEDIDO". <br /> Tempo entre 2 - 48 horas para a entrega de seus itens.
<br>
  <span><strong>Para <span style="color:red;"> eliminar algum produto</span> clique nele.</strong><br />Lembre-se de clicar em <strong>"atualizar carrinho"</strong> antes de enviar!<br />Enviar o pedido não irá funcionar de outra forma. <br />Também verifique se você tem pontos suficientes a sua compra!</span>
</div>
  <br />
  <span class="totaler"></span>
  <br />
  <br />
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="IsmaelS.">
<input value="Suporte Design - Pedido Loja" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput">
<textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea>
<span class="buttons">
<input id="submitCart" type="submit" value="Atualizar carrinho" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false;return false;">
 <input type="submit" value="Enviar pedido" name="post" id="sendingBut" disabled="disabled"></span></form>
    </div>
</div>
<!-- Fim aba 2 -->
</div>
            </div>
        </div>           
      </div>
 </div>
</div>

Só que tem um problema, sempre que enviar um pedido aparece algo como isto a PM:


Queria ou alguém que disse-se em que parte do código poderei modificar ou seja queria que aparece-se os ícones da Loja ou o nome da cada item que o utilizador comprar, mas com texto a PM para saber o tipo de pedido, perceberam?

Re: Problemas em código HTML - Loja

 por IsmaelS. 21.05.15 8:43

Re: Problemas em código HTML - Loja

 por MateusA 21.05.15 11:24

Olá @IsmaelS.

Eu ando viajando e ocupado, então, fiz as pressas... Teste:

Código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="http://translate.googleapis.com/translate_static/css/translateelement.css">
<script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.Tabs li').click(function(){
                jQuery('.Tabs li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).find('a');
 return false;
        });
jQuery('a.all_itens').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas1').show();
                });
jQuery('a.all_pay').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas2').show();
                });
});
</script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
  $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('span:first').html()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
 
    $('.cart-item').unbind('click');
 
    $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
 itents =  $('.cart-item').html();
text += "Total de Pontos = €" + total + "Itens pedidos:" + itents;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>
<script>
function enviatag(tag, local) {
  var message = "[size=13][font=Trebuchet MS][center][b]Pedido de tag BS[/b][/center][center]&nbsp;[/center][b]Preço total:[/b] 540 pontos[center][/center][b]Tag:[/b] "+tag+"[/font][/size]";
  jQuery(local).html(message);
  jQuery(local).closest('form').find('input[name="post"]').click();
}
$(function() {
  $.get('/profile?mode=editprofile', function(prof) {
      var link=$('form[action="/profile"] .main-head .subtitle a[href^="/u"]',prof).attr('href');
      $.get(link, function(cash) {
        my_cash=$('#profile-advanced-details .main-content .middleline dl:contains("Pontos") dd',cash).text();
        $('.myc cash').html(my_cash);
      });
  });
});
</script>
<style type="text/css">
.cart_items, #checkout{
padding: 10px;
border-radius: 3px;
background: white;
border: 1px solid #cdcdcd;
margin: 2px 10px;
}
.cartWrapper{width:100%;}
.statused li {list-style-type: none;}
.theList li {
list-style-type: upper-hexadecimal;
background: rgb(225, 241, 249);
margin: 1px 3px;
color: white;
font: bold italic 12px helvetica;
border-radius: 3px 5px 5px 3px;
display: inline-block;
padding: 2px 10px 2px 2px;
cursor: pointer;
}
.theList li:before {
content: " ";
position: relative;
display: inline-block;
height: 1px;
width: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgb(113, 194, 235);
left: -14px;
top: 1px;
}
.main .cont, .box_r, .box_t{
padding: 9px;
background: #ebf0f3;
}
.box_r {background: white;}
.LayoutLeft {
padding-left: 150px;
}
.Layout_smallleft {
position: relative;
width: 140px;
margin-left: -150px;
float: left;
}
.Tabs ul {
width: 149px !important;
margin-top: 10px;
border-top: 1px solid #DBE4EF;
border-left: 1px solid #DBE4EF;
}
.Tabs li {
background: #f6f8fb;
color: #808080;
border-bottom: 1px solid #DBE4EF;
font-size: 13px;
}
.Tabs li.active a {
width: 135px;
position: relative;
z-index: 8000;
border-right: 1px solid #fff;
background: #fff !important;
color: #353535 !important;
font-weight: bold;
}
.Tabs li a {
display: block;
padding: 10px 8px;
outline: 0;
color: #8d8d8d;
border-right: 1px solid #DBE4EF;
-webkit-transition: background-color 0.1s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
}
.Tabs li a:hover {
background: #eaeff5;
color: #808080;
}
#usercp_content {
min-height: 395px;
}
.message {
background: #ebfcdf;
padding: 10px;
border: 1px solid #a4cfa4;
color: #0e440e;
line-height: 1.6;
font-size: 12px;
}
.pun table.table td {padding: 10px;}
.pun table.table td.row2 {
background-color: #f1f6f9;
}
input[type="button"] {
 margin: 5px;
}
.Tabs.Layout_smallleft ul {padding: 0px;}
.myc {cursor: pointer;}
#abas1 h4.title {font-size: 17px;color: rgb(22, 74, 145);}
  span.totaler {
background: rgb(245, 241, 220);
border: 1px solid rgb(193, 196, 0);
padding: 4px;
color: rgb(147, 147, 11);
}
</style><div class="main">
  <div class="main-head">
  <div class="page-title"><h2>Loja</h2></div>
  </div>
 <div class="main-content cont">
  <div class="LayoutLeft clearfix">
        <div class="Tabs Layout_smallleft">
  <ul>
      <li class="active">
        <a href="#" title="Todos os ítens" class="all_itens">Todos os ítens</a>
      </li>
                <li>
        <a href="#" title="Carrinho de Compras" class="all_pay">Concluir o pedido</a>
      </li>
  </ul>
</div>
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
<!-- Início aba 1 -->
  <div id="abas1" class="abas">     
      <div class="box_r">
       
        <div class="message" style="margin:10px">
                            <b class="myc">Seus pontos: <cash style="font-style: italic;">2295</cash></b>
                            <br>
            <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png"> Compre com sabedoria, mas verifique se tem pontos suficientes para sua compra.
        </div><div class="main-head">
  <div class="page-title"><h2>Ítens</h2></div>
  </div>
<table class="table" cellspacing="0">
  <tbody class="statused">
<tr id="item1" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Nerd</h4>
 
</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item1" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Preço: 250 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item2" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - TV</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item2" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="325"><img src="http://i.imgur.com/qdiucii.png"> Preço: 325 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item3" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Jedi</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item3" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="450"><img src="http://i.imgur.com/qdiucii.png"> Preço: 450 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item4" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Blue</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item4" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="725"><img src="http://i.imgur.com/qdiucii.png"> Preço: 725 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
   
   
</tr>
    <tr id="item5" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Chuva</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item5" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="900"><img src="http://i.imgur.com/qdiucii.png"> Preço: 900 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item222" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<a id="tag" name="tag" accesskey="g"></a>
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
  <h4 class="title">Texto + Cor de Rank</h4><br><span>Poderá escolher o texto e cor que desejar, <strong>as cores não podem ser idênticas aos da Staff e o texto sem ser ofensivo.</strong>
</span></td>
<td class="col_f_post">
  <ul>
  <input value="Comprar" class="addButton" onclick="enviatag(jQuery('#tagtext').val(),jQuery('#taglocal'));" type="button"> 
  <li class="views desc points" data-myprice="600"><img src="http://i.imgur.com/qdiucii.png"> Preço: 540 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
        <li class="views desc">
<form action="/privmsg" method="post" name="post">
<input name="username[]" style="display:none" value="iChees" type="text">
<input value="Pedido de tag" style="display:none;" maxlength="64" name="subject" class="usernameinput" type="text">
<input id="tagtext" placeholder="Tag (apenas 1 palavra). Exemplo: moto" style="width: 70%;padding: 4.5px 8px;display: inline-block;margin: 6px 0 0 0;" type="text">
  <textarea name="message" style="display:none" id="taglocal"></textarea>
<span class="buttons">
<input style="display:none" name="post" class="addButton" type="submit">
</span>
</form>
</li>
      </ul>
  </td>
</tr>
  </tbody>
</table>
     
      </div>
  </div>
<!-- Fim aba 1 -->

<!-- Início aba 2 --><div id="abas2" class="abas" style="display: none"><div class="box_r"><div class="main-head">
  <div class="page-title"><h2>Carrinho de Compras</h2></div>
  </div><div class="cartWrapper"><div class="cart" id="cartj"><div class="cart_body"><div class="cart_items">
<ul class="theList">
</ul>
</div>
</div>
</div>

    </div><div id="checkout">
    Gostaria de confirmar sua compra? Para isso terá de clicar em "ENVIAR PEDIDO". <br /> Tempo entre 2 - 48 horas para a entrega de seus itens.
<br>
  <span><strong>Para <span style="color:red;"> eliminar algum produto</span> clique nele.</strong><br />Lembre-se de clicar em <strong>"atualizar carrinho"</strong> antes de enviar!<br />Enviar o pedido não irá funcionar de outra forma. <br />Também verifique se você tem pontos suficientes a sua compra!</span>
</div>
  <br />
  <span class="totaler"></span>
  <br />
  <br />
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="IsmaelS.">
<input value="Suporte Design - Pedido Loja" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput">
<textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea>
<span class="buttons">
<input id="submitCart" type="submit" value="Atualizar carrinho" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false;return false;">
 <input type="submit" value="Enviar pedido" name="post" id="sendingBut" disabled="disabled"></span></form>
    </div>
</div>
<!-- Fim aba 2 -->
</div>
            </div>
        </div>           
      </div>
 </div>
</div>

Re: Problemas em código HTML - Loja

 por cocas20 21.05.15 12:34

Re: Problemas em código HTML - Loja

 por IsmaelS. 21.05.15 18:44

Olá!

@cocas20, não amigo mas ajustar o corpo da mensagem ou seja a mensagem que quando recebemos do pedido.
@MateusA, amigo continua igual amigo, veja como ficou:


Boa viagem!

Re: Problemas em código HTML - Loja

 por MateusA 21.05.15 19:54

@Ismael, na verdade, eu cheguei hoje.
Você notou a: <img ? Então, estamos progredindo.

---

Acrescente em sua CSS:

Código:

.theList li {
list-style-type: none !important;
  float: left;
}

---

Cheque se o HTML está ativado, ok? Ele é essencial.

---

Substitua o código, por esse:

Código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="http://translate.googleapis.com/translate_static/css/translateelement.css">
<script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="http://translate.googleapis.com/translate_static/js/element/10/element_main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.Tabs li').click(function(){
                jQuery('.Tabs li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).find('a');
 return false;
        });
jQuery('a.all_itens').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas1').show();
                });
jQuery('a.all_pay').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas2').show();
                });
});
</script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
  $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('span:first').html()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
 
    $('.cart-item').unbind('click');
 
    $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Valor total da sua compra =' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
 itents =  $('.cart_items').html();
text += "Total de Pontos = €" + total + "\n" + "Itens pedidos:" + itents;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>
<script>
function enviatag(tag, local) {
  var message = "[size=13][font=Trebuchet MS][center][b]Pedido de tag BS[/b][/center][center]&nbsp;[/center][b]Preço total:[/b] 540 pontos[center][/center][b]Tag:[/b] "+tag+"[/font][/size]";
  jQuery(local).html(message);
  jQuery(local).closest('form').find('input[name="post"]').click();
}
$(function() {
  $.get('/profile?mode=editprofile', function(prof) {
      var link=$('form[action="/profile"] .main-head .subtitle a[href^="/u"]',prof).attr('href');
      $.get(link, function(cash) {
        my_cash=$('#profile-advanced-details .main-content .middleline dl:contains("Pontos") dd',cash).text();
        $('.myc cash').html(my_cash);
      });
  });
});
</script>
<style type="text/css">
.cart_items, #checkout{
padding: 10px;
border-radius: 3px;
background: white;
border: 1px solid #cdcdcd;
margin: 2px 10px;
}
.cartWrapper{width:100%;}
.statused li {list-style-type: none;}
.theList li {
list-style-type: upper-hexadecimal;
background: rgb(225, 241, 249);
margin: 1px 3px;
color: white;
font: bold italic 12px helvetica;
border-radius: 3px 5px 5px 3px;
display: inline-block;
padding: 2px 10px 2px 2px;
cursor: pointer;
}
.theList li:before {
content: " ";
position: relative;
display: inline-block;
height: 1px;
width: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgb(113, 194, 235);
left: -14px;
top: 1px;
}
.main .cont, .box_r, .box_t{
padding: 9px;
background: #ebf0f3;
}
.box_r {background: white;}
.LayoutLeft {
padding-left: 150px;
}
.Layout_smallleft {
position: relative;
width: 140px;
margin-left: -150px;
float: left;
}
.Tabs ul {
width: 149px !important;
margin-top: 10px;
border-top: 1px solid #DBE4EF;
border-left: 1px solid #DBE4EF;
}
.Tabs li {
background: #f6f8fb;
color: #808080;
border-bottom: 1px solid #DBE4EF;
font-size: 13px;
}
.Tabs li.active a {
width: 135px;
position: relative;
z-index: 8000;
border-right: 1px solid #fff;
background: #fff !important;
color: #353535 !important;
font-weight: bold;
}
.Tabs li a {
display: block;
padding: 10px 8px;
outline: 0;
color: #8d8d8d;
border-right: 1px solid #DBE4EF;
-webkit-transition: background-color 0.1s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
}
.Tabs li a:hover {
background: #eaeff5;
color: #808080;
}
#usercp_content {
min-height: 395px;
}
.message {
background: #ebfcdf;
padding: 10px;
border: 1px solid #a4cfa4;
color: #0e440e;
line-height: 1.6;
font-size: 12px;
}
.pun table.table td {padding: 10px;}
.pun table.table td.row2 {
background-color: #f1f6f9;
}
input[type="button"] {
 margin: 5px;
}
.Tabs.Layout_smallleft ul {padding: 0px;}
.myc {cursor: pointer;}
#abas1 h4.title {font-size: 17px;color: rgb(22, 74, 145);}
  span.totaler {
background: rgb(245, 241, 220);
border: 1px solid rgb(193, 196, 0);
padding: 4px;
color: rgb(147, 147, 11);
}
</style><div class="main">
  <div class="main-head">
  <div class="page-title"><h2>Loja</h2></div>
  </div>
 <div class="main-content cont">
  <div class="LayoutLeft clearfix">
        <div class="Tabs Layout_smallleft">
  <ul>
      <li class="active">
        <a href="#" title="Todos os ítens" class="all_itens">Todos os ítens</a>
      </li>
                <li>
        <a href="#" title="Carrinho de Compras" class="all_pay">Concluir o pedido</a>
      </li>
  </ul>
</div>
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
<!-- Início aba 1 -->
  <div id="abas1" class="abas">     
      <div class="box_r">
       
        <div class="message" style="margin:10px">
                            <b class="myc">Seus pontos: <cash style="font-style: italic;">2295</cash></b>
                            <br>
            <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png"> Compre com sabedoria, mas verifique se tem pontos suficientes para sua compra.
        </div><div class="main-head">
  <div class="page-title"><h2>Ítens</h2></div>
  </div>
<table class="table" cellspacing="0">
  <tbody class="statused">
<tr id="item1" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Nerd</h4>
 
</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item1" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="250"><img src="http://i.imgur.com/qdiucii.png"> Preço: 250 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item2" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - TV</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item2" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="325"><img src="http://i.imgur.com/qdiucii.png"> Preço: 325 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item3" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Jedi</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item3" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="450"><img src="http://i.imgur.com/qdiucii.png"> Preço: 450 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item4" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Blue</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item4" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="725"><img src="http://i.imgur.com/qdiucii.png"> Preço: 725 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
   
   
</tr>
    <tr id="item5" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
<h4 class="title">Mascote - Chuva</h4>

</td>
<td class="col_f_post">
  <ul>
  <li class="views desc"><input class="addButton" data-item="item5" value="Comprar" type="button"></li>
  <li class="views desc points" data-myprice="900"><img src="http://i.imgur.com/qdiucii.png"> Preço: 900 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
      </ul>
  </td>
</tr>


<tr id="item222" class="item">
<td class="row2" style="text-align:center;width:10%;margin:5px">
<a id="tag" name="tag" accesskey="g"></a>
<span>
<img src="http://png-3.findicons.com/files/icons/2169/picnic/70/weather_alt.png" style="width:50px;height:50px;">
</span>
</td>
<td class="col_f_content" style="width:40%;">
  <h4 class="title">Texto + Cor de Rank</h4><br><span>Poderá escolher o texto e cor que desejar, <strong>as cores não podem ser idênticas aos da Staff e o texto sem ser ofensivo.</strong>
</span></td>
<td class="col_f_post">
  <ul>
  <input value="Comprar" class="addButton" onclick="enviatag(jQuery('#tagtext').val(),jQuery('#taglocal'));" type="button"> 
  <li class="views desc points" data-myprice="600"><img src="http://i.imgur.com/qdiucii.png"> Preço: 540 pontos</li>
  <li class="views desc"><img src="http://i.imgur.com/pb1WAow.png"> Produto: a venda</li>
        <li class="views desc">
<form action="/privmsg" method="post" name="post">
<input name="username[]" style="display:none" value="iChees" type="text">
<input value="Pedido de tag" style="display:none;" maxlength="64" name="subject" class="usernameinput" type="text">
<input id="tagtext" placeholder="Tag (apenas 1 palavra). Exemplo: moto" style="width: 70%;padding: 4.5px 8px;display: inline-block;margin: 6px 0 0 0;" type="text">
  <textarea name="message" style="display:none" id="taglocal"></textarea>
<span class="buttons">
<input style="display:none" name="post" class="addButton" type="submit">
</span>
</form>
</li>
      </ul>
  </td>
</tr>
  </tbody>
</table>
     
      </div>
  </div>
<!-- Fim aba 1 -->

<!-- Início aba 2 --><div id="abas2" class="abas" style="display: none"><div class="box_r"><div class="main-head">
  <div class="page-title"><h2>Carrinho de Compras</h2></div>
  </div><div class="cartWrapper"><div class="cart" id="cartj"><div class="cart_body"><div class="cart_items">
<ul class="theList">
</ul>
</div>
</div>
</div>

    </div><div id="checkout">
    Gostaria de confirmar sua compra? Para isso terá de clicar em "ENVIAR PEDIDO". <br /> Tempo entre 2 - 48 horas para a entrega de seus itens.
<br>
  <span><strong>Para <span style="color:red;"> eliminar algum produto</span> clique nele.</strong><br />Lembre-se de clicar em <strong>"atualizar carrinho"</strong> antes de enviar!<br />Enviar o pedido não irá funcionar de outra forma. <br />Também verifique se você tem pontos suficientes a sua compra!</span>
</div>
  <br />
  <span class="totaler"></span>
  <br />
  <br />
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="IsmaelS.">
<input value="Suporte Design - Pedido Loja" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput">
<textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea>
<span class="buttons">
<input id="submitCart" type="submit" value="Atualizar carrinho" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false;return false;">
 <input type="submit" value="Enviar pedido" name="post" id="sendingBut" disabled="disabled"></span></form>
    </div>
</div>
<!-- Fim aba 2 -->
</div>
            </div>
        </div>           
      </div>
 </div>
</div>

Abraços.

Re: Problemas em código HTML - Loja

 por IsmaelS. 21.05.15 20:54

Olá!

Está quase amigo:

Re: Problemas em código HTML - Loja

 por MateusA 21.05.15 20:59

Re: Problemas em código HTML - Loja

 por IsmaelS. 21.05.15 21:02

• 0Reputação da mensagem: 100% (1 votos)

Re: Problemas em código HTML - Loja

 por MateusA 21.05.15 21:25

Re: Problemas em código HTML - Loja

 por IsmaelS. 22.05.15 13:07

Re: Problemas em código HTML - Loja

 por Daemon 22.05.15 13:53

Re: Problemas em código HTML - Loja

 por RafaelS. 22.05.15 19:53