Skip to content

ShippingSimulator.md

Latest commit

 

History

History
60 lines (48 loc) · 1.78 KB

ShippingSimulator.md

File metadata and controls

60 lines (48 loc) · 1.78 KB

📢 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 below store.product. For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "shipping-simulator"
    ]
  },
   "shipping-simulator": {
    "props": {
      "skuID": "342"
    }
  },
Prop name Type Description Default value
skuId String ID of the current product SKU -
seller String ID 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