DEV Community

Cover image for Project Seven: Shopping Cart
Valeria
Valeria

Posted on

2

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:

A thin shopping bag icon with

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?

Buy Me A Coffee

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more