Aulas
Disciplinas

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

arrow_back Aula 15 - Desenvolvendo uma livraria virtual – Parte 4

Implementar a funcionalidade de “Alterar carrinho de compras”

Iremos agora implementar a funcionalidade de alterar o carrinho de compras para permitir que o usuário tenha a possibilidade de modificar a quantidade de cada item do seu carrinho de compras diretamente na tela de “Visualizar Carrinho”. Iremos implementar esse recurso adicionando duas figuras (com os símbolos “+” e “-”), ao lado da quantidade de cada livro, que quando acionados irão ser mapeados para as funções de incrementar e decrementar a quantidade, respectivamente. O primeiro código a ser modificado será o do arquivo mostrarCarrinho.jsp. O código abaixo contém todas as alterações que foram feitas no arquivo (em seguida, as modificações serão explicadas).

AخA
1
        <%@ include file="/cabecalho.jsp" %>
2
<jsp:useBean id="livrariaBean" class="livraria.negocio.LivrariaBean" scope="page" >
3
    <jsp:setProperty name="livrariaBean" property="sistema" value="${sistemaLivraria}" />
4
</jsp:useBean>
5
<c:if test="${param.limpar == 'limpar'}">
6
    <font color="red" size="+2">
7
        <strong>O carrinho de compras foi esvaziado!</strong><br> <br>
8
    </font>
9
</c:if>
10
<c:if test="${param.remover != '0' && param.remover != null}">
11
    <c:set var="id" value="${param.remover}"/>
12
    <jsp:setProperty name="livrariaBean" property="idLivro" value="${id}" />
13
    <c:set var="livroRemovido" value="${livrariaBean.livro}" />
14
    <font color="red" size="+2">O seguinte livro foi removido do carrinho:
15
        <em>${livroRemovido.titulo}</em>.
16
        <br> <br>
17
    </font>
18
</c:if>
19
<c:if test="${sessionScope.cart.numeroItens > 0}">
20
    <font size="+2">Quantidade de itens do carrinho: ${sessionScope.cart.numeroItens}
21
    <c:if test="${sessionScope.cart.numeroItens == 1}">
22
        livro.
23
    </c:if>
24
    <c:if test="${sessionScope.cart.numeroItens > 1}">
25
        livros.
26
    </c:if>
27
    </font><br>
28
<table summary="layout">
29
    <tr>
30
        <th align=left colspan="3">Quantidade</th>
31
        <th align=left>Título</th>
32
        <th align=left>Preço</th>
33
    </tr>
34
    <c:forEach var="itemCompra" items="${sessionScope.cart.itens}">
35
        <c:set var="livro" value="${itemCompra.item}" />
36
        <tr>
37
            <td bgcolor="#ffffff">
38
                <c:url var="url" value="/livros/mostrarCarrinho" >
39
                    <c:param name="alterar" value="${livro.idLivro}" />
40
                    <c:param name="quantidade" value="1" />
41
                    <c:param name="remover" value="0" />
42
                </c:url>
43
                <a href="${url}" style="text-decoration: none;">[+]</a>
44
            </td>
45
            <td bgcolor="#ffffff">
46
                <c:url var="url" value="/livros/mostrarCarrinho" >
47
                    <c:param name="alterar" value="${livro.idLivro}" />
48
                    <c:param name="quantidade" value="-1" />
49
                    <c:param name="remover" value="0" />
50
                </c:url>
51
                <a href="${url}" style="text-decoration: none;">[-]</a>
52
            </td>
53
            <td align="left" bgcolor="#ffffff">${itemCompra.quantidade}</td>
54
            <td bgcolor="#ffffaa">
55
                <c:url var="url" value="/livros/detalhesLivro" >
56
                <c:param name="idLivro" value="${livro.idLivro}"/>
57
                <c:param name="Clear" value="0"/></c:url>
58
                <strong><a href="${url}">${livro.titulo}</a></strong>
59
            </td>
60
            <td bgcolor="#ffffaa" align="right">
61
                <fmt:formatNumber value="${livro.preco}" type="currency"/>
62
            </td>
63
            <td bgcolor="#ffffaa">
64
                <c:url var="url" value="/livros/mostrarCarrinho" >
65
                <c:param name="remover" value="${livro.idLivro}"/></c:url><strong><a href="${url}">Remover</a></strong>
66
            </td>
67
        </tr>
68
    </c:forEach>
69
    <tr>
70
        <td colspan="5" bgcolor="#ffffff"><br></td>
71
    </tr>
72
    <tr>
73
        <td colspan="2" align="right" bgcolor="#ffffff">Subtotal</td>
74
        <td bgcolor="#ffffaa" align="right">
75
            <fmt:formatNumber value="${sessionScope.cart.total}" type="currency"/>
76
        </td>
77
        <td><br></td>
78
    </tr>
79
</table>
80
<p> <p>
81
<c:url var="url" value="/livros/catalogo" >
82
    <c:param name="Add" value="" />
83
</c:url>
84
<strong>
85
    <a href="${url}">Continuar comprando</a>
86
        <c:url var="url" value="/livros/comprar" />
87
            <a href="${url}">Finalizar compra</a>
88
            <c:url var="url" value="/livros/mostrarCarrinho">
89
            <c:param name="limpar" value="limpar"/>
90
            <c:param name="remover" value="0"/>
91
        </c:url>
92
    <a href="${url}">Esvaziar carrinho</a>
93
</strong>
94
</c:if>
95
<c:if test="${sessionScope.cart.numeroItens <= 0}">
96
<font size="+2">Carrinho vazio</font>
97
<br> <br>
98
<c:url var="url" value="/livros/catalogo" >
99
    <c:param name="Add" value="" />
100
</c:url>
101
<strong><a href="${url}">Ver catálogo</a></strong>
102
</c:if>
103
<%@ include file="/rodape.jsp" %>
Listagem 1 - Código do arquivo livros/mostrarCarrinho.jsp, localizado no diretório WebContent/livros

A primeira modificação é relativa à tabela HTML. Na coluna “Quantidade”, faremos com que ela ocupe três colunas, pois iremos adicionar mais duas células em cada linha (além da que já guarda a informação de quantidade), uma para o símbolo do “+” e outra para o “-”.

Dentro do ForEach, necessitamos adicionar essas duas novas células (tags ) . Basicamente, incluímos uma imagem com um link para a própria URL de mostrarCarrinho (pois o carrinho vai continuar sendo exibido). No entanto, dessa vez, iremos passar dois parâmetros chamados “alterar” e “quantidade”. O primeiro guarda o código do livro a ter sua quantidade modificada e o outro guarda a quantidade desse livro a ser incrementada no carrinho.

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

Sumário

Versão 5.3 - Todos os Direitos reservados