Comprehensive wishlists: guest wishlists, multiple lists, private/public lists, sharing & purchase tracking
Sign up to be notified when our paid plugins become available
Integration type
Category
Last published
This plugin implements an advanced wishlist solution for your storefront
After installing, add the plugin to your VendureConfig:
import { WishlistPlugin } from '@vendure-plus/wishlist-plugin';
export const config = {
//...
plugins: [
WishlistPlugin,
],
};
This plugin defines two new entities & two customFields on the OrderLine entity, so a migration will be required.
This plugin extends the Shop API with the following schema:
type Wishlist implements Node {
id: ID!
createdAt: DateTime!
updatedAt: DateTime!
customer: Customer
itemCount: Int!
items: [WishlistItem!]!
name: String!
description: String
isPublic: Boolean!
publicCode: String
}
type WishlistItem implements Node {
id: ID!
createdAt: DateTime!
updatedAt: DateTime!
productVariant: ProductVariant!
product: Product!
purchased: Boolean!
lastPurchasedAt: DateTime
}
type ProductVariantWishlistData {
id: ID!
name: String
addedAt: DateTime!
}
extend type ProductVariant {
appearsInWishlists: [ProductVariantWishlistData!]!
}
extend type Query {
activeUserWishlist(id: ID): Wishlist
activeUserWishlists: [Wishlist!]!
publicWishlist(publicCode: String!): Wishlist
}
extend type Mutation {
addToWishlist(productVariantId: ID!, wishlistId: ID): Wishlist!
removeFromWishlist(itemIds: [ID!]!, wishlistId: ID): Wishlist!
createWishlist(input: CreateWishlistInput!): Wishlist!
updateWishlist(input: UpdateWishlistInput!): Wishlist!
deleteWishlist(id: ID!): DeletionResponse!
setWishlistVisibility(id: ID!, isPublic: Boolean!): Wishlist!
addWishlistItemsToOrder(itemIds: [ID!]!): Order!
moveWishlistItems(itemIds: [ID!]!, targetWishlistId: ID!): Wishlist
}
input CreateWishlistInput {
name: String!
description: String
}
input UpdateWishlistInput {
id: ID!
name: String
description: String
}
In your storefront, execute the mutation addToWishlist
, passing the id ProductVariant.
If the Customer is not signed in, a new anonymous Wishlist will be created and associated with the current Session. If signed, in a new default Wishlist will be created and associated with that Customer.
If a Customer has an anonymous Wishlist and then signs in, the contents of that anonymous Wishlist will get transferred over to the Customer account. If there already exists a Wishlist associated with the Customer account, the contents of the anonymous wishlist will get merged into it.
On your product detail page, you can then display the fact that a given ProductVariant is in a Wishlist by querying the
new appearsInWishlists
field on the ProductVariant
type:
query {
productVariant(sku: $sku) {
id
# ...etc
appearsInWishlists {
id
addedAt
name
}
}
}
Multiple wishlists may only be created for signed-in Customers. Anonymous customers are limited to the single anonymous Wishlist.
The first Wishlist that gets automatically created for a Customer is known as the “default” Wishlist. This is the
Wishlist that will be used when executing addToWishlist
without specifying a Wishlist id.
An unlimited number of additional Wishlists may be created by the Customer by using the createWishlist
mutation. Then
you can manage these Wishlists using the mutations updateWishlist
& deleteWishlist
, and you can move items between
Wishlists with moveWishlistItems
.
A signed-in Customer’s Wishlist can be set to “public”, which means it will become accessible publicly by
querying publicWishlist
and passing the publicCode
of the public Wishlist. This can be used, for example, to share a
Christmas gift list with friends.
To add an item from a public Wishlist to an order, use the addWishlistItemsToOrder
mutation, passing the id of the
WishlistItem. Doing so will populate the addedFromWishlistCustomerName
and addedFromWishlistName
customFields on the
resulting OrderLine
. This can then be used to display in your Order listing that this line was added from someone’s
public Wishlist:
query {
activeOrder {
id
# ...etc
lines {
id
# ...etc
customFields {
addedFromWishlistCustomerName
addedFromWishlistName
}
}
}
}
To indicate whether items on the public Wishlist were purchased by someone (e.g. to prevent people from buying the same gift), use the WishlistItem.lastPurchasedAt
field.