Fazer uma tela de pedidos

Fala ai Pedro, de boa?

Acho que a ideia é você ter um carrinho da mesma forma, na hora de fechar o pedido, pega os itens desse carrinho e cria um pedido.

Penso que dessa forma é o que faz sentindo.

Opa Matheus tudo certo?

Então, pensei em fazer isso, mas gostaria de algo que numa mesma tela eu conseguisse adicionar itens pelo ID e fossem para essa lista, entende? Bem como uma frente de caixa de supermercado, e ai posso ir adicionando inúmeros itens, não sei se estou conseguindo explicar bem a ideia kk

Bom dia Pedro. Acho que entendi a sua requisição. Recentemente eu fiz algo similar na empresa onde eu trabalho usando jquery + spring para uma busca, mas já vou adiantando que pode ser um pouco trabalhoso.

Resumindo o que vou explicar abaixo em passos implementados:

• [Spring] Criar endpoint para retornar produtos baseado em ID ou nome
• [Spring] Criar endpoint para adicionar um produto no carrinho
• [jQuery] Criar um auto-complete que vai consumir o endpoint de busca
• [jQuery] Criar método de inclusão e atualização do carrinho

Creio que nos dois primeiros pontos citados acima, que são a criação dos endpoints você não vai ter problemas na criação, mas sendo superficial e objetivo:

1. No endpoint de busca, para deixar mais opções para o usuário, receber codigo e nome. Caso o usuário não saiba o código, ele pode procurar pelo nome do produto em si. Essa informação vai popular o autocomplete. A empresa que eu trabalho é alemã, por isso o label esquisito no idioma nas imagens à seguir, exemplos: https://prnt.sc/kxyjnh e https://prnt.sc/kxybwv
2. Uma vez que o usuário encontrar o produto dele no autocomplete e quiser adicionar no carrinho, ele vai clicar na opção. Nesse momento, o segundo endpoint vai entrar em ação, que é enviar o código do produto que foi selecionado para o carrinho.

Tenha em mente que essas implementações são para uma busca, então não estou manipulando o número de produtos, mas isso você pode adicionar no seu código.

Passando para a parte mais difícil, caso você não tenha convívio com jquery.

A primeira coisa que você vai ter que entender é como fazer uma requisição ajax. Essa requisição é a chave para conseguir fazer essa implementação. Para entender como fazer e aprofundar um pouco no assunto eu recomendo fazer o curso de jquery aqui do alura.

Para ser específico, veja essa documentação do jquery para requisições ajax: http://api.jquery.com/jquery.ajax/

Com ela você vai realizar a requisição para o primeiro endpoint de busca onde o retorno é o que você vai tratar e mostrar nos resultados da sua busca.

A segunda requisição também vai ser efetuada utilizando esse mesmo ajax request, que vai ser adicionar ao carrinho o produto selecionado.

Em vários forums você encontra exemplos de autocomplete com imagens já funcionando ou pelo menos uma base para começar.

• Documentação oficial: https://api.jqueryui.com/autocomplete/
• Exemplo UI: https://jqueryui.com/autocomplete/
• Exemplo de busca na internet: https://stackoverflow.com/questions/45662200/show-image-in-jquery-ui-autocomplete

Uma vez realizado a adição no carrinho, basta atualizar ele que as informações já vão estar lá.

Obrigado Arfmoraes, vou ser sincero em dizer que não entendo de jQuery, mas com certeza tuas indicação vão ser o suficiente para eu aprender o que preciso e fazer a tela que quero, muito obrigado pela atenção e tempo dedicados a resposta! Te desejo um bom dia!