This page is about version 3.150.0 of the app, which is not the most recent version. The latest stable version is 3.178.1.
The Shipping Simulator block estimates the shipping fee based on a zip code input.
Configuration
- Import the
vtex.store-componentapp to your theme's dependencies in themanifest.json;
_10 "dependencies": {_10 "vtex.store-components": "3.x"_10 }
- Add the
shipping-simulatorblock to any block below store.product. For example:
_15 "store.product": {_15 "children": [_15 "flex-layout.row#product",_15 ]_15 },_15 "flex-layout.row#product": {_15 "children": [_15 "shipping-simulator"_15 ]_15 },_15 "shipping-simulator": {_15 "props": {_15 "skuID": "342"_15 }_15 },
| Prop name | Type | Description | Default value |
|---|---|---|---|
skuId | String | ID of the current product SKU | - |
seller | String | ID of the product seller | - |
pricingMode | enum | If the product has gifts or attachments, for example, you can choose whether the shipping information will be grouped (grouped) by shipping type or showing the shipping prices for each of the items individually (individualItems). | individualItems |
shouldUpdateOrderForm | Boolean | Whether interacting with the simulator should update the shopper's address in their orderForm | true |
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 |
|---|
shippingContainer |
shippingContainerLoader |
shippingCTA |
shippingInputLoader |
shippingNoMessage |
shippingTable |
shippingTableBody |
shippingTableCell |
shippingTableCellDeliveryEstimate |
shippingTableCellDeliveryName |
shippingTableCellDeliveryPrice |
shippingTableHead |
shippingTableHeadDeliveryEstimate |
shippingTableHeadDeliveryName |
shippingTableHeadDeliveryPrice |
shippingTableLabel |
shippingTableRadioBtn |
shippingTableRow |
shippingZipcodeLabel |
shippingZipcodeLabelLoader |