Skip to content

vtex-apps/checkout-summary

Repository files navigation

Summary

All Contributors

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.

image

Compact version:

image

Configuration

  1. Add the Summary app to your theme's dependencies in manifest.json. For example:
{
  "dependencies": {
    "vtex.checkout-summary": "0.x"
  }
}
  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:
{
  "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!