useOrder(id?: string)

The useOrder() composable allows for loading, storing and placing Orders.

Be careful about shared state

You should pass a unique id as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same id (or those that lack it) will share the same state, even on different pages.

order

Main data object populated by the place() method after a successful order placement.

Type

const order: ComputedProperty<Order>

References: Order

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseOrderLoading>;

References: UseOrderLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseOrderError>;

References: UseOrderError

load()

Fetches an order from the API and saves it to the order property. Under the hood, it sends a request to the getUserOrders API endpoint.

The getUserOrders API method communicates with the SAP's Get a order (opens new window) endpoint. It allows for fetching any anonymous order object if application token and order guid are provided. Using it by malicious users might lead to sensitive data leakage. Vue Storefront intentionally limits the subset of order fields that can be fetched for anonymous user. Full set of fields can be fetched for logged-in users only.

Type

interface LoadOrderProps extends BaseProps {
  code: string;
}

async function load(props: LoadOrderProps): Promise<void>;

References: LoadOrderProps, BaseProps

Example

In the following example, we are loading an order by its code and exposing the order property to the templates by returning it from the setup() method.

import { onMounted } from '@nuxtjs/composition-api';
import { useOrder } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { order, load: loadOrder } = useOrder('unique-id');

    onMounted(async () => {
      await loadOrder({ code: '504123' })
    });

    return { order };
  }
};

place()

Creates an order from an existing cart and saves it to the order property. Under the hood, it sends a request to the placeOrder API endpoint.

Type

interface PlaceOrderProps extends BaseProps {
  cartId: string;
}

async function place(props: PlaceOrderProps): Promise<void>;

References: PlaceOrderProps, BaseProps

Example

In this example we are creating a simple wrapper around the place() method. It passes the correct cart identifier as an argument to place() and places an order.

import { useCart, useOrder, useUser } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { cart } = useCart('main');
    const { place } = useOrder();
    const { isAuthenticated } = useUser();

    const placeOrder = async () => {
      const cartId = isAuthenticated.value ? cart.value?.code : cart.value?.guid;
      await place({ cartId });
    };

    return { placeOrder };
  }
};

set()

Sets the order property manually. It does not perform any async call under the hood and has no corresponding key either in the loading or error objects.

Type

function set: (newOrder: Order | null) => void;

References: Order

Example

In the following example, we are calling the getUserOrders API endpoint to fetch an order instead of using the load method. We are then using the set() method to set the order property manually.

import { onMounted } from '@nuxtjs/composition-api';
import { useOrder } from '@vsf-enterprise/sapcc';
import { useVSFContext } from '@vue-storefront/core';

export default {
  setup() {
    const { $sapcc } = useVSFContext();
    const { order, set: setOrder } = useOrder('unique-id');

    onMounted(async () => {
      const order = await $sapcc.api.getUserOrders({
        code: '504123'
        userId: 'anonymous'
      });
      setOrder(order);
    });

    return { order };
  }
};