Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add shopping cart functionality #51

Merged

Conversation

evgongora
Copy link
Collaborator

Description

Closes #18

This PR adds shopping cart functionality to the application, focusing on key implementations:

Shopping Cart Page (shopping-cart/page.tsx):

Display Cart Items: Shows a list of items in the cart with images, names, quantities, and total prices.
Item Removal: Allows users to remove items using a trash icon. A DeleteConfirmationModal prompts for confirmation before deletion.
Total Price Calculation: Computes and displays the total price of all items in the cart.
Buy Button: Includes a "Buy" button for users to proceed with purchasing the items.

Cart State Management (store/cartAtom.ts):

Jotai Atoms: Utilizes Jotai for state management of cart items.
Persistent Storage: Uses atomWithStorage to persist cart data in local storage under the key "shopping-cart-storage".
Atoms Defined:
cartItemsAtom: Stores the array of cart items.
addItemAtom: Adds items to the cart or updates quantity if the item already exists.
removeItemAtom: Removes items from the cart.
clearCartAtom: Clears all items from the cart.

Header Component Update (Header.tsx):

Cart Icon with Item Count: Updates the Header component to display a cart icon showing the total number of items.
Props Modification: Adds showCart and cartItemsCount props to conditionally display the cart icon and item count.
State Access: Retrieves cart items using useAtomValue(cartItemsAtom) to calculate the total quantity.
This enhancement provides users with the ability to add products to a shopping cart, view and manage their cart contents, and proceed to purchase, significantly improving the user experience.

Checklist

  • [x ] The title of the PR is clear and descriptive.
  • All tests have been run and passed.
  • Code follows project conventions (Biome formatting, linting).
  • [] Documentation has been updated as needed.
  • Commit messages follow the Conventional Commits style.

Type of Change

  • Bugfix
  • Feature
  • Refactor
  • Chore
  • Documentation
  • Test

Additional Notes

This is how it looks:

muestra

Copy link

vercel bot commented Nov 12, 2024

@evgongora is attempting to deploy a commit to the CofiBlocks Team on Vercel.

A member of the Team first needs to authorize it.

@rvalenciano rvalenciano merged commit e02b53b into Vagabonds-Labs:main Nov 21, 2024
3 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement shopping cart
4 participants