ShippingMethods container

The ShippingMethods container is designed to manage and display the selection of available shipping methods during the checkout process. You can configure it to handle the selection of shipping methods, display the available shipping methods, and manage the main slot for the shipping methods.

ShippingMethods configurations

The ShippingMethods container provides the following configuration options:

Option	Type	Req?	Description
hideOnVirtualCart	boolean	No	Hides the component if the cart is virtual.
onCheckoutDataUpdate	function	No	A function that returns a promise. It is called to update the checkout data.
onShippingMethodSelect	function	No	A function that takes a ShippingMethod object as an argument. It is called when a shipping method is selected.
preSelectedMethod	object	No	Object containing carrierCode and methodCode strings. It represents the pre-selected shipping method.
shippingMethodsSlot	object	No	Slot used to provide additional shipping methods.

Example

The following example renders the ShippingMethods container on a checkout page. It includes configurations to hide the component for virtual carts and to refresh the cart data when checkout data is updated.

import * as cartApi from '@dropins/storefront-cart/api.js';
import ShippingMethods from '@dropins/storefront-checkout/containers/ShippingMethods.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $delivery = checkoutFragment.querySelector('.checkout__delivery');

CheckoutProvider.render(ShippingMethods, {
  hideOnVirtualCart: true,
  onCheckoutDataUpdate: () => {
    cartApi.refreshCart().catch(console.error);
  },
})($delivery),