Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Order Placed
Official extension
Version: 2.17.2
Latest version: 2.17.2

Configuration

The order-placed app comes already installed on all stores and with it, it's possible to build your own page with the blocks exported by the app.

After defining a order-placed block inside your store/blocks directory or in your blocks.json file, the page can be constructed with blocks and customized with css handles.

Note: this is the default order-placed layout implementation.


_115
// store/blocks/order-placed.jsonc
_115
{
_115
"order-placed": {
_115
"blocks": ["op-header", "op-order"]
_115
},
_115
"op-header": {
_115
"children": [
_115
"op-section#confirmation",
_115
"op-section#notices",
_115
"op-summary-section",
_115
"op-bank-invoice-section"
_115
]
_115
},
_115
"op-section#confirmation": {
_115
"props": {
_115
"name": "confirmation",
_115
"marginBottom": 9,
_115
"borderless": true
_115
},
_115
"children": [
_115
"op-confirmation-icon",
_115
"op-confirmation-title",
_115
"op-confirmation-message",
_115
"flex-layout.row#confirmation-buttons"
_115
]
_115
},
_115
"flex-layout.row#confirmation-buttons": {
_115
"props": {
_115
"blockClass": "confirmationButtons",
_115
"marginTop": 8,
_115
"marginBottom": 8,
_115
"horizontalAlign": "center",
_115
"preventHorizontalStretch": true
_115
},
_115
"children": ["flex-layout.col#confirmation-buttons"]
_115
},
_115
"flex-layout.col#confirmation-buttons": {
_115
"children": ["op-print-button"]
_115
},
_115
"op-section#notices": {
_115
"props": {
_115
"name": "notices",
_115
"marginBottom": 9,
_115
"borderless": true
_115
},
_115
"children": ["op-notices"]
_115
},
_115
// each order section
_115
"op-order": {
_115
"children": [
_115
"flex-layout.row#order-header",
_115
"op-order-split-notice",
_115
"op-order-customer",
_115
"op-section#payments",
_115
"op-section#pickup-packages",
_115
"op-section#delivery-packages",
_115
"op-order-takeaway-packages",
_115
"op-order-total"
_115
]
_115
},
_115
// each order header
_115
"flex-layout.row#order-header": {
_115
"props": {
_115
"fullWidth": true,
_115
"colSizing": "auto",
_115
"colGap": 5,
_115
"marginBottom": 5
_115
},
_115
"children": [
_115
"flex-layout.col#order-header-info",
_115
"flex-layout.col#order-header-options"
_115
]
_115
},
_115
"flex-layout.col#order-header-info": {
_115
"children": ["op-order-number", "op-order-datetime", "op-order-seller"]
_115
},
_115
"flex-layout.col#order-header-options": {
_115
"children": ["responsive-layout.desktop#order-options-desktop"]
_115
},
_115
"responsive-layout.desktop#order-options-desktop": {
_115
"children": ["op-order-options"]
_115
},
_115
// payment section
_115
"op-section#payments": {
_115
"props": {
_115
"name": "paymentMethods"
_115
},
_115
"children": [
_115
"op-order-payment",
_115
"responsive-layout.mobile#order-options-mobile"
_115
]
_115
},
_115
// bottom of top section of order header
_115
"responsive-layout.mobile#order-options-mobile": {
_115
"children": ["op-order-options#mobile"]
_115
},
_115
"op-order-options#mobile": {
_115
"props": {
_115
"blockClass": "mobile",
_115
"fullWidth": true
_115
}
_115
},
_115
"op-section#pickup-packages": {
_115
"props": {
_115
"name": "pickupPackages"
_115
},
_115
"children": ["op-order-pickup-packages"]
_115
},
_115
"op-section#delivery-packages": {
_115
"props": {
_115
"name": "deliveryPackages"
_115
},
_115
"children": ["op-order-delivery-packages"]
_115
}
_115
}

Make sure you have the Order Placed page defined in your theme:


_10
"store.orderplaced": {
_10
"children": ["order-placed"]
_10
},

Blocks

order-placed

Main block, responsible for rendering the whole order placed page. It accepts the following blocks:

op-section

Splits your page into separate and semantic sections.

Composition: Accepts an array of any kind of children blocks.

Props:

