Crie um carrinho de compras com JavaScript puro | ES6

📚 Sumário

• Introdução
• Construindo um carrinho de compras usando JavaScript
• Passo 1: Configurando o projeto
• Passo 2: Renderizando os produtos
• Passo 3: Adicionando produtos ao carrinho
• Passo 4: Alterando a quantidade de unidades
• Passo 5: Removendo itens do carrinho
• Passo 6: Atualizando o subtotal
• Passo 7: Salvando os itens do carrinho no armazenamento local
• Conclusão

Construindo um carrinho de compras usando JavaScript 💻🛒

Neste tutorial, vamos aprender a construir um carrinho de compras utilizando JavaScript. Com esse carrinho, os usuários poderão adicionar produtos, alterar a quantidade de unidades, remover itens e ver o subtotal atualizado em tempo real. Além disso, também salvaremos os itens do carrinho no armazenamento local, permitindo que os usuários recuperem o carrinho após atualizar a página.

Passo 1: Configurando o projeto 🛠️

Antes de começarmos a construir o carrinho de compras, vamos configurar o nosso projeto. Para isso, você precisa baixar o template inicial que disponibilizamos. O template contém todos os arquivos que precisaremos para construir o carrinho de compras. Após fazer o download, salve o arquivo em uma pasta de sua escolha.

Passo 2: Renderizando os produtos 🛍️

Agora que nosso projeto está configurado, vamos começar renderizando os produtos na página. Para fazer isso, vamos utilizar HTML e JavaScript para percorrer a lista de produtos e exibi-los na interface do usuário. Cada produto terá um nome, uma descrição, uma imagem e um botão "Adicionar ao Carrinho". Quando o usuário clicar nesse botão, o produto será adicionado ao carrinho.

Passo 3: Adicionando produtos ao carrinho 📥🛒

Após renderizar os produtos na página, vamos implementar a funcionalidade de adicionar produtos ao carrinho. Quando o usuário clicar no botão "Adicionar ao Carrinho", o produto selecionado será adicionado ao carrinho. Caso o produto já esteja no carrinho, a quantidade de unidades será incrementada. Caso contrário, o produto será adicionado ao carrinho com a quantidade de unidades igual a 1.

Passo 4: Alterando a quantidade de unidades ↔️

Agora, vamos implementar a funcionalidade de alterar a quantidade de unidades de um produto no carrinho. Para fazer isso, iremos adicionar botões de "+" e "-" ao lado da quantidade de unidades de cada produto no carrinho. Quando o usuário clicar no botão "+", a quantidade de unidades será incrementada. Já quando o usuário clicar no botão "-", a quantidade de unidades será decrementada. Além disso, iremos adicionar uma validação para garantir que a quantidade de unidades não seja maior do que o estoque do produto.

Passo 5: Removendo itens do carrinho ❌🛒

No passo anterior, implementamos a funcionalidade de adicionar produtos ao carrinho. Neste passo, vamos implementar a funcionalidade de remover itens do carrinho. Para isso, adicionaremos um botão de "Remover" ao lado de cada item no carrinho. Quando o usuário clicar nesse botão, o item será removido do carrinho e a interface será atualizada para refletir essa mudança.

Passo 6: Atualizando o subtotal 💰

Para dar mais informações aos usuários sobre o valor total de suas compras, vamos implementar a funcionalidade de calcular e exibir o subtotal atualizado em tempo real. O subtotal é calculado multiplicando o preço de cada item pela quantidade de unidades no carrinho e somando esses valores. Sempre que houver uma alteração no carrinho, o subtotal será atualizado automaticamente.

Passo 7: Salvando os itens do carrinho no armazenamento local 💾🛒

Por fim, vamos garantir que os itens do carrinho sejam salvos no armazenamento local para que os usuários possam recuperar o carrinho caso atualizem a página. Utilizaremos o objeto localStorage do JavaScript para salvar os itens do carrinho. Sempre que o carrinho for atualizado, salvaremos o novo carrinho no localStorage. Ao carregar a página, recuperaremos os itens do carrinho do localStorage e atualizaremos o carrinho de acordo.

Conclusão 🎉

Parabéns! Agora você aprendeu a construir um carrinho de compras usando JavaScript. Você começou aprendendo a configurar o projeto e, em seguida, construiu passo a passo as funcionalidades de renderizar os produtos, adicionar produtos ao carrinho, alterar a quantidade de unidades, remover itens do carrinho, atualizar o subtotal e salvar os itens do carrinho no armazenamento local. Espero que este tutorial tenha sido útil e que você possa aplicar esses conhecimentos em seus projetos futuros. Até a próxima!