Shipping Simulator is a VTEX component that estimates the shipping fee based on the zip code. This component can be imported and used by any VTEX app.
📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.
You should follow the usage instruction in the main README.
To import it into your code:
import { ShippingSimulator } from 'vtex.store-components'
You can use it in your code like a React component with the jsx tag: <ShippingSimulator />
.
<ShippingSimulator
skuId="3"
seller="1"
/>
Prop name | Type | Description | Default value |
---|---|---|---|
skuId |
String! |
Id of the current product SKU | - |
seller |
String! |
Id of the product seller | - |
You should follow the Styles API instruction in the main README.
Below, we describe the namespace that are defined in the ShippingSimulator
.
Class name | Description | Component Source |
---|---|---|
shippingContainer |
The main container of the shippingCalculator |
index |
shippingContainerLoader |
The container for the spinner loader | index |
shippingZipcodeLabelLoader |
The container for the ZIP code loader | index |
shippingInputLoader |
The container for the ZIP code input loader | index |
shippingZipcodeLabel |
The shipping label | index |
shippingCTA |
The calculate shipping button | index |
shippingNoMessage |
The message when the store does not have a shipping method | ShippingTable |
shippingTable |
The table for the shipping methods | ShippingTable |
shippingTableCell |
The cell of a table | ShippingTableRow |
shippingTableLabel |
The label describing a shipping method | ShippingTableRow |
shippingTableRadioBtn |
The radio button to select a shipping method | ShippingTableRow |