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