Edited to add demo of cart working upon request.
How I built a functional shopping cart:
TLDR: A react shopping cart! Code is on github here.
Shameless plug for my digital portfolio.
See cart in action (site under construction).
I know there are probably some easier ways to do things, but I couldn't find a shopping cart that just worked, so I decided to build my own. I am still really new to using React and programming in general, so any input or suggestions is greatly appreciated. This little project taught me a lot about callback functions, which are fun!
- My app calls the shopping cart with a list of items the user has chosen, via an "Add to Cart" button with event handler.
- I started with a stateless component which has a sole purpose to show my stateful components.
- To display each item, ProductDisplay took in the list of items, then mapped them on another "Display" Component.
- ProductDisplay has a state component that created a product list with default size, type, and quantity once mounted. This list will later be sent to checkout.
- The Display component shows each image and gives you the opportunity to change the type of print, size of print, and quantity to order.
- I created a size array and a type array to capture all the size and type options.
- We will retrace to the callback functions in a moment, but I want to quickly show the selectors change event handler. Type selector just renders the type by iterating through the Type Array.
- Do the above steps for any other options that require user input, such as size and options!
- As you can see, this initiates the props.callback function, which sends the child's state data to the parent. Here is the parent, the Display component, callback function.
- Another callback function, this time to ProductDisplay. Here is ProductDisplay's callback which updates the array that was created in step 4.
There you have it, if you do the above, you'll have a shopping cart. Feel free to steal my code and improve upon it. I'd also love to hear how you think it can be improved.