EstimateShipping container

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

EstimateShipping configurations

The EstimateShipping 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.

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';

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),