Product Page: Add to Shopping Cart Feature

[KeithRWalker]

User Story

As a user I want to click the add to cart button on a product card. I want this button to add the product it to a cart which I can then take to the checkout page. I want to be able to add more then one type of product to my cart.

AC

WHEN The user clicks add to cart the beer should be added to a cart AND the user should see a confirmation of this action THEN the user should be able to get to the checkout page to purchase a beer.

Development

• create an empty array called shoppingCartArray[]
• inside the beerCardBuilder( ) function, add a class to the 'add to cart' button with the value of the current objects parentNode id
• Inside the btnEvents( ) function add selectors/listeners to each button like the see more buttons (see issue #13 )
  • the listeners will listen for a click, and run the function addToCart( ) *create the function addToCart( )
  • addToCart will accept the target event's parentNode.id value just like in expandView( ) issue #13
  • when the target's id match the click event, it will create a new object with properties needed for the checkout.
  • then the new object will be pushed to shoppingCart
• at the end of the function some kind of confirmation should display, informing the user they have added the product.

[KeithRWalker]

https://getbootstrap.com/docs/4.0/components/alerts/

[KeithRWalker]

https://getbootstrap.com/docs/4.0/components/modal/

[zoeames]

How do alerts and modals fit into this ticket?

[zoeames]

Can you think of a way to do this without creating another id? you already have an id on the product right? something like 'product1' . can you reuse this or access it in some way

[KeithRWalker]

How do alerts and modals fit into this ticket?

for the last development requirement I want something to show the user the item has been added to the cart. I added both of them on here, because I want to be able to try both, and see which looks/works better. I can make that into a new ticket if need be, but didn't think it was necessary since it is not really a feature on it's own.

[KeithRWalker]

Can you think of a way to do this without creating another id? you already have an id on the product right? something like 'product1' . can you reuse this or access it in some way

I know there is a better way, i'm just having a really hard time knowing what that is until I am able to actually read the code. I can make a new ticket for research, but I'm not sure what I would put in it until I got to it. Is it okay to edit this ticket/ make a new one once I get things up to this point working?

[zoeames]

👍