Vendure Wishlist Plugin

This plugin implements an advanced wishlist solution for your storefront

Features

Guest wishlists
Multiple wishlists
Wishlist names & descriptions
Public & private wishlists
Track purchases from a public wishlist
Move items between wishlists

Setup

After installing, add the plugin to your VendureConfig:

import { WishlistPlugin } from '@vendure-hub/vendure-wishlist-plugin';

export const config = {
    //...
    plugins: [
        WishlistPlugin.init({
            // The license key can be found in your Vendure Hub account
            // at https://vendure.io/account/licenses, and then clicking
            // on the install instructions for this plugin's license
            licenseKey: process.env.WISHLIST_PLUGIN_LICENSE_KEY,
        }),
    ],
};

This plugin defines two new entities & two customFields on the OrderLine entity, so a migration will be required.

GraphQL Extensions

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
}

Storefront Guide

Add to Wishlist

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.

Display whether ProductVariant is in Wishlist

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
        }
    }
}

Managing multiple Wishlists

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.

Public Wishlists

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.

Vendure Wishlist Plugin

Product information

Vendure Wishlist Plugin

Features

Setup

GraphQL Extensions

Storefront Guide

Add to Wishlist

Display whether ProductVariant is in Wishlist

Managing multiple Wishlists

Public Wishlists