Skip to content

Add fake cart data and complete checkout flow #90

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 59 commits into
base: main
Choose a base branch
from
Open

Add fake cart data and complete checkout flow #90

wants to merge 59 commits into from

Conversation

@tgaribal
Copy link
Collaborator

@tgaribal tgaribal commented Aug 14, 2025 •
edited by builder-io-integration bot
Loading

Purpose

The user requested fake data to be added to the cart so it has items for testing and development purposes. This enables testing of the cart functionality and checkout flow with sample products.

Code changes

  • Cart Store: Created cartStore.ts with Zustand state management including pre-populated fake cart items (Checker Fleece, Fog Linen Jacket, Angular Sunglasses)
  • Checkout API: Added /api/create-payment-intent/route.ts for Stripe payment processing with validation and metadata handling
  • Checkout Pages:
    • Created checkout page with Stripe Elements integration and order summary
    • Added success page with order confirmation and status display
  • Cart Component: Enhanced cart sidebar with quantity controls, item management, and checkout navigation
  • UI Components: Added Badge component and improved Button component with Builder.io prop filtering
  • Product Details: Integrated cart store for add-to-cart functionality

The implementation provides a complete e-commerce cart and checkout experience with fake data for testing.

tag @builderio-bot for anything you want the bot to do

To clone this PR locally use the Github CLI with command gh pr checkout 90

🔗 Edit in Builder.io

👀 Preview Link

@builderio-bot
completionId: cgen-6b274d2a04c040398521c9227a4c740b
34caf20 
cgen-6b274d2a04c040398521c9227a4c740b
@builderio-bot
Todo list updated
a541ff2 
cgen-07b66422f4954425957d73f4ede48ac6
@builderio-bot
Todo list updated
036461b 
cgen-4bf8f615ecdc4f95af469c228c020717
@builderio-bot
Add alt text input option to CloudinaryImage component registry
8b0c2c8 
cgen-2a9c4bf813f643959de92f1db42eb011
@builderio-bot
Update CloudinaryImage to use altText prop from Builder.io
53382a9 
cgen-0fc55421845f4b4a970839a0a7b523ab
@builderio-bot
Update Next.js to version that includes URL.canParse polyfill
a4cd9ba 
cgen-216dc95af46c402a8e152e6029a49687
@builderio-bot
completionId: cgen-3e905d4a5da844d3b806de624ea5c48f
4bca219 
cgen-3e905d4a5da844d3b806de624ea5c48f
@builderio-bot
Todo list updated
44446b0 
cgen-5ed41a9eea14413cade90c276a62d984
@builderio-bot
Create checkout page directory and component
efee21f 
cgen-2c4cd0ae237f4b36a26f5a7e87bc2974
@builderio-bot
Create CheckoutForm component
6021b42 
cgen-44debb3535284572a0e90467c11a07c1
@builderio-bot
Create OrderSummary component
f604fcb 
cgen-a0069ba9e8064729a1c9e42e40d1213d
@builderio-bot
Create Stripe payment intent API endpoint
4255756 
cgen-6508c76a22ba40dfb780b2e6b9f2d1dd
@builderio-bot
Create checkout success page
cd5b49b 
cgen-50b2e50b1dc64a48af8e33bb097a1122
@builderio-bot
Todo list updated
c00e05d 
cgen-a3ba16205b9d473f80c77611c05bd860
@builderio-bot
Create Badge UI component
4c24194 
cgen-beda5e776912404ca8c6b93314d2b72d
@builderio-bot
Update ProductDetails to integrate with cart store
af35289 
cgen-7a59bc6533964131a27bdf090b7374b4
@builderio-bot
Fix missing alt attribute in ImageHero component
c8bb535 
cgen-d7b47d1cf7aa47468d15aab72bcf010d
@builderio-bot
Add fake data to cart store for demonstration
17c3794 
cgen-c9df2ac63b744fdf94c168343916495b
@builderio-bot
Fix empty alt attribute in ProductDetails ProductImage
144cc75 
cgen-4a48dcd2436c466f94cc05d85c8a9188
@builderio-bot
Fix potential missing alt attribute in ProductDetails ImageSelector
638a4a1 
cgen-779efb053e9347bf94b5c2e2b0ffeb68
@vercel
Copy link

vercel bot commented Aug 14, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Deployment Preview Comments Updated (UTC)
unified-demo-ecomm ❌ Failed Aug 14, 2025 4:15am

