Vue Storefront is now Alokai! Learn More
Wishlist

Wishlist

Introduction

This section will cover the basics of the wishlist and how to use it. We will also cover how to add, remove and clear products from the wishlist.

API Reference

You can find all available CT module methods and their description in the API Reference.

Wishlist is a shopping list

In Commercetools, the wishlist is called a shopping list.

Creating a wishlist

To create a wishlist, you can use the createMyShoppingList method.

const MY_SHOPPING_LIST_PARAMS = {
  name: [
    { locale: 'en', value: 'en-test' },
  ],
  description: [
    { locale: 'en', value: 'en-test-description' }
  ],
  lineItems: [
    {
      sku: 'some-sku',
      quantity: 1
    }
  ]
};

const { wishlist } = await sdk.ct.createMyShoppingList(MY_SHOPPING_LIST_PARAMS);

Getting the wishlist

To get the wishlist, you can use the getShoppingList method.

Fetching the most recently created shopping list.

import { sdk } from '~/sdk.config.ts';

const { me: { shoppingLists } } = await sdk.ct.getShoppingList();

Fetching a list of max 5 shopping lists sorted by name in ascending order. Learn more about sorting in commercetools here.

import { sdk } from '~/sdk.config.ts';

const { me: { shoppingLists } } = await sdk.ct.getShoppingList({
  limit: 5,
  sort: ['name.en asc']
});

Adding products

To add products to the wishlist, you can use the addToMyShoppingList method.

Adding a product to the Shopping List:

const MY_SHOPPING_LIST_PARAMS = {
  products: [
   { sku: 'test-sku' }
  ],
  id: 'test-id',
  version: 'test-version'
};

const { wishlist } = await sdk.ct.addToMyShoppingList(MY_SHOPPING_LIST_PARAMS);

Or you can add multiple products to the Shopping List:

const MY_SHOPPING_LIST_PARAMS = {
  products: [
   { sku: 'test-sku-1' },
   { sku: 'test-sku-2' },
   ...and so on
  ],
  id: 'test-id',
  version: 'test-version'
};

const { wishlist } = await sdk.ct.addToMyShoppingList(MY_SHOPPING_LIST_PARAMS);

Removing products

To remove products from the wishlist, you can use the removeFromMyShoppingList method.

const REMOVE_PRODUCT_SHOPPING_LIST_PARAMS = {
  id: 'test-id',
  version: 'test-version',
  lineItems: [
    {
      id 'some-id',
      quantity: 1
    }
  ]
};

const { wishlist } = await sdk.ct.removeFromMyShoppingList(REMOVE_PRODUCT_SHOPPING_LIST_PARAMS);