`useCartEntries(id?: string)`

The useCartEntries() composable allows for:

adding entries to a cart,
removing entries from a cart,
updating cart entries (e.g. quantity),
getting cart entries by product's code.

useCartEntries() should be treated as an extension for useCart(). To bind particular instances of the useCart() and useCartEntries() together, they simply have to be called with the same unique id as the only argument.

Example

In the following example we are loading a new session cart using useCart().load method and exposing additional functionalities (i.e. adding and removing cart entries) with the useCartEntries() composable.

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

export default {
  setup() {
    const { cart, load } = useCart('unique-id');
    const { add: addToCart, remove: removeFromCart } = useCartEntries('unique-id');

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

    return { addToCart, removeFromCart };
  }
}

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.

`loading`

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseCartEntriesLoading>;

References: UseCartEntriesLoading

`error`

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseCartEntriesError>;

References: UseCartEntriesError

`add()`

Adds a new entry to a cart and updates the cart object of the bound useCart() composable. Under the hood, it calls the addCartEntry API endpoint.

Type

interface AddCartEntryProps extends BaseProps {
  productCode: string;
  quantity: number;
  entry?: OrderEntry
}

async function add(props: AddCartEntryProps): Promise<void>

References: AddCartEntryProps, BaseProps, OrderEntry

Example

In this example we are creating a simple wrapper around the add() method. It accepts a raw product object and calls the add() method with the right arguments.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { add } = useCartEntries('unique-id');

    const addToCart = async (product) => {
      await add({ productCode: product.code, quantity: 1 });
    }

    return { addToCart };
  }
}

`get()`

Returns a cart entry from the cart object of the bound useCart() composable based on the passes productCode. It does not perform any async call under the hood and has no corresponding key either in the loading or error objects.

interface GetCartEntryProps {
  productCode: string;
}

function get(props: GetCartEntryProps): OrderEntry

References: GetCartEntryProps, OrderEntry

Example

In this example, we are using the get() method to create a simple wrapper checking if a product with a given code had already been added to a cart.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { get: getCartEntry } = useCartEntries('unique-id');

    const isInCart = (product) => {
      const { code } = product;
      return Boolean(getCartEntry({ productCode: code }))
    };

    return { isInCart };
  }
}

`getMaxQuantity()`

Returns maximum quantity which can be added to the cart for a given product. It compares the product's stockLevel and its quantity already present in the cart. It respects the value of stockLevelStatus property and:

will always return 0 if it is set to outOfStock
will return infinity (opens new window) if it is set to inStock and stockLevel is undefined (i.e. the Force in Stock (opens new window) scenario).

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

interface GetMaxProductQuantityProps {
  product: Product;
}

function getMaxQuantity(props: GetMaxProductQuantityProps): number;

References: GetMaxProductQuantityProps, Product

Example

In this example, we are using the getMaxQuantity() method to create a simple wrapper checking if a given product can be added to a cart.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { getMaxQuantity } = useCartEntries('unique-id');

    const canBeAddedToCart = (product) => {
      const maxQuantity = getMaxQuantity({ product });
      return maxQuantity > 0;
    }

    return { canBeAddedToCart };
  }
}

`remove()`

Removes an existing entry from a cart and updates the cart object of the bound useCart() composable. Under the hood, it calls the addCartEntry API endpoint.

Type

interface RemoveCartEntryProps extends BaseProps {
  entryNumber: number
}

async function remove(props: RemoveCartEntryProps): Promise<void>

References: RemoveCartEntryProps, BaseProps

Example

In this example, we are creating a simple wrapper around the remove() method. It accepts a raw product object, gets the corresponding cart entry using the get method and calls remove() with the right arguments.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { remove, get: getCartEntry } = useCartEntries('unique-id');

    const removeFromCart = async (product) => {
      const { entryNumber } = getCartEntry({ productCode: product.code });
      await remove({ entryNumber });
    }

    return { removeFromCart };
  }
}

`update()`

Updates an existing cart entry and the cart object of the bound useCart() composable. Under the hood, it calls the addCartEntry API endpoint.

This method offers a shortcut for updating an entry's quantity by accepting the quantity parameter excplicitly. You can also use the entry paramu for all possible cart entry updates (e.g. deliveryPointOfService).

interface UpdateCartEntryProps extends BaseProps {
  entryNumber: number;
  quantity?: number;
  entry?: OrderEntry;
}

async function update(props: UpdateCartEntryProps): Promise<void>

References: UpdateCartEntryProps, BaseProps, OrderEntry

Example

In this example we are creating a simple wrapper around the update() method. It accepts a raw OrderEntry object and a number as arguments. Finally, it calls the update() method to change the entry's quantity.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { update } = useCartEntries('unique-id');

    const updateEntryQuantity = async (entry, quantity) => {
      const { entryNumber } = entry;
      await update({ entryNumber, quantity });
    };

    return { updateEntryQuantity };
  }
}

Example

In this example we are creating a simple wrapper accepting a raw OrderEntry object, a number and a deliveryPointOfServiceName object as arguments. Finally, it updates the entry's quantity as well as its deliveryPointOfService using the entry parameter.

import { useCartEntries } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { update } = useCartEntries('unique-id');

    const updateEntryQuantity = async (entry, quantity, deliveryPointOfService) => {
      const { entryNumber } = entry;
      await update({
        entryNumber, 
        entry: {
          quantity,
          deliveryPointOfService
        }
      });
    };

    return { updateEntryQuantity };
  }
}

← useCartDeliveryModes()

useCartPaymentDetails() →