Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store Framework
Managing performance
Displaying asynchronous prices

Although useful to enhance user experience, displaying the most up-to-date prices comes at the heavy cost of increasing your store's page response time.

This is due to the fact that fetching the newest prices in your store database relies on making a new request to the server every time a product is rendered on the interface.

A favorable way out is to set your store to fetch product prices on the client-side, promoting a decrease of response time in your pages in order to display the asynchronous prices.

Asynchronous prices do not mean outdated. They are product prices stored in the browser cache according to the user navigation. If your store does not routinely update product prices, it is strongly recommended to display asynchronous prices instead.

{"base64":"  ","img":{"width":250,"height":511,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":36523,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-displaying-asynchronous-prices-0.gif"}}

Learn below how to set your store up to decrease page response time with asynchronous prices!

Step by step

  1. Ensure that your store is not fetching the price data on the server-side by setting the simulationBehavior prop (from the Search Result app) to skip:

_10
"store.search": {
_10
"blocks": [
_10
"search-result-layout"
_10
],
_10
"props": {
_10
"context": {
_10
+ "simulationBehavior": "skip"
_10
}
_10
}
_10
},

  1. Ensure that the Product Summary and the Product Price apps are listed as dependencies in your theme's manifest.json file:

_10
"dependencies": {
_10
"vtex.product-summary": "2.x",
_10
"vtex.product-price": "1.x"
_10
}

  1. Add the priceBehavior prop to your product-summary.shelf block and set its value to async:

_12
"product-summary.shelf": {
_12
"props": {
_12
+ "priceBehavior": "async"
_12
},
_12
"children": [
_12
// other children
_12
"product-list-price#summary",
_12
"flex-layout.row#selling-price-savings",
_12
"product-installments#summary",
_12
"add-to-cart-button",
_12
]
_12
}

  1. Wrap the all price blocks under the product-price-suspense block (from the Product Prices app):

_23
{
_23
"product-summary.shelf": {
_23
"props": {
_23
"priceBehavior": "async"
_23
},
_23
"children": [
_23
// other children
_23
- "product-list-price#summary",
_23
- "flex-layout.row#selling-price-savings",
_23
- "product-installments#summary",
_23
- "add-to-cart-button",
_23
+ "product-price-suspense"
_23
]
_23
},
_23
+ "product-price-suspense": {
_23
+ "children": [
_23
+ "product-list-price#summary",
_23
+ "flex-layout.row#selling-price-savings",
_23
+ "product-installments#summary",
_23
+ "add-to-cart-button"
_23
+ ]
_23
+ }
_23
}

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page