@builder-io-integration builder-io-integration bot changed the title Builder.io: Update from Visual Editor Add fake cart data and complete checkout flow Aug 14, 2025
@builderio-bot
Fix empty alt attribute fallback in UpsellPopup
1e87ef7 
cgen-d543ea8c9d39451688514829b9344544
@builderio-bot
Fix cart badge positioning by adding proper container styling
21a9b43 
cgen-7941ec18276047cf83ae939f7edc212a
@builderio-bot
Improve error handling in Stripe API route
37c3395 
cgen-89393f9cd09f4aaca73163227e63b1e9
@builderio-bot
Add Stripe configuration check in API route
84864d1 
cgen-68ec1f81f26043df845d7082dd05ec4e
@builderio-bot
Add error handling for missing Stripe configuration in checkout
04a7d64 
cgen-dcdc2048a61842d8b6be9acc82352668
@builderio-bot
Add Stripe configuration check in checkout component
de8a2cf 
cgen-10cb84285fa64d918689ad1bada3bae8
@builderio-bot
Add fallback UI when Stripe is not configured
c442703 
cgen-ca691af0046f4cad91f75b1d6fae6a25
@builderio-bot
Update empty cart icon from IoCartOutline to ShoppingCart
50e59f1 
cgen-097808cfbc6c407a8ebfa81ebcd0d8cf
@builderio-bot
Add hydration handling to cart store to prevent SSR mismatch
4ea1d14 
cgen-f2e1064d8b0c4421938c4666fcb9fd7e
@builderio-bot
Add hasHydrated state and setHasHydrated action to cart store
e462fb6 
cgen-f7be6140bafd448c97cd6a32e13d8d5e
@builderio-bot
Update persist configuration to exclude hasHydrated from persistence
908a2c9 
cgen-ca8a4d3343bd49838a934726adf4c1ea
@builderio-bot
Add hydration handling to CartSlider component
7a3cc89 
cgen-8b01acea75aa43acb94fce20ed853d4e
@builderio-bot
Add useEffect to handle hydration in CartSlider
98e64f5 
cgen-2c36bf023c624079a9582da85d6e15ae
@builderio-bot
Add hydration effect and conditional rendering for cart badge
4c6e06a 
cgen-c4b802f1725c4a84a02351e0b862c65e
@builderio-bot
Conditionally render cart badge only after hydration
045a2bb 
cgen-94b250724c12490c832ed77874b5c911
@builderio-bot
Update cart title to handle hydration state
b4f2a86 
cgen-9f2f6e644136438da1721e683d2bb88f
@builderio-bot
Fix missing alt attribute fallback in ProductBox component
8b747c8 
cgen-195a36a6762d44a58352650a76d13542
@builderio-bot
Fix persist rehydration callback in cart store
11af905 
cgen-30045c4e18af4cccbc93c79b7e0f6a0d
@builderio-bot
Add initialization check to populate cart with demo data if empty
2dbbfad 
cgen-f3bbc3608c8e4ae7bdf6c252e278445e
@builderio-bot
Reset initial cart state to empty and fix demo data loading
555411b 
cgen-571fb6e90c9d4b86bd248b2776d29e41
@builderio-bot
Simplify setHasHydrated to load demo data for empty carts
6f08acb 
cgen-105cad688bb849f0b73027c714e2d4b9
@builderio-bot
Fix response handling in checkout page to prevent double JSON parsing
7ba411d 
cgen-f2f4a6c07c1c46aba3696632a21756d0
@builderio-bot
Improve Stripe initialization with better error handling
ff58b91 
cgen-ac17b9a9fa414072973424143083c961
@builderio-bot
Create demo mode for checkout without requiring real Stripe keys
4b05450 
cgen-1a7ae9ee8b8147b8977bc4f18357b8d3
@builderio-bot
Add demo mode handling in payment intent API
f6b0b93 
cgen-87a64b438ae54845877e13f1c9fd00dd
@builderio-bot
Update checkout page to handle demo mode and fix Stripe initialization
546f58b 
cgen-c1dc0b3326fb4faca336f78e334819b0
@builderio-bot
Add demo mode state to checkout page
baf7423 
cgen-ade29e6f965d4779938d4e22f42ace01
@builderio-bot
Update checkout page to handle demo mode response
1efcf67 
cgen-97105220c41c48a5ae8187c7e352b87a
@builderio-bot
Update payment form rendering to handle demo mode properly
efab885 
cgen-bc3150edc9e34505821df1bfddaea586
@builderio-bot
Replace single demo payment button with success and fail buttons
7aa2769 
cgen-c37afe99d57844c78f3be2a1f30213fd
@builderio-bot
Update success page to handle demo mode failure parameter
210377a 
cgen-7dd3922e410a4700b0ee452286294433
@builderio-bot
Add cart store usage to ProductDetails component
38c45d3 
cgen-88bd2e393e7941ad85599b240acd0eb5
@builderio-bot
Implement actual add to cart functionality in ProductDetails
1d947bf 
cgen-8165a5e3e4da424eab992d3386fb21ae
@builderio-bot
Add user feedback when item is added to cart
df6cc16 
cgen-2e0d524601014489bb601062c808f620
@builderio-bot
Enhanced add to cart with feedback and cart opening
3a5a2e5 
cgen-7d7b4744e3b84748bb1b86edef67c53e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tgaribal @builderio-bot