feat: add shopping cart functionality #51
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.removeItemAto
m: 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
Type of Change
Additional Notes
This is how it looks: