Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosProblemas em código HTML - Loja
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
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:
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?
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] [/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?
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
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:
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] [/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>
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Problemas em código HTML - Loja
por cocas20 21.05.15 12:34
IsmaelS. vc gostaria de corrigir o seu nick para ficar centralizado certo?
Última edição por Sennior em 21.05.15 13:21, editado 2 vez(es) (Motivo da edição : Formatação excessiva na mensagem.)
cocas20- ****
- Membro desde : 01/11/2014
Mensagens : 278
Pontos : 365 -
Re: Problemas em código HTML - Loja
por IsmaelS. 21.05.15 18:44
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
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:
Cheque se o HTML está ativado, ok? Ele é essencial.
Substitua o código, por esse:
Abraços.
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] [/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.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Problemas em código HTML - Loja
por MateusA 21.05.15 20:59
Eu juro que não sei o que falta.. ;\
Poderia me dar uma luz?
Poderia me dar uma luz?
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Problemas em código HTML - Loja
por IsmaelS. 21.05.15 21:02
Olá!
Será que conseguia colocar antes os ícones antes dos preços?
Será que conseguia colocar antes os ícones antes dos preços?
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Problemas em código HTML - Loja
por MateusA 21.05.15 21:25
Hm... Vamos ver.
Substitua por esse:
Você terá que configurar o CSS, veja as propriedades:
Dentro da 'ul.theList':
margin-left: Move os ícones para a esquerda <<
Dentro da #eutort:
margin-left: Move o texto para a direita >>
margin-top: Move o texto para cima ^^
É isso?
Substitua 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 += "<div id='eutort'>" + string.charAt(0).toUpperCase() + string.slice(1)
//add line break at the end
+ ' = ' + points + "\n" + "</div>";
total += points;
});
//I think calculating total is easier than trying to manipulate $(".totaler")
itents = $('.cart_items').html();
text += "<div id='eutort'>" + "Total de Pontos = €" + total + "\n" + "Itens pedidos:" + "</div>" + 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] [/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 !important;
margin-top: 0 !important;
margin: 0 !important;
}
.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>
- Código:
.theList li {
list-style-type: none !important;
}
#eutort {margin-left: 6%}
ul.theList {
margin-left: -4% !important;
margin-top: -15%;
position: relative
}
Você terá que configurar o CSS, veja as propriedades:
Dentro da 'ul.theList':
margin-left: Move os ícones para a esquerda <<
Dentro da #eutort:
margin-left: Move o texto para a direita >>
margin-top: Move o texto para cima ^^
É isso?
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Problemas em código HTML - Loja
por Daemon 22.05.15 13:53
Leia este tutorial: https://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones
Daemon- Super Membro
- Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825 -
Re: Problemas em código HTML - Loja
por RafaelS. 22.05.15 19:53
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Tópicos semelhantes» Problemas com o uso do AddOn Loja de Ícones
» Ajustar Loja de HTML
» Problemas com MP da loja
» Problemas com Loja do Fórum
» Problemas com saldo/pontos na loja
» Ajustar Loja de HTML
» Problemas com MP da loja
» Problemas com Loja do Fórum
» Problemas com saldo/pontos na loja
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos