DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Week 1 Day 3: Add to Cart, Favorite Buttons
Geoff Davis
Geoff Davis

Posted on

Week 1 Day 3: Add to Cart, Favorite Buttons

Welcome to Week 1, Day 3 of my Weekly UI challenge! As I stated in the announcement post, week 1 will focus on an ecommerce listing UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day three, our goal is to…

Add to Cart, Favorite Buttons

My listing has the all essentials: title, price, photo, that's it right? All finished? Nope…

I forgot to make it available for purchase, a pretty imporant step unless you are operating a window shopping ecommerce platform!

Following the original design I created, this is what I've got for Day 3:

ecommerce listing showing orange knitted winter hat, the name of item "Thinsulate Winter Cap", and the $34.99 price, and a "add to cart" button in blue, on the bottom

Like the title and price of the product, a way to purchase a product or add it to your basket/cart should be prominently displayed on an ecommerce listing. I chose to implement this using a block-level button, or a button that is 100% width, and/or utilizes display: block. This Cart button uses the "Bootstrap" color scheme; this is essentially: blue for information or primary button state (e.g. a CTA), green for success state (e.g. "the thing was done"), and red for danger state (e.g. "be careful considering this option").

The Favorite button in the top-right of the product image would be helpful if your ecommerce app had some sort of wishlist or "save for later" feature. Both the Favorite and Cart buttons use Fontawesome Icons and color to better convey the message of the button and/or its state, even if one may not understand the label.

Here's a GIF with the different states of both the Cart button and the Favorite button:

ecommerce listing animated GIF showing different states of the "Add to Cart" button and "favorite" button

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! πŸŽ‰

Week 1 Calendar

  1. Design component βœ…
  2. Display product name, price, and image βœ…
  3. Add to cart button, favorite button 🎯
  4. Sale price display, sold out states
  5. Color variant thumbnail buttons
  6. 100% a11y score
  7. Tweaks, refactors, fixes

Resources

Top comments (3)

Collapse
 
aspittel profile image
Ali Spittel
Collapse
 
lucasromerodb profile image
Lucas Romero Di Benedetto

Nice!

Collapse
 
danieltorkura profile image
danieltorkura

The logic here needs to be improved. It can be misleading.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Our newest Hackathon

Join the DEV x MongoDB Atlas Hackathon 2022 and use your ingenuity and creativity to build an application using MongoDB's cloud based developer data platform, MongoDB Atlas.

β†’ Get Started