ShippingSimulator.md

📢 Disclaimer Don't fork this project. Use it, contribute to it or open issues through Store Discussion to help us evolve it.

Shipping Simulator

The shipping-simulator block estimates the shipping cost based on a postal code input.

Configuration

1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file, as shown in the following example:

  "dependencies": {
    "vtex.store-components": "3.x"
  }

2. Add the shipping-simulator block to any child of the store.product template (Product Details Page template). For example:

  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
+     "shipping-simulator"
    ]
  },

3. Declare the shipping-simulator block using the props stated in the Props table. For example:

   "shipping-simulator": {
    "props": {
      "skuID": "342"
    }
  },

Props

Prop name	Type	Description	Default value
pricingMode	enum	Defines how shipping information is displayed when a product includes gifts or attachments. You can choose to group shipping information by type (grouped) or display shipping costs for each item individually (individualItems).	individualItems
seller	String	ID of the product seller.	-
shouldUpdateOrderForm	Boolean	Determines whether interacting with the shipping simulator should update the shopper's address in their orderForm (true). This only works if the orderform optimization is enabled; otherwise, it has no effect, even if set to true.	true
skuId	String	ID of the current product SKU.	-

Customization

To apply CSS customizations to this and other blocks, see the guideUsing 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