Product Bundle

Cart Summary

A component for displaying the cart summary with selected options and total price.

Cart Summary

Summary of selected product options with total price calculation

Your Container Bundle

Universal Container

Universal Container

Base product

1

$1200

Medium

Medium

Size

+$300

Metal

Metal

Material

+$500

Blue

Blue

Color

+$100

Handles

Handles

Accessories

1

+$150

Lock

Lock

Accessories

1

+$250

Shipping

From East Coast Warehouse

To ZIP: 10001

+$225

Total Price:

$2,725

Usage

The CartSummary component displays a summary of the selected product options, shipping information, and calculates the total price. It provides buttons to remove or change options, adjust quantities, and add the product to the cart.

Props

  • product - The base product object
  • modificationGroups - Array of modification groups
  • selectedOptions - Object containing selected options
  • shippingInfo - Object containing shipping information
  • zipCode - The ZIP code for shipping
  • quantities - Object containing quantities for each product and accessory
  • onQuantityChange - Function called when a quantity is changed
  • onRemoveOption - Function called when an option is removed
  • onScrollToGroup - Function called to scroll to a modification group
  • onAddToCart - Function called when the Add to Cart button is clicked
← Previous: Delivery InstructionsNext: Product Bundle Builder →