Prop nameTypeDescriptionDefault value
borderlessMaybeResponsiveInput<boolean> | booleanRemove the bottom border of the sectionfalse
marginBottomMaybeResponsiveInput<number> | numberMargin space below the section0
paddingBottomMaybeResponsiveInput<number> | numberPadding space below the section0
widthMaybeResponsiveInput<string> | stringWidth of the section100%
namestringName of the section. Use it to have custom css handles for it.undefined

CSS Handles:

CSS HandlesDescription
sectionAll section blocks
section--{name}Section named name

op-header

Defines the header content of the page.

Composition: Accepts an array of any kind of children blocks.

Props: none.

CSS Handles:

CSS HandlesDescription
orderPlacedHeaderThe page header

Defines the footer content of the page.

Composition: Accepts an array of any kind of children blocks.

Props: none.

CSS Handles:

CSS HandlesDescription
orderPlacedFooterThe page footer

op-confirmation-icon

Renders the confirmation icon.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
confirmationIconWrapperIcon wrapper
Default appearance
{"base64":"  ","img":{"width":100,"height":100,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3764,"url":"https://user-images.githubusercontent.com/17712401/89224372-c38c5080-d5ae-11ea-8112-9870c854e5a2.png"}}

op-confirmation-title

Renders the confirmation title.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
confirmationTitleConfirmation title h4 element
Default appearance
{"base64":"  ","img":{"width":512,"height":54,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9378,"url":"https://user-images.githubusercontent.com/17712401/89224442-df8ff200-d5ae-11ea-824a-25d7530249dd.png"}}

op-confirmation-message

Renders the confirmation message, containing the clients email.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
confirmationMessageConfirmation message p element
Default appearance
{"base64":"  ","img":{"width":1466,"height":96,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34639,"url":"https://user-images.githubusercontent.com/17712401/89224480-f0406800-d5ae-11ea-8602-0cb9541b0459.png"}}

op-print-button

Renders a button that triggers a full page print.

Composition: none.

Props: none.

CSS Handles:: none.

Default appearance
{"base64":"  ","img":{"width":196,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2503,"url":"https://user-images.githubusercontent.com/17712401/89224547-0817ec00-d5af-11ea-9b6a-9ae33a89daef.png"}}

op-notices

