useShipping

Features

useShipping composable can be used for:

• Loading shipping address for the current cart.
• Saving shipping address for the current cart.

API

• load - function for fetching shipping address. When invoked, it requests data from the API and populates shipping property. This method accepts a single optional params object. The params has the following option:

  • customQuery?: CustomQuery

    type CustomQuery = {
      getBasicProfile: string
    }
    

• save - function for saving shipping address. This method accepts a single saveParams object. The saveParams has the following options:

  • shippingDetails: Address

  • customQuery?: CustomQuery

    type Address = {
      __typename?: "Address";
      id?: Maybe<Scalars["String"]>;
      title?: Maybe<Scalars["String"]>;
      salutation?: Maybe<Scalars["String"]>;
      firstName?: Maybe<Scalars["String"]>;
      lastName?: Maybe<Scalars["String"]>;
      streetName?: Maybe<Scalars["String"]>;
      streetNumber?: Maybe<Scalars["String"]>;
      additionalStreetInfo?: Maybe<Scalars["String"]>;
      postalCode?: Maybe<Scalars["String"]>;
      city?: Maybe<Scalars["String"]>;
      region?: Maybe<Scalars["String"]>;
      state?: Maybe<Scalars["String"]>;
      country: Scalars["Country"];
      company?: Maybe<Scalars["String"]>;
      department?: Maybe<Scalars["String"]>;
      building?: Maybe<Scalars["String"]>;
      apartment?: Maybe<Scalars["String"]>;
      pOBox?: Maybe<Scalars["String"]>;
      contactInfo: AddressContactInfo;
      phone?: Maybe<Scalars["String"]>;
      email?: Maybe<Scalars["String"]>;
      additionalAddressInfo?: Maybe<Scalars["String"]>;
      externalId?: Maybe<Scalars["String"]>;
      key?: Maybe<Scalars["String"]>;
    };
    
    type CustomQuery = {
      updateCart: string
    }
    

• shipping: Address - the main data object that contains a shipping address.

• loading: boolean - a reactive object containing information about the loading state of your load or save method.

• error: UseShippingErrors - a reactive object containing the error message if load or save failed for any reason.

  interface UseShippingErrors {
    load?: Error;
    save?: Error;
  }
  

Getters

We do not provide getters for checkout and its parts.

Example

import { useShipping } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const { load, shipping } = useShipping();

    onSSR(async () => {
      await load();
    });

    return {
      shipping
    };
  }
}