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.

function verCarrinho(limpar,remover){ 

    //var url = "mostrarCarrinho?limpar="+limpar+"&remover="+remover; 

    //var options =

        "height=500,width=700,location=no,menubar=no,resizable=no,scrollbars=no,title

        bar=no,status=no,toolbar=no"; 

    //    

    //window.open(url,"carrinho",options,true);           

​

    var url ="mostrarCarrinho?limpar="+limpar+"&remover="+remover; 

    $("#carrinho").load(url); 

    $("#carrinho").dialog({ 

        height:600,

        width:700,

        modal:true, 

        title:"Carrinho de Compras" 

    });

}

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.

function continuar(url){ 

    //window.opener.open(url,"_parent"); 

    //window.close(); 

​

    $("#carrinho").dialog("close");  

}

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:

function fecharVerCatalogo() { 

​

      $("#carrinho").dialog("close"); 

      verCatalogo();

​

}

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.

function acessarUrlNoCarrinho(url) {

    $("#carrinho").load(url);

}

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:

function verDetalhesDoCarrinho(url) {

    verDetalhes(url);

    $('#carrinho').dialog('close');

}