> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/shipping-simulator.md).

# Shipping Simulator

📢 Use this project, [contribute](https://bitbucket.org/osfeladaeplus/shipping-simulator) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Shipping Simulator

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

App para montar a prateleira de Compre Junto

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

### Configuration

1. Adding the `shipping-simulator` as a theme dependency in the `manifest.json` file;

```bash
eplus io add shipping-simulator
```

or

```json
  "dependencies": {
    "{vendor}.shipping-simulator": "0.x"
  }
```

2. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/).

| Block name                   | Description |
| ---------------------------- | ----------- |
| `seller-simulate-shipping`   | XXXXX       |
| `shipping-simulator.wrapper` | XXXXX       |
| `shipping-simulator.input`   | XXXXX       |
| `shipping-simulator.button`  | XXXXX       |
| `shipping-simulator.table`   | XXXXX       |
| `shipping-simulator.search`  | XXXXX       |

#### `shipping-simulator.wrapper` props

| Prop name       | Type      | Description | Default value |
| --------------- | --------- | ----------- | ------------- |
| `pricingMode`   | `boolean` |             | `false`       |
| `isProductPage` | `boolean` |             | `true`        |

#### `shipping-simulator.input` props

| Prop name     | Type      | Description                                 | Default value |
| ------------- | --------- | ------------------------------------------- | ------------- |
| `useMaks`     | `boolean` | XXXXXXXX                                    | `true`        |
| `mask`        | `string`  | XXXXXXXX                                    | `99999-999`   |
| `placeholder` | `string`  | XXXXXXXX                                    | `00000-000`   |
| `label`       | `string`  | will split each sku of product in one shelf | `CEP`         |

#### `shipping-simulator.button` props

| Prop name | Type     | Description | Default value |
| --------- | -------- | ----------- | ------------- |
| `text`    | `string` | XXXXXXXX    | `Calcular`    |

#### `shipping-simulator.search` props

| Prop name | Type     | Description | Default value     |
| --------- | -------- | ----------- | ----------------- |
| `text`    | `string` | XXXXXXXX    | `Não sei meu cep` |

usage:

```
{
  {
	"container#shipping-simulator-wrapper": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.wrapper"],
		"props": {
			"blockClass": "shipping-simulator-wrapper",
			"preventVerticalStretch": true
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.wrapper": {
		"children": ["container#shipping-simulator-wrapper-column"],
		"props": {
			"blockClass": "shipping-simulator-product-page"
		}
	},

	"container#shipping-simulator-wrapper-column": {
		"children": [
			"container#shipping-simulator-first-row",
			"container#shipping-simulator-second-row"
		],
		"props": {
			"blockClass": "shipping-simulator-wrapper-column"
		}
	},

	"container#shipping-simulator-second-row": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.table"],
		"props": {
			"blockClass": "shipping-simulator-second-row"
		}
	},

	"rich-text#shipping-simulator": {
		"props": {
			"text": "Calcular Frete e prazo",
			"blockClass": "shipping-simulator-title"
		}
	},

	"container#shipping-simulator-first-row": {
		"children": [
			"rich-text#shipping-simulator",
			"container#shipping-simulator-input-submit",
			"{vendor}.shipping-simulator:shipping-simulator.search"
		],
		"props": {
			"blockClass": "shipping-simulator-first-row",
			"preventHorizontalStretch": true,
			"colSizing": "auto",
			"colGap": 6
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.search": {
		"props": {
			"text": "Não sei meu CEP",
			"blockClass": "shipping-simulator-search-postalcode"
		}
	},

	"container#shipping-simulator-input-submit": {
		"children": [
			"{vendor}.shipping-simulator:shipping-simulator.input",
			"{vendor}.shipping-simulator:shipping-simulator.button"
		],
		"props": {
			"blockClass": "shipping-simulator-submit-input"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.button": {
		"props": {
			"blockClass": "shipping-simulator-button"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.input": {
		"props": {
			"blockClass": "shipping-simulator-input"
		}
	}
}

}
```

> ⚠️
>
> To select which SKU will take preference over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification doesn't exist or the value is empty, the `preferredSKU` prop will be used as a fallback. For more information, please refer to [this guide](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-configuring-custom-images-for-the-sku-selector).

Remember to also use this Configuration section to **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration.

### Customization

| CSS Handles                    |
| ------------------------------ |
| `container`                    |
| `inputWrapper`                 |
| `shippingCTA`                  |
| `shippingSubmitButton`         |
| `shippingSubmitButtonLabel`    |
| `shippingContainer`            |
| `shippingFormContainer`        |
| `shippingForm`                 |
| `shippingUnknownPostalWrapper` |
| `shippingUnknownPostalLink`    |
| `StatusIndicatorWrapper`       |
| `StatusIndicatorText`          |
| `StatusIndicatorText--active`  |
| `StatusIndicatorText--success` |
| `StatusIndicatorText--fail`    |