ShippingMethods container

The ShippingMethods is a conditional container. It 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
hideOnEmptyCart (*)	boolean	No	Hides the container if the cart is empty (default value is true).
hideOnVirtualCart (*)	boolean	No	Hides the container if the cart is virtual (default value is false).
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.

(*) Properties inherited from ConditionalContainer

These configuration options are implementing the ShippingMethodsProps interface:

ShippingMethodsProps interface

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

export interface ShippingMethodsProps extends HTMLAttributes<HTMLDivElement> {
  onShippingMethodSelect?: (method: ShippingMethod) => void;
  preSelectedMethod?: { carrierCode: string; methodCode: string };
}

The onShippingMethodSelect property is a handler used to perform actions called when a shipping method is selected.

The preSelectedMethod property is an object containing the pair of carrierCode and methodCode values which defines the pre-selected shipping method to show.

Example

The following example renders the ShippingMethods container on a checkout page. It includes configurations to hide the component for virtual carts, pre-selecting the free shipping in case no shipping method is selected, and showing a message in case the chosen shipping method is Best Way (Table Rate).

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,
  preSelectedMethod: { carrierCode: 'freeshipping', methodCode: 'freeshipping' },
  onShippingMethodSelect: (method) => {
    if (method.carrier.code === 'tablerate' && method.code === 'bestway') {
      const shippingMsg = document.createElement('div');
      shippingMsg.innerText = 'Shipping method not available for Canary Islands';
      $delivery.appendChild(shippingMsg);
    }
  },
})($delivery),