Project Seven: Shopping Cart

Have you bought the presents yet? If you had - you've definitely used more than one digital shopping cart.

I am yet to meet a web developer who hasn't implemented an e-commerce website and thus you're about to join that proud group :-)

Implementing a shopping cart widget would widen your knowledge in accessibility and give you a chance to work with custom events.

Shopping Cart Widget: requirements and recipe

As a user I'd like to see a shopping cart with information regarding my planned purchases, so that I could quickly see if I'm still within my budget or how much items I have in my cart

Design of the widget, icon and information presented would vary from site to site. Here's an example from Forem shop:

You're free to decide what you'd like to show and how, but some requirements should be met regardless:

Requirements

1. Shopping cart should be updated every time user adds a new item
2. Shopping cart should be updated every time an item is removed
3. Shopping cart information should be accessible for screen reader users
4. Shopping cart should notify screen reader users on update

Recipe

1. Create a static version of a shopping cart for empty state
2. Create a static version for a cart with some items in it
3. Add proper accessibility tags and verify
4. Create a custom event listener that would trigger cart update
5. Drop an "Add to cart" button somewhere
6. Connect the pieces together
7. Click and enjoy!

Hints

In order to notify users on cart update one should use aria-live regions to match accessibility requirements.

Hard mode: Storing Cart State

Sometimes users leave the cart just to come back the other day and it might be beneficial for both users and business to be able to restore the cart for users that are coming back.

How about adding the logic to write the state somewhere in users' browser? Maybe there's even a way to use events that this local storage yields instead of a custom event ;-)

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?