Skip to content

Latest commit

 

History

History
70 lines (58 loc) · 2.78 KB

ShippingSimulator.md

File metadata and controls

70 lines (58 loc) · 2.78 KB
Raw

📢 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 -
shouldUpdateOrderForm Boolean Whether interacting with the simulator should update the shopper's address in their orderForm true

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
shippingCTA
shippingInputLoader
shippingNoMessage
shippingTable
shippingTableBody
shippingTableCell
shippingTableCellDeliveryEstimate
shippingTableCellDeliveryName
shippingTableCellDeliveryPrice
shippingTableHead
shippingTableHeadDeliveryEstimate
shippingTableHeadDeliveryName
shippingTableHeadDeliveryPrice
shippingTableLabel
shippingTableRadioBtn
shippingTableRow
shippingZipcodeLabel
shippingZipcodeLabelLoader