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.
Learn below how to set your store up to decrease page response time with asynchronous prices!
Step by step
- Ensure that your store is not fetching the price data on the server-side by setting the
simulationBehavior
prop (from the Search Result app) toskip
:
_10"store.search": {_10 "blocks": [_10 "search-result-layout"_10 ],_10 "props": {_10 "context": {_10+ "simulationBehavior": "skip"_10 }_10 }_10},
- 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}
- Add the
priceBehavior
prop to yourproduct-summary.shelf
block and set its value toasync
:
_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}
- 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}