Shipping Simulator by vtex

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

{"base64":" ","img":{"width":2854,"height":1440,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":572087,"url":"https://user-images.githubusercontent.com/52087100/70262606-6ddb7c00-1773-11ea-91af-ededfd27aa95.png"}}

Configuration

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


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

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


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

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


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

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`