Feature #11187
closedImplement End-to-End Product Variant Flow – Category/Product → Cart → Checkout → Order
100%
Description
Review the existing Category Page and Product Page variant creation and implementation before starting the cart integration.
The objective is to implement a complete end-to-end flow where a customer can select a specific product variant, add it to the cart, and ensure that the selected variant details are maintained consistently throughout the Cart, Checkout, and Order flow.
The selected variant should also be linked to the correct product inventory, so that the quantity of the particular variant is reduced after a successful order.
Implementation Scope
1. Review Existing Variant Implementation
Review the existing variant creation and configuration in the Category Page.
Review the variant creation/edit functionality in the Product Page.
Understand the existing variant structure, attributes, pricing, SKU, stock, and quantity management.
Reuse the existing variant implementation wherever possible instead of creating a separate structure.
2. Product Page → Add to Cart
Allow the customer to select a specific product variant.
Display the selected variant details and corresponding price.
Add the selected variant to the cart.
Store all required variant information with the cart item, including:
Product ID
Variant ID
Variant name/details
Variant attributes/options
SKU, if applicable
Variant price
Quantity
Product information required for display
3. Cart Page
Display the exact variant selected by the customer.
Display the corresponding variant-specific price.
Maintain the selected variant when increasing/decreasing quantity.
Ensure quantity updates are applied to the specific variant, not to the parent product.
Prevent different variants of the same product from being incorrectly merged.
Validate variant availability and stock while updating the cart.
4. Checkout Page
Carry the selected variant details from Cart → Checkout.
Display the same:
Product
Variant
Variant attributes
Price
Quantity
Total price
Ensure checkout calculations use the actual backend variant price.
Revalidate variant availability/stock before order placement.
Prevent the frontend from modifying the variant price.
5. Order Placement
Store the selected variant details in the order when the customer places the order.
Ensure the order item maintains the relationship between:
Parent Product
Specific Variant
Variant SKU
Variant attributes
Variant price
Ordered quantity
The order history/details page should display the exact variant purchased.
6. Variant Inventory / Quantity Reduction
After a successful order, reduce the quantity from the specific selected variant.
Do not reduce the quantity from other variants of the same product.
Example:
Product: T-Shirt
Red / M → 10 available
Red / L → 8 available
Blue / M → 5 available
If the customer orders Red / M – Qty 2, only Red / M inventory should be reduced:
Red / M → 8 available
Ensure stock is not reduced from the parent product or another variant.
Handle insufficient stock and prevent orders when the selected variant does not have enough quantity.
Backend Requirements
Update cart APIs to support variant-based cart items.
Update checkout APIs to return variant-specific information.
Update order creation APIs to store variant information.
Implement server-side price validation using the variant's current price.
Implement variant-level stock validation.
Implement variant-level inventory reduction after successful order placement.
Ensure transactional/consistent inventory updates to avoid incorrect stock reduction in concurrent orders.
Frontend Requirements
Update product variant selection.
Update Add to Cart functionality.
Display variant-specific information on Cart.
Display variant-specific information on Checkout.
Display variant information in Order Details/Order History.
Handle variant quantity updates and stock validation.
Ensure the complete UI flow remains consistent.
Acceptance Criteria
Existing Category Page and Product Page variant implementation is reviewed and understood.
Customer can select a specific variant and add it to cart.
Correct variant details are stored with the cart item.
Correct variant price is displayed throughout the flow.
Different variants of the same product are handled independently.
Cart → Checkout maintains the same variant information.
Order stores the exact variant purchased.
Order details display the correct variant.
Only the purchased variant's quantity is reduced after successful order placement.
Variant stock cannot become negative.
Backend validates price, variant availability, and stock.
The complete flow works successfully:
Category → Product → Select Variant → Add to Cart → Cart → Checkout → Place Order → Order Details → Variant Stock Reduction
Subtasks
Related issues