Shipping Simulator by vtex

This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.1.

The Shipping Simulator block estimates the shipping fee based on a zip 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-component app to your theme's dependencies in the manifest.json;


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

Add the shipping-simulator block to any block below store.product. For example:


_15  "store.product": {
_15    "children": [
_15      "flex-layout.row#product",
_15    ]
_15  },
_15  "flex-layout.row#product": {
_15    "children": [
_15      "shipping-simulator"
_15    ]
_15  },
_15   "shipping-simulator": {
_15    "props": {
_15      "skuID": "342"
_15    }
_15  },

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`