Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web I / Aula

arrow_back Aula 15 - Desenvolvendo uma livraria virtual – Parte 4

Mostrar conteúdo do carrinho

Vamos começar com a implementação da funcionalidade de apresentação do conteúdo do carrinho de compras. Considere a tela apresentada pela Figura 1. Dado que foi colocado livros no carrinho de compras, podemos, agora, acessar o link “Ver carrinho de compras” para visualizar o conteúdo do carrinho. A tela que apresenta o conteúdo do carrinho de compras é mostrada na Figura 2.

Figura 01 - Tela do sistema após adicionar um livro ao carrinho de compras
Tela do sistema após adicionar um livro ao carrinho de compras
Figura 02 - Tela de visualização do conteúdo do carrinho de compras
Tela de visualização do conteúdo do carrinho de compras

Para implementar a tela que mostra o conteúdo do carrinho, precisamos criar o arquivo mostrarCarrinho.jsp na pasta livros (lembre de sempre adicionar o cabecalho.jsp e rodape.jsp on inicio e fim dos seus JSPs com a diretiva <%@ include >). Vamos estudar agora o conteúdo desse arquivo, começando pela declaração do LivrariaBean:

AخA
1
<jsp:useBean id="livrariaBean" class="livraria.negocio.LivrariaBean" scope="page" >
2
    <jsp:setProperty name="livrariaBean" property="sistema" value="${sistemaLivraria}" />
3
</jsp:useBean>

Esse código é o mesmo utilizado na página de catálogo, servindo para criar e configurar o bean LivrariaBean. Já para mostrar o conteúdo do carrinho, primeiro, vamos confirmar que o carrinho está, realmente, com algum conteúdo. Esse teste é feito no código abaixo (<c:if >), mostrando, inclusive, a quantidade de itens existente no carrinho (${sessionScope.cart.numeroItens}). Note que a decisão sobre o uso do singular (1 livro) ou plural (2 livros, por exemplo) também é feita usando o comando <c:if>.

8
1
<c:if test="${sessionScope.cart.numeroItens > 0}">
2
    <font size="+2">Quantidade de itens do carrinho: ${sessionScope.cart.numeroItens}
3
        <c:if test="{sessionScope.cart.numeroItens == 1}">
4
            livro.
5
        </c:if>
6
        <c:if test="${sessionScope.cart.numeroItens > 1}">
7
            livros.
8
        </c:if>

Em seguida, montamos uma tabela com um cabeçalho indicando as informações a serem apresentadas:

7
1
    </font><br>
2
    <table summary="layout">
3
    <tr>
4
        <th align="left">Quantidade</th>
5
        <th align="left">Título</th>
6
        <th align="left">Preço</th>
7
    </tr>

Depois disso, devemos apresentar os itens do carrinho, certo? Isso é feito usando uma instrução <c:forEach > para navegar nos itens do carrinho (objetos do tipo ItemCompra). Para cada item de compra, o livro é pego e armazenado. Informações como título e preço são apresentadas. Um link para visualizar os detalhes de cada livro e outro para removê-lo do carrinho também estão sendo criados usando-se a instrução <c:url >:

21
1
    <c:forEach var="itemCompra" items="${sessionScope.cart.itens}">
2
    <c:set var="livro" value="${itemCompra.item}" />
3
    <tr>
4
        <td align="right" bgcolor="#ffffff"> ${itemCompra.quantidade} </td>
5
        <td bgcolor="#ffffaa">
6
            <c:url var="url" value="/livros/detalhesLivro" >
7
                <c:param name="idLivro" value="${livro.idLivro}" />
8
                      <c:param name="Clear" value="0" />
9
            </c:url>
10
            <strong><a href="${url}">${livro.titulo}</a></strong>
11
        </td>
12
        <td bgcolor="#ffffaa" align="right">
13
            <fmt:formatNumber value="${livro.preco}" type="currency"/> </td>
14
        <td bgcolor="#ffffaa">
15
            <c:url var="url" value="/livros/mostrarCarrinho" >
16
              <c:param name="remover" value="${livro.idLivro}" />
17
            </c:url>
18
            <strong><a href="${url}">Remover</a></strong>
19
        </td>
20
    </tr>
21
</c:forEach>

Além disso, temos que mostrar o total do valor da compra. Lembre-se de que o carrinho de compras tem um método chamado getTotal() para isso (${sessionScope.cart.total}):

12
1
    <tr>
2
        <td colspan="5" bgcolor="#ffffff">
3
        <br></td>
4
    </tr>
5
    <tr>
6
        <td colspan="2" align="right" bgcolor="#ffffff">Subtotal</td>
7
        <td bgcolor="#ffffaa" align="right">
8
            <fmt:formatNumber value="${sessionScope.cart.total}" type="currency"/>
9
        </td>
10
        <td><br></td>
11
    </tr>
12
</table>

[A] Anterior
4/17
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados