EstimateShipping container

The EstimateShipping container is designed to estimate and display shipping costs during the checkout process.

This container is read-only, unlike the editable EstimateShipping container in the cart drop-in component. Initially, it displays estimated shipping costs. After a customer provides a shipping address and selects a shipping method, it shows the actual shipping cost. This container is designed to be used as a slot within the OrderSummary container from the cart, where the estimated shipping information is displayed.

EstimateShipping configurations

The EstimateShipping container provides the following configuration options:

These configuration options implement the EstimateShippingProps interface:

EstimateShippingProps interface

The EstimateShipping container receives an object as a parameter which implements the EstimateShippingProps interface with the following properties:

export interface EstimateShippingProps {
  active?: boolean;
}

• Set the active property to true to have the container in reactive mode (it is visible and responds to system events). If it is set to false, the container is deactivated (it does not subscribe to system events and is not rendered).

Example

The following example renders an OrderSummary container within a checkout page and includes a slot for estimating shipping:

import OrderSummary from '@dropins/storefront-cart/containers/OrderSummary.js';
import { render as CartProvider } from '@dropins/storefront-cart/render.js';

import EstimateShipping from '@dropins/storefront-checkout/containers/EstimateShipping.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $orderSummary = checkoutFragment.querySelector(
  '.checkout__order-summary',
);

CartProvider.render(OrderSummary, {
  slots: {
    EstimateShipping: (esCtx) => {
      const estimateShippingForm = document.createElement('div');
      CheckoutProvider.render(EstimateShipping)(estimateShippingForm);
      esCtx.appendChild(estimateShippingForm);
    },
  },
})($orderSummary),