Documentation
Feedback
Guides

Order Quote

The Order Quote app provides B2B capabilities to save a shopping cart, storing its items, product quantities and prices for further use.

The Order Quote app is not compatible with the B2B Suite solution. Therefore, these instructions do not apply to stores using the B2B Suite. If you are using the B2B Suite, refer to the B2B Quotes & Carts documentation instead.

The user can also print the quotation information containing the cart information along with expiration date which is defined at Admin > Apps.

{"base64":"  ","img":{"width":1153,"height":887,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":110567,"url":"https://user-images.githubusercontent.com/52087100/94163217-f5f35500-fe5d-11ea-8ac1-b1fd3c717ae5.png"}}

Configuration

  1. Using VTEX IO CLI, install the Order Quote app by running vtex install vtex.orderquote@1.x.
  2. Head over to your VTEX account's admin and access the Apps section.
  3. Select the Order Quote app and click on Settings.
  4. Fill out the Lifespan and Store logo URL fields.
  5. Click on Save.
  6. Add the Order Quote app as a peerDependency in your store-theme's manifest.json file:

_10
"peerDependencies": {
_10
+ "vtex.orderquote": "1.x"
_10
}

Once declared as a Peer Dependency, the app will generate a few routes under the /orderquote path in order to create the Order Quote custom page. Namely, they are:

RouteDescription
/orderquoteLists all saved cart quotations.
/orderquote/createRetrieves the current cart information, allowing you to create cart quotations as you desire.
/orderquote/view/:IDDetails page, displayed when you click on a quote from the listing page (/orderquote).

The new routes already contain a default template with all blocks automatically exported by the orderquote app, meaning that the Order Quote pages are ready to be rendered and no further actions are required from you.

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
buttonDelete
buttonPrint
buttonSave
buttonsContainer
buttonUse
checkboxClear
containerCreate
containerFields
containerList
containerView
refreshButton
refreshLoading
field
inputCreate
inputCreate
listContainer
logo
notAuthenticatedMessage
printingArea
totalizerContainer
itemNameContainer
itemName
itemSkuName
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page