Implementing Product Bundles
Learn how to implement product bundles in Umbraco Commerce.
Last updated
Was this helpful?
Learn how to implement product bundles in Umbraco Commerce.
Last updated
Was this helpful?
Product bundles are Umbraco Commerces' way of creating composite products. This feature allows you to create a product that consists of multiple sub-products. The sub-products can be optional or mandatory, and you can define the quantity of each sub-product. The final order line will be a composite order line of the selected primary product and its sub-product options.
This guide is not a direct follow-on from the getting started tutorial. It is assumed that your store is set up in a similar structure.
To create a product bundle, you need to create a primary product with multiple sub-products. The most common approach is to create a product page with a structure that allows child nodes of a product variant type.
Navigate to the Settings section in the Umbraco backoffice.
Create a Document Type for your primary product.
Create a Document Type for your sub-products.
Update your primary product Document Type to allow child nodes of the sub-product type.
The bundle content tree will contain a bundle page with variant elements as children.
Navigate to the Content section.
Create a new product page with the primary product Document Type.
Add variant elements as children.
The base product page will display the product details with a list of variants that can be used as add-ons.
Add the following to your product page template.
With the frontend setup, you must update the add-to-cart functionality to handle the bundle product and its sub-products.
Update the AddToCartDto
object to include the bundle product reference and an array of variant product references.
Update the AddToCart
method on your CartSurfaceController
to handle the bundle product and its sub-products.
When a user adds a product including variants to the cart, the order is created with the primary product and its sub-products combined.
When an order includes a bundled product, the order editor will display the primary product and its sub-products as a composite order line.