The shipping-simulator block estimates the shipping fee based on a zip code input.

shippingshipping

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. 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"
    ]
  },
  1. Then, declare the shipping-simulator block using the props stated in the Props table. For example:
   "shipping-simulator": {
    "props": {
      "skuID": "342"
    }
  },

Props

Prop nameTypeDescriptionDefault value
pricingModeenumIf the product has gifts or attachments, for example, you can choose whether the shipping information will be grouped (grouped) by shipping type or showing the shipping prices for each of the items individually (individualItems).individualItems
sellerStringID of the product seller.-
shouldUpdateOrderFormBooleanWhether interacting with the simulator should update the shopper's address in their orderForm.true
skuIdStringID of the current product SKU.-

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
shippingContainer
shippingContainerLoader
shippingCTA
shippingInputLoader
shippingNoMessage
shippingTable
shippingTableBody
shippingTableCell
shippingTableCellDeliveryEstimate
shippingTableCellDeliveryName
shippingTableCellDeliveryPrice
shippingTableHead
shippingTableHeadDeliveryEstimate
shippingTableHeadDeliveryName
shippingTableHeadDeliveryPrice
shippingTableLabel
shippingTableRadioBtn
shippingTableRow
shippingZipcodeLabel
shippingZipcodeLabelLoader

Did this page help you?