Renders a list of important informations relevant to the currently placed order. The messages may vary according to the type of order.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
noticesListList ul element
noticeListItemEach list li item element
Default appearance
{"base64":"  ","img":{"width":1814,"height":776,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":120518,"url":"https://user-images.githubusercontent.com/17712401/89224594-16fe9e80-d5af-11ea-9c3e-4cfddcf76a4c.png"}}

op-summary-section

If a placed order is split between delivery and pickup, renders a summary of all pickup and delivery packages with informations such as number of items, packages, pickup/delivery address and pickup/delivery SLA.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
section--summarySummary whole section
summaryRowRow wrapper of both summary boxes
summaryColColumn wrapper of each summary box
summaryAddressWrapper of the pickup address
summaryBoxSurrounding box of the summary
summaryBox--deliverySurrounding box of the delivery summary
summaryBox--pickupSurrounding box of the pickup summary
summaryContentWrapper of the whole content of the box
summaryItemsWrapper of the number of items and packages
summaryShippingSLAWrapper of the shipping SLA information
summaryTitleBox h5 title element
Default appearance
{"base64":"  ","img":{"width":992,"height":299,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28773,"url":"https://user-images.githubusercontent.com/17712401/89224626-267de780-d5af-11ea-80c1-7771c6dae670.png"}}

op-bank-invoice-section

Renders the bank invoice section if payment method chosen was bank invoice.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
section--bankInvoiceBank invoice whole section
barCodeWrapperWrapper of the barcode number and copy button
barCodeNumberBarcode number element
barCodeCopyButtonWrapperWrapper of the copy button
bankInvoiceEmbedWrapperWrapper of the bank invoice iframe
bankInvoiceEmbedBackgroundBackground of the bank invoice iframe
bankInvoiceEmbedEmbed of the bank invoice PDF
Default appearance
{"base64":"  ","img":{"width":992,"height":536,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59374,"url":"https://user-images.githubusercontent.com/17712401/89224654-3695c700-d5af-11ea-9b17-98c68450370d.png"}}

op-order

Defines an order context to be able to render its meta information and packages. Must be used to display order data.

Composition: Accepts an array of any kind of children blocks.

Props: none.

CSS Handles:

CSS HandleDescription
orderWrapperWrapper of an order meta information and packages

op-order-number

Renders the order id number. Must be placed inside an op-order block.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
orderNumberOrder number h3 element
Default appearance
{"base64":"  ","img":{"width":706,"height":84,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14215,"url":"https://user-images.githubusercontent.com/17712401/89224695-4c0af100-d5af-11ea-866e-bea733073346.png"}}

op-order-datetime

Renders the date and time an order was placed. Must be placed inside an op-order block.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
orderDatetimeOrder date and time small element
Default appearance
{"base64":"  ","img":{"width":444,"height":36,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9013,"url":"https://user-images.githubusercontent.com/17712401/89224728-5a590d00-d5af-11ea-8901-7654c543d9e9.png"}}

op-order-seller

Renders the seller of an order. Must be placed inside an op-order block.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
orderSoldBySeller phrase small element
orderSellerSeller name span element
Default appearance
{"base64":"  ","img":{"width":400,"height":36,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":8063,"url":"https://user-images.githubusercontent.com/17712401/89224779-765cae80-d5af-11ea-9320-29902e7f47dd.png"}}

op-order-split-notice

Renders a message with the number of packages of an order if the order was split in more than one package. Must be placed inside an op-order block.

Composition: none.

Props: none.

CSS Handles:

CSS HandleDescription
splitNoticeWrapper of the message element
Default appearance
{"base64":"  ","img":{"width":1530,"height":116,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26226,"url":"https://user-images.githubusercontent.com/17712401/89224825-88d6e800-d5af-11ea-8801-7f2d5267da5b.png"}}

op-order-customer

Renders the customer information. Must be placed inside an op-order block.

Composition: none.

Props: none.

CSS Handles: none.

Default appearance
{"base64":"  ","img":{"width":248,"height":208,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20227,"url":"https://user-images.githubusercontent.com/17712401/89224880-a015d580-d5af-11ea-8314-bc223b3da0aa.png"}}

op-order-options

Renders the customer information. Must be placed inside an op-order block.

Composition: none.

Props:

Prop nameTypeDescriptionDefault value
fullWidthbooleanMake the options wrapper take full horizontal spacefalse
myAccountPathstringThe path to redirect a user to their profile page (rendered by the vtex.my-account app)./account

CSS Handles:

CSS HandlesDescription
orderOptionsWrapperWrapper of the option buttons
Default appearance
{"base64":"  ","img":{"width":1040,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":16066,"url":"https://user-images.githubusercontent.com/17712401/89224923-b754c300-d5af-11ea-8b28-0efa82329e96.png"}}

op-order-payment

Renders the customer information. Must be placed inside an op-order block.

Composition: none.

CSS Handles:

CSS HandlesDescription
orderPaymentWrapperWrapper of the payment methods list
orderPaymentItemWrapper of each payment method item
Default appearance
{"base64":"  ","img":{"width":256,"height":180,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14423,"url":"https://user-images.githubusercontent.com/17712401/89225037-eec36f80-d5af-11ea-82af-267cb69c7d7b.png"}}

op-order-delivery-packages

Renders an order delivery packages information and product list. Must be placed inside an op-order block.

Composition: none.

CSS Handles:

CSS HandlesDescription
packageAll package sections
package--deliveryThe delivery package section
packageHeaderColumnColumn of header of a package section
packageHeaderHeader of a package section
packageHeader--deliveryHeader of the delivery package section
packageShippingEstimateDelivery estimate small element
packageAddressWrapperWrapper of the package shipping address
packageAddressTitleWrapper of the address title
packageDeliveryTitleWrapper of the delivery title
productListProduct list ul element
productListItemProduct list li item element
productWrapperWrapper of a single product
productImageColumnColumn of a product's image
productImageWrapperWrapper of a product's image
productInfoColumnColumn of a product's information
productNameProduct's a element
productMeasurementUnitProduct's measurement unit small element
productQuantityProduct's quantity small element
productPriceProduct's price
attachmentWrapperWrapper for a product's attachment
attachmentHeaderHeader of an attachment
attachmentTitleTitle of a attachment
attachmentToggleWrapperWrapper of the toggle button of an attachment
attachmentToggleButtonButton for toggling the attachment's accordion
attachmentToggleLabelAttachment's toggle label
attachmentContentAttachment's content wrapper
attachmentContentItemEach attachment's content paragraph
Default appearance
{"base64":"  ","img":{"width":1984,"height":418,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":156490,"url":"https://user-images.githubusercontent.com/17712401/89225054-f8e56e00-d5af-11ea-9c0a-b2cc37fe34f4.png"}}

op-order-pickup-packages

Renders an order pickup packages information and product list. Must be placed inside an op-order block.

Composition: none.

CSS Handles:

Note: Include the same CSS handles as op-order-delivery-packages

CSS HandlesDescription
packageAll package sections
package--pickupThe pickup package section
packageInfoWrapperWrapper of a pickup package's information
packageReceiverPackage's pickup receiver information container
packageReceiverNameName of the package's pickup receiver
packageAdditionalInfoWrapper of additional information about a pickup package
Default appearance
{"base64":"  ","img":{"width":1984,"height":668,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127850,"url":"https://user-images.githubusercontent.com/17712401/89225074-03076c80-d5b0-11ea-840e-69998a41ec9d.png"}}

op-order-total

Renders an order delivery packages information and product list. Must be placed inside an op-order block.

Composition: none.

CSS Handles:

CSS HandlesDescription
totalListWrapperWrapper of the total price list of an order
totalListAn order's total list ul element
totalListItemAn order's total item li element
totalListItemLabelLabel of a price item
totalListItemValueValue of a price item
Default appearance
{"base64":"  ","img":{"width":1190,"height":386,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":44528,"url":"https://user-images.githubusercontent.com/17712401/89225092-0b5fa780-d5b0-11ea-976e-da3c64453eff.png"}}

API

The order-placed app exports two hooks to allow customization using the current order data: useOrderGroup and useOrder.

useOrderGroup: used to get the data of the current order group. An order group is the collection of all orders created by an users's purchase.


_10
import { useOrderGroup } from 'vtex.order-placed/OrderGroupContext'
_10
_10
//...
_10
const orderGroup = useOrderGroup()

useOrder: used to get the data of the current order being accessed in the order loop.


_10
import { useOrder } from 'vtex.order-placed/OrderContext'
_10
_10
//...
_10
const order = useOrder()

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
attachmentContent
attachmentContentItem
attachmentHeader
attachmentTitle
attachmentToggleButton
attachmentToggleLabel
attachmentToggleWrapper
attachmentWrapper
bankInvoiceEmbed
bankInvoiceEmbedBackground
bankInvoiceEmbedWrapper
barCodeCopyButtonWrapper
barCodeContainer
barCodeNumber
barCodeWrapper
confirmationIconWrapper
confirmationMessage
confirmationTitle
errorMessage
errorTitle
errorWrapper
noticeListItem
noticesList
orderDatetime
orderList
orderListItem
orderNumber
orderOptionsWrapper
orderPaymentItem
orderPaymentWrapper
orderPlacedFooter
orderPlacedHeader
orderPlacedMainWrapper
orderPlacedWrapper
orderSeller
orderSoldBy
orderWrapper
package--delivery
package--pickup
package
packageAdditionalInfo
packageAddressWrapper
packageGiftDescription
packageHeader--delivery
packageHeader--pickup
packageHeader
packageHeaderColumn
packageInfoWrapper
packageReceiver
packageReceiverName
packageShippingEstimate
packageSLA
printButtonWrapper
printHintWrapper
productImageColumn
productImageWrapper
productInfoColumn
productName
productListItem
productList
productMeasurementUnit
productPrice
productQuantity
productWrapper
section--bank-invoice
section--confirmation
section--deliveryPackages
section--notices
section--paymentMethod
section--pickupPackages
section--summary
section
splitNotice
summaryRow
summaryCol
summaryAddress
summaryBox--delivery
summaryBox--pickup
summaryBox
summaryContent
summaryItems
summaryShipping
summaryTitle
totalList
totalListItem
totalListItemLabel
totalListItemValue
totalListWrapper

Contributing

Check it out how to contribute with this project.

See also
VTEX App Store
VTEX IO Apps