Component: Cart Summary
Available from: Release 106
Purpose: Display a summary of charges based on what's in the basket, including subtotal, total, and tax and discounts when applicable.
The Cart Summary component is often used with the Cart Items component to show a cohesive basket view. These components can be used on a standalone cart page, or along with the Modular Checkout in place of the Single Product Basket.
The Tax and Promo code line items are only visible in certain situations.
Promo codes
When a whole-basket promo code is applied, the promo code line will appear with the total promo code discount.
When a specific offer or add-on promo code is applied, the promo code line will not appear. Instead, a label will be displayed next to subtotal to show the amount the customer saved.
More information on promo codes can be found here: How to configure Promo Codes v2 tax line item behaves differently in different situations.
No billing country set yet
This case could happen if you are using the Cart Summary component on a standalone Cart page.
The tax line item only displays if the lmo_country cookie is the same as one of the countries set in Setting > Localisation > "Preview tax on the order during checkout if your customer is in one of the countries below".
The tax line label is driven by the "Label for tax amount when applicable" prop below.
If the tax can be calculated with just the country field, the tax amount will be displayed. If not, for example if state or province is required, then the amount will not be displayed and text will be displayed based on the prop "Message to display when tax is not calculated yet". The Total field will also be appended by text set from the "Message on total when tax is not calculated yet".
Billing country set
This case could happen if you are using the Cart Summary component on a Checkout page.
The tax line item will only display if the country selected in the Address Fields subcomponent or Country subcomponent is the same as a country set in Settings > Localisation > "Preview tax on the order during checkout if your customer is in one of the countries below".
The tax line label is driven by the "Label for tax amount when applicable" prop below.
If the tax line is visible, the amount will be calculated once the postal code field in the Address Fields subcomponent or the Postal Code subcomponent is populated.
If the tax cannot be calculated yet, text will be displayed based on the prop "Message to display when tax is not calculated yet". The Total field will also be appended by text set from the "Message on total when tax is not calculated yet".
Read more about tax settings here: How to configure tax behaviour
Props
Label for the subtotal row
string
Subtotal
Label for the promo code discount when applicable
string
Promo code
See Promo code section above.
Label for tax amount when applicable
string
Tax
See Tax section above.
Message to display when tax is not calculated yet
string
Will be calculated on the next step
See Tax section above.
Label for the total row
string
Total
Message on total when tax is not calculated yet
string
+ tax
See Tax section above.
Tax tooltip
string
empty
When populated, displays as message as a tooltip next to the tax line. When left empty, no tooltip will be displayed.
Last updated
Was this helpful?