Summary

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.

Compact version:

Configuration

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

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

2. 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:

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

Advanced Customization

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

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

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.

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

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.

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

Components

SummaryTotalizers

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

Props

Prop name	Type	Default	Description
showTotal	boolean	true	Whether to display the overall order total
showDeliveryTotal	boolean	true	Whether to display the shipping/delivery total
showOriginalTotal	boolean	false	Whether 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 name	Type	Default
totalizers	array	undefined
totalizersToShow	array	['Items']
total	number	undefined
totalCalculation	enum	visibleTotalizers

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.:

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

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 name	Type	Description	Default 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.	[]
blockClass	string	Block ID of your choosing to be used in CSS customization.	undefined
message	string	Defines 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 variables	Type	Description
installmentsNumber	string	Number of installments.
installmentValue	string	Value of each installment.
installmentsTotalValue	string	Total value of installments.
interestRate	string	Interest rate.
paymentSystemName	string	Payment System of the installments.
hasInterest	boolean	Whether 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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!