<tr>
<td class="formularioDoCarrinho-item">
<a href="#{request.contextPath}/livro-detalhe.xtml?id=#{carrinhoItem.livro.id}">
<img class="formularioDoCarrinho-item-imagem"
src="#{request.contextPath}/file/#{carrinhoItem.livro.capaPath}" />
</a>
</td>
<td class="formularioDoCarrinho-item">
<h2 class="formularioDoCarrinho-item-titulo"> #{carrinhoItem.livro.titulo} </h2>
</td>
<td class="formularioDoCarrinho-item-preco"> R$ #{carrinhoItem.livro.preco}</td>
<td class="formularioDoCarrinho-item">
<input class="formularioDoCarrinho-item-quantidade"
type="number" min="0" value="#{carrinhoCompras.itens[index.loop].quantidade}" />
</td>
<td class="formularioDoCarrinho-item formularioDoCarrinho-item-precoTotal"
title="Preço unitário: R$ #{carrinhoItem.livro.preco}">R$ #{carrinhoCompras.getTotal(carrinhoItem)} </td>
<td class="formularioDoCarrinho-item">
<a href="https://www.casadocodigo.com.br/cart/change?id=18404155847&quantity=0">
<img class="formularioDoCarrinho-item-remover-imagem"
src="#{request.contextPath}/resources/imagens/trash.png" alt="X" title="Remover" />
</a>
</td>
</tr>
2
respostas
respostas
O preço do carrinho não fica no centro igual o titulo e o restante
Bom dia Fabio,
Tem que olhar o CSS e ver se tem alguma coisa diferente da aula. Veja se está olhando o CSS da classe correta do preço do carrinho. Vi que tem classes para o preço do carrinho diferentes: formularioDoCarrinho-item-preco e formularioDoCarrinho-item-precoTotal. Verifique o CSS, ou poste o código aqui para que possa te ajudar.
.formularioDoCarrinho {
width: 110%;
margin-left: -5%;
}
.formularioDoCarrinho-tabela {
background-color: #F2F0EE;
text-align: center;
width: 100%;
}
.formularioDoCarrinho-cabecalho {
background-color: #E4E1DE;
border-bottom: 1px solid #D5D3D1;
padding-bottom: .35em;
margin-bottom: .6em;
font-family: "open-sans", sans-serif;
font-size: .9em;
font-weight: 700;
}
.formularioDoCarrinho-cabecalho-item {
padding: .5em 0;
}
.formularioDoCarrinho-item {
font-size: .8em;
font-family: "museo", serif;
padding: .2em;
vertical-align: middle;
}
.formularioDoCarrinho-item-imagem {
width: 35px;
}
.formularioDoCarrinho-item-quantidade {
max-width: 2.3em;
text-align: center;
}
.formularioDoCarrinho-item-remover-imagem {
width: 1.5em;
height: 1.5em;
}
.formularioDoCarrinho-rodape {
background-color: #E4E1DE;
border-top: 1px solid #D5D3D1;
font-family: "open-sans", sans-serif;
font-size: .9em;
font-weight: 700;
}
.formularioDoCarrinho-rodape-item {
padding: .5em 0;
vertical-align: middle;
}
.formularioDoCarrinho-finalizar {
text-align: left;
padding-left: .5em;
}
.formularioDoCarrinho-finalizar-botao {
font-family: "open-sans", sans-serif;
font-size: 1em;
font-weight: 800;
color: #FFF;
text-align: center;
text-transform: uppercase;
padding: 0 9px 0 2px;
border-radius: 2px;
display: block;
background-color: #fac459;
border: none;
cursor: pointer;
}
.formularioDoCarrinho-finalizar-botao:hover {
background-color: #E4A830;
}
.formularioDoCarrinho-finalizar-botao::before {
content: ' ';
display: inline-block;
width: 36px;
height: 36px;
background-image: url(//cdn.shopify.com/s/files/1/0155/7645/t/212/assets/cart.png?4957467331228196608);
background-repeat: no-repeat;
background-color: transparent;
background-position: 50%;
-webkit-background-size: 80%;
background-size: 80%;
vertical-align: middle;
}
.formularioDoCarrinho-finalizar-botao-texto {
display: none;
}
.formularioDoCarrinho-atualizar {
background-image: url(../imagens/refresh.png);
background-repeat: no-repeat;
background-position: 50%;
background-color: transparent;
background-size: 75%;
width: 24px;
height: 24px;
border: none;
cursor: pointer;
font-size: 0;
}
@media screen and (min-width: 381px) {
.formularioDoCarrinho-finalizar-botao-texto {
display: inline;
}
}
@media screen and (min-width: 600px) {
.formularioDoCarrinho {
width: 100%;
margin: 0;
font-size: 1.2em;
}
.formularioDoCarrinho-item-imagem {
width: 60px;
}
}