Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Summary
Official extension
Version: 0.23.0
Latest version: 0.23.0

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}

The Summary block displays the order totalizers and allows the user to add coupon codes. Currently, the Summary block only works out of the box within the Minicart and the Checkout Cart.

{"base64":"  ","img":{"width":1101,"height":941,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127273,"url":"https://user-images.githubusercontent.com/8902498/71037159-eb04da80-20fd-11ea-983e-ce49d2ca27c9.png"}}

Compact version:

{"base64":"  ","img":{"width":1319,"height":944,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":327436,"url":"https://user-images.githubusercontent.com/8902498/71039765-b7c54a00-2103-11ea-9e38-32fc9eb174ba.png"}}

Configuration

  1. Add the Summary app to your theme's dependencies in manifest.json. For example:

_10
{
_10
"dependencies": {
_10
"vtex.checkout-summary": "0.x"
_10
}
_10
}

  1. Add the checkout-summary.compact block to the minicart-summary block of the Minicart or the checkout-summary block to the summary-wrapper block of the Checkout Cart. For example:

_10
{
_10
"minicart-summary#example": {
_10
"blocks": ["checkout-summary.compact"]
_10
}
_10
}

Advanced Customization

The checkout-summary block is made up of other smaller blocks. Currently, its default implementation is as follows:


_14
{
_14
"checkout-summary": {
_14
"children": ["flex-layout.row#summary-coupon", "summary-totalizers"]
_14
},
_14
"flex-layout.row#summary-coupon": {
_14
"children": ["summary-coupon"],
_14
"props": {
_14
"marginBottom": 6
_14
}
_14
},
_14
"summary-coupon": {
_14
"blocks": ["coupon"]
_14
}
_14
}

By default implementation we mean that whenever you use checkout-summary in your store you're actually using the json above behind the scenes.

Therefore, in order to customize the Checkout Summary configuration, you can simply use the default implementation in your code and change it as you wish. For more information on which props you need to pass to the Summary component, see below.

This app exports all of the following blocks. You can see more detailed information of the checkout-summary, checkout-summary.compact, and summary-totalizers blocks in the Components section.


_28
{
_28
"checkout-summary": {
_28
"props": {
_28
"title": "Order Summary"
_28
}
_28
},
_28
"checkout-summary.compact": {
_28
"props": {
_28
"totalizersToShow": ["Items"]
_28
}
_28
},
_28
"summary-totalizers": {
_28
"props": {
_28
"showTotal": true,
_28
"showDeliveryTotal": true,
_28
"showOriginalTotal": false
_28
}
_28
},
_28
"summary-coupon": {
_28
// this block doesn't have any props
_28
},
_28
"summary-installments": {
_28
"props": {
_28
"message": "Up to {installmentsNumber}x {installmentValue}",
_28
"markers": []
_28
}
_28
}
_28
}

Additionally, you can also include a Drawer inside the checkout-summary.

Notice the following: the block declared as children of the drawer-trigger block will appear alongside the Summary title.


_15
{
_15
"checkout-summary": {
_15
"blocks": ["drawer#my-drawer"],
_15
"children": ["flex-layout.row#summary-coupon", "summary-totalizers"]
_15
},
_15
"drawer#my-drawer": {
_15
"blocks": ["drawer-trigger#my-trigger"]
_15
},
_15
"drawer-trigger#my-trigger": {
_15
"children": [
_15
// whatever you put inside here will
_15
// appear alongside the summary title
_15
]
_15
}
_15
}

Components

SummaryTotalizers

The component rendered when the summary-totalizers block is used.

Props

Prop nameTypeDefaultDescription
showTotalbooleantrueWhether to display the overall order total
showDeliveryTotalbooleantrueWhether to display the shipping/delivery total
showOriginalTotalbooleanfalseWhether to display the original items value (sum of item list prices) next to the items subtotal

SummarySmall

The component rendered when used the checkout-summary.compact block.

Props

Prop nameTypeDefault
totalizersarrayundefined
totalizersToShowarray['Items']
totalnumberundefined
totalCalculationenumvisibleTotalizers
SummarySmall totalizers

Array<{ id: string; value: number | null; name: string }>

Same as the Summary totalizers prop.

SummarySmall total

Same as the Summary total prop.

SummarySmall totalCalculation

Controls how the Total shown in the bottom of the summary is calculated. Possible values are: visibleTotalizers, which means that the Total shown will only take into account visible totalizers (the ones included in the totalizersToShow array), and allTotalizers, which will take into account all totalizers from orderForm, even if they're not being displayed.

SummarySmall totalizersToShow

string[]

Id of the totalizers that should be displayed inside this component, e.g.:


_10
;[
_10
// Value of the subtotal
_10
'Items',
_10
// Delivery value
_10
'Shipping',
_10
]

SummaryInstallments

The component rendered when used the summary-installments block. Renders the product installments. If more than one option is available, the one with the biggest number of installments will be displayed.

Props

Prop nameTypeDescriptionDefault value
markers[string]IDs of your choosing to identify the block's rendered message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on Using the Markers prop to customize a block's message. Notice the following: a block's message can also be customized in the Store Theme source code using the message prop.[]
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined
messagestringDefines the block's default text i.e. the block message. You can also define which text message a block will render on the UI using the admin's Site Editor.undefined

Message variables

Message variablesTypeDescription
installmentsNumberstringNumber of installments.
installmentValuestringValue of each installment.
installmentsTotalValuestringTotal value of installments.
interestRatestringInterest rate.
paymentSystemNamestringPayment System of the installments.
hasInterestbooleanWhether the installments have interest (true) or not (false).

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
installments
installmentsNumber
installmentValue
installmentsTotalValue
interestRate
paymentSystemName
summaryTitle
summaryContent
summarySmallContent
summarySmallDisclaimer
summaryItemContainer
summaryItemLabel
summaryItemPrice
summaryItemOriginalPrice
See also
VTEX App Store
VTEX IO Apps