Shipping Simulator

Description

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.

Table of Contents

Usage

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"
/>

Configuration

Prop nameTypeDescriptionDefault value
skuIdString!Id of the current product SKU-
sellerString!Id of the product seller-

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ShippingSimulator.

Class nameDescriptionComponent Source
shippingContainerThe main container of the shippingCalculatorindex
shippingContainerLoaderThe container for the spinner loaderindex
shippingZipcodeLabelLoaderThe container for the ZIP code loaderindex
shippingInputLoaderThe container for the ZIP code input loaderindex
shippingZipcodeLabelThe shipping labelindex
shippingCTAThe calculate shipping buttonindex
shippingNoMessageThe message when the store does not have a shipping methodShippingTable
shippingTableThe table for the shipping methodsShippingTable
shippingTableCellThe cell of a tableShippingTableRow
shippingTableLabelThe label describing a shipping methodShippingTableRow
shippingTableRadioBtnThe radio button to select a shipping methodShippingTableRow