📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Shipping Simulator

The Shipping Simulator block estimates the shipping fee based on a zip code input.

shipping

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the shipping-simulator block to any block bellow store.product. For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "shipping-simulator"
    ]
  },
   "shipping-simulator": {
    "props": {
      "skuID": "342"
    }
  },
Prop nameTypeDescriptionDefault value
skuIdStringID of the current product SKU-
sellerStringID of the product seller-

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
shippingZipcodeLabelLoader
shippingInputLoader
shippingZipcodeLabel
shippingCTA
shippingNoMessage
shippingTable
shippingTableCell
shippingTableLabel
shippingTableRadioBtn