Skip to main content

Wishlists

Overview​

The wishlist feature allows shoppers to add products to the list in one click, review those items at a later time and keep track of the prices and other product information. In this article we describe how to set it up.

The scope of the wishlist feature currently includes:

  • Ability to have one wishlist per customer
  • Ability to add products to a wishlist
  • Ability to remove products from a wishlist

Reasons customers love wishlists​

  • Saving items for later so that they are not lost or forgotten
  • Tracking items that are currently out of the shopper's price range but might be on sale in the future
  • Creating lists for special events such as a holiday or a birthday

While these are important reasons for customers, the additional benefit of the wishlist is that it allows e-comm merchants to limit cart abandonment by encouraging customers to use the wishlist for item organization instead of using the cart. This is because a large part of shoppers use the cart with an intention to organize items for later purchasing, essentially as a wishlist, which is reflected in high cart abandonment rate. Customer wishlists feature allows users to add products to the list in one click, review those items at a later time, and track the prices and other information.

Wishlist functionalities​

Which products can be added to the wishlist?​

All products can be added to the wishlist, including the ones currently out of stock. Currently, the wishlist feature supports up to 10000 products in a single wishlist.

One wishlist per shopper​

Each shopper can have one wishlist connected to their account on your website. Your shopper must be logged in. Read here on how to handle customer registration, login and password reset email flow.

Allow customers to add products to their wishlist​

You can allow customers to add products to the wishlist from any place in the purchasing journey: product listing page, product details page, basket, checkout etc. However, the place from which the end customer adds products to a wishlist is determined by your frontend implementation. At the moment, it is only possible to add products to a wishlist one item at a time.

Allow customers to remove products from their wishlist​

You can allow customers to remove products from the wishlist. Typically this is done from the customer account section on the wishlist level.

Getting wishlist information​

Currently, the functionality supports one wishlist per user. You can get it via the customer query, see the example below. For more wishlist fields, see API docs.

customer {
  wishlists {
    id
    isDefault
    items (page:1, limit: 2) {
      id
      name
      price {
        formattedValue
      }
    }
  }
}

Like in the example, you can paginate the items using the paginator query parameters.

If the wishlist is found for the end user, the response will be:

{
  "data": {
    "customer": {
      "wishlists": [
        {
          "id": 1,
          "isDefault": true,
          "items": [
            {
              "id": 1,
              "name": "Test Product",
              "price": {
                "formattedValue": "94.50 SEK"
              }
            }
          ]
        }
      ]
    }
  }
}

Adding the product to wishlist​

Each customer has one wishlist. To add an item to this wishlist, run the following mutation:

mutation {
  addWishlistItem(displayItemId: {displayItemId}) {
    wishlist {
      id
      name
      items (limit: 10, page: 1) {
        id
        name
      }
    }
    userErrors {
      path
      message
    }
  }
}

Where {displayItemId} is id of DisplayItem.

Success​

{
  "data": {
    "addWishlistItem": {
      "wishlist": {
        "id": 1,
        "name": "DEFAULT",
        "items": [
          {
            "id": 6,
            "name": "Test Product Discounted"
          }
        ]
      },
      "userErrors": []
    }
  }
}

Validation errors​

The mutation has validation for several cases, including:

Display item not found​

{
  "data": {
    "addWishlistItem": {
      "userErrors": [
        {
          "path": ["addWishlistItem", "displayItem", "id"],
          "message": "Could not find a display item with id 1"
        }
      ]
    }
  }
}

Duplicate display in wishlist​

{
  "data": {
    "addWishlistItem": {
      "userErrors": [
        {
          "path": ["addWishlistItem", "displayItem"],
          "message": "Cannot add display 1 to wishlist 1: duplicate item"
        }
      ]
    }
  }
}

Item belongs to other store type​

{
  "data": {
    "addWishlistItem": {
      "userErrors": [
        {
          "path": ["addWishlistItem", "displayItem", "id"],
          "message": "Invalid store type: WHOLESALE, expected store type: DIRECT_TO_CONSUMER"
        }
      ]
    }
  }
}

Removing the product from the wishlist​

To remove an item from the wishlist, run the following mutation:

mutation {
  removeWishlistItem(displayItemId: 1, wishlistId: 1) {
    wishlist {
      name
      items(limit: 10, page: 1) {
        id
      }
    }
    userErrors {
      path
      message
    }
  }
}

Where:

Success​

{
  "data": {
    "removeWishlistItem": {
      "wishlist": {
        "name": "DEFAULT",
        "items": [
          {
            "id": 6,
            "name": "Test Product Discounted"
          }
        ]
      },
      "userErrors": []
    }
  }
}

Validation errors​

The mutation provides validation for several cases, including:

Display item not found​

{
  "data": {
    "removeWishlistItem": {
      "userErrors": [
        {
          "path": ["removeWishlistItem", "displayItem", "id"],
          "message": "Could not find a display item with id 10000"
        }
      ]
    }
  }
}

Display item not found in wishlist​

{
  "data": {
    "removeWishlistItem": {
      "userErrors": [
        {
          "path": ["removeWishlistItem", "wishlist", "id"],
          "message": "Could not find a wishlist item with wishlist id '1' and display id '3'"
        }
      ]
    }
  }
}

Wishlist not found / current user is not owner of selected wishlist​

{
  "data": {
    "removeWishlistItem": {
      "userErrors": [
        {
          "path": ["removeWishlistItem", "wishlistId"],
          "message": "Wishlist with id 3 not found"
        }
      ]
    }
  }
}
Last updated on