# useShippingProvider
# Features
useShippingProvider
composable can be used for:
- Loading shipping methods for the current cart.
- Selecting shipping method for the current cart.
# API
load
- function for fetching shipping method. When invoked, it requests data from the API and populates thestate
property.save
- function for selecting shipping method. This method accepts a singlesaveParams
object. ThesaveParams
has the following options:shippingMethod: ShippingMethod
type ShippingMethod = {
description?: string;
externalShippingMethod?: string;
id: string;
name?: string;
price?: number;
shippingPromotions?: Array<ShippingPromotion>;
};
type ShippingPromotion = {
calloutMsg?: string;
promotionId?: string;
promotionName?: string;
}
state: ShippingState
- a main data object that contains the selected shipping method, as well as the currently applicable methods, based on the added products, promotions and addresses, and the ID of the default method
interface ShippingProviderState {
applicableShippingMethods?: Array<ShippingMethod>;
defaultShippingMethodId?: string;
selectedShippingMethod: ShippingMethod;
}
loading: boolean
- a reactive object containing information about loading state of yourload
orsave
method.error: UseShippingProviderErrors
- a reactive object containing the error message, ifload
orsave
failed for any reason.
interface UseShippingProviderErrors {
load?: Error;
save?: Error;
}
# Getters
We do not provide getters for checkout and its parts.
# Example
import { useShippingProvider } from '@vue-storefront/sfcc';
import { onSSR } from '@vue-storefront/core';
import { computed } from '@vue/composition-api';
export default {
setup () {
const { load, state } = useShippingProvider();
onSSR(async () => {
await load();
});
return {
selectedShippingMethod: computed(() => state.value && state.value.selectedShippingMethod)
};
}
}