Exibindo o carrinho de compras utilizando o componente dialog do jQuery UI

No trecho de código a seguir, damos início à apresentação das novas funções necessárias para exibir o carrinho de compras utilizando o componente Dialog da biblioteca jQuery UI ao invés dele ser carregado em uma nova página. Nesse código, podemos ver a função verCarrinho(), do arquivo catalogo.jsp, com o componente jQuery e também com o código comentado de como seria a implementação em Javascript puro para efeitos de comparação.

A função verCarrinho() exibida acima simplesmente utiliza o jQuery para acessar o URL do carrinho, obtendo seu HTML e o colocando dentro da div “carrinho” (div criada para atender a esse propósito) e a exibe utilizando o método dialog(). Observe que o parâmetro modal com valor true faz com que a página em segundo plano não fique acessível enquanto o dialogo estiver aberto. O código comentado em Javascript puro tentaria simular o diálogo do jQuery simplesmente abrindo uma nova janela com o carrinho, o que não é uma boa prática.

Outra função que será criada é a continuar(). Essa função simplesmente fecha o diálogo do jQuery que exibe o carrinho de compras. O código comentado em Javascript puro na verdade não trata de um diálogo como o do jQuery, mas sim fecharia uma janela popup com o carrinho de compras, o que é uma abordagem muito menos elegante.

A função fecharVerCatalogo(), que será adicionada no arquivo mostrarCarrinho.jsp, fecha o diálogo jQuery em exibição, além de tornar visível o contêiner que contém o catálogo de livros:

Ainda no arquivo mostrarCarrinho.jsp, a função acessarUrlNoCarrinho() faz uma solicitação AJAX utilizando o método load() da API do jQuery padrão, porém exibe o resultado no dialog do carrinho. Isso é útil para várias ações que são realizadas dentro do carrinho como esvaziar, incrementar/decrementar quantidade de livros, etc.

Também no arquivo mostrarCarrinho.jsp, a função verDetalhesDoCarrinho(url) é utilizada para duas ações: na página principal detalhar um livro e em seguida fechar o carrinho (para que o usuário possa ver o detalhamento exibido). Segue o código: