Nesta aula, vamos construir um carrinho de compras com um layout que pode ser adaptado e ajustado conforme as nossas necessidades. No final desta aula, você terá construído um carrinho de compras que pode servir de base para outros carrinhos de compras que você possa construir futuramente.
Construindo o carrinho de compras
A primeira etapa que precisamos fazer é pegar um template gratuito do Bootstrap que tenha um carrinho de compras interessante para trabalharmos. Para isso, podemos acessar o link https://bbbootstrap.com/snippets/bootstrap-ecommerce-cart-page-template-91851305 (acesso em 27/06/2023), onde teremos um bom exemplo de carrinho de compras.
Fonte: https://bbbootstrap.com/snippets/bootstrap-ecommerce-cart-page-template-91851305 (acesso em 27/06/2023)
Em seguida, teremos que fazer as devidas alterações no nosso código para contemplar a implementação do carrinho de compras com Javascript.
O próximo passo é pegar o código html disponível, colocar em uma pasta e começarmos a trabalhar nele.
Fonte: https://bbbootstrap.com/snippets/bootstrap-ecommerce-cart-page-template-91851305 (acesso em 27/06/2023)
Faça o mesmo para o arquivo css do exemplo e crie também um arquivo Javascript para contemplar nosso código que iremos implementar.
Fonte: Autoral
Em seguida, temos que fazer as definições de alguns ids conforme as imagens a seguir:
Fonte: Autoral
Fonte: Autoral
Fonte: Autoral
Conteúdo Bônus