EstimateShipping container

The EstimateShipping container renders a form that allows shoppers to estimate shipping costs based on their specified location. The form includes fields for the shopper to enter their country, state, and postal code.

EstimateShipping container

Configurations

The EstimateShipping container provides the following configuration options:

Option	Type	Req?	Description
countryField	VNode	No	The input field for the country.
destinationText	string	No	The text describing the destination.
estimateButton	VNode	No	The button to trigger the shipping estimate calculation.
estimated	boolean	No	Indicates whether the shipping is estimated.
loading	boolean	Yes	Indicates whether the container is loading.
onEstimate	function	No	Callback function to handle the shipping estimate calculation.
price	VNode	Yes	The price object for shipping.
priceExcludingTax	VNode	No	The element displaying the price excluding tax.
priceIncludingTax	VNode	No	The element displaying the price including tax.
stateField	VNode	No	The input field for the state.
taxExcluded	boolean	No	Indicates whether the tax is excluded from the price.
taxIncluded	boolean	No	Indicates whether the tax is included in the price.
zipField	VNode	No	The input field for the zip code.

Example configuration

The following example demonstrates how to render the EstimateShipping container:

EstimateShipping: (ctx) => {
  const estimateShippingForm = document.createElement('div');

provider.render(EstimateShipping, {
    showDefaultEstimatedShippingCost: true,
})('#estimate-shipping');