Component: Cart Items

Available from: Release 106

Purpose: Display a detailed list of all items, including offers and add-ons.

The Cart Items component can be used in a standalone cart page, or along with the Modular Checkout in place of the Single Product Basket component. Additionally, it can also be used as part of an order complete page.

The Cart Items is a very flexible component and can be customised using the props described below. There is also some built-in behaviour:

Item title

For offers, the item title will always be the display_name__limio attribute on the product, "-", display_name__limio attribute on the offer. For example, "Digital Product - Annual Offer". 

For add-ons, the item title will always be the display_name__limio attribute on the add-on. 

Quantity

Whether or not the quantity selector appears for an item is determined by whether the offer or add-on has the multibuy attribute equal to true. If multibuy equals true, the available quantities to select (for example, min, max, and increments) are driven by the default_quantity__limio attribute on the offer or add-on.

Price

Price is pulled from the initial price field, or from configured external pricing. If multibuy equals true, then a per unit price will appear below the main item price. The item price will be the per unit price multiplied by the selected quantity.

Empty basket

If there are no items in the basket, the Cart Items component will default to its empty state behaviour, which looks like the screenshot below. These fields can be further configured with the props below.

Show component in read-only

If the prop "Show component in read-only mode?" is set to true, and the component is used on an order complete page, then the component will not render the quantity dropdown, nor the item delete button. Additionally, each order item will display the related subscription number. 

Props

Prop Label	Type	Default Value	Notes
Show offer icons	boolean	true	If true, displays the attached asset image on the offer.  If false, does not display any image with the offer.  Read more about how to add images to offers here: How to add images to offers
Offer Additional Information	richtext	{{data.attributes. display_description__limio}}	Insert any offer attribute into this richtext field by entering {{data.attributes.attributeName}}.  Read more about Limio Variables here: Variables that can be used in Limio Components
Add On Additional Information	richtext	{{data.attributes. description__limio}}	Insert any add-on attribute into this richtext field by entering {{data.attributes.attributeName}}.  Read more about Limio Variables here: Variables that can be used in Limio Components
Unit price label when multibuy is available	string	{{quantity}} x {{formattedPrice}} each	Only displays on an offer or add-on when multibuy = true.
Message when cart is empty	string	Your cart is empty, view offers to get started	Determines the text to display when the cart is empty.
CTA label when cart is empty	string	See offers	Determines the CTA on the button that displays when the cart is empty.
URL to direct users to when cart is empty	string	/default	Determines the URL on the button that displays when the cart is empty.
Show component in read-only mode?	boolean	false	If true, editable actions such as quantity change and item removal will not be actionable by the user.