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 and checkout-summary.compact blocks in the Components section.

{
  "checkout-summary": {
    "props": {
      "title": "Order Summary"
    }
  },
  "checkout-summary.compact": {
    "props": {
      "totalizersToShow": ["Items"]
    }
  },
  "summary-totalizers": {
    "props": {
      "showTotal": true,
      "showDeliveryTotal": true
    }
  },
  "summary-coupon": {
    // this block doesn't have any props
  }
}

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
    ]
  }
}

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',
]

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
summaryTitle
summaryContent
summarySmallContent
summarySmallDisclaimer
summaryItemContainer
summaryItemLabel
summaryItemPrice

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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