This is a plugin for the Vendure e-commerce framework designed for allowing customers to save favorite products.
It's two main functions are allowing a customer to toggle a product as a favorite, and return a list of favorites for a customer entity.
After initializing your vendure project, you can add this plugin via yarn or npm install:
yarn add vendure-favorites-plugin
or
npm install vendure-favorites-plugin
and then include it in the vendure-config as below:
import { FavoritesPlugin } from "vendure-favorites-plugin";
export const config: VendureConfig = {
...
plugins: [
...,
FavoritesPlugin
]
}
This plugin includes an optional Admin UI Extension. Which gets compiled into the application bundle by the compileUiExtensions
function exported by the @vendure/ui-devkit
package
import { compileUiExtensions } from '@vendure/ui-devkit/compiler';
AdminUiPlugin.init({
...
app: compileUiExtensions({
...
extensions: [
...
FavoritesPlugin.uiExtensions,
...
]
}),
...
})
To configure the plugin, use the init function instead of providing the class in the VendureConfig:
import { FavoritesPlugin } from "vendure-favorites-plugin";
export const config: VendureConfig = {
...
plugins: [
...,
FavoritesPlugin.init({
// options
})
]
}
Valid options include:
trackHistory
(default: false): This boolean controls when the customer's favorites are recorded as events in their history.
This plugin implements the following extensions to the API.
type Favorite implements Node {
id: ID!
createdAt: DateTime!
updatedAt: DateTime!
product: Product
customer: Customer!
}
type FavoriteList implements PaginatedList {
items: [Favorite!]!
totalItems: Int!
}
extend type Customer {
favorites(options: FavoriteListOptions, productNameFilter: String): FavoriteList!
}
extend type Mutation {
toggleFavorite(productId: ID!): FavoriteList!
}
extend type Query {
favorite(id: ID!): Favorite
}
The Admin UI extension adds a favorites field to the customer detail page, allowing the user to view a list of the customer's favorites.
A development server is configured in the dev-server
folder, using Docker and Docker Compose to spin up a Postgres database, as well as a server and worker. This is used to test the plugin during development.
To start the server, run:
yarn run:dev
To populate or reset the database, run the following command:
yarn populate
Some types are generated automatically using graphql-codegen
. To re-generate types after a change, make sure the development server is running, and use the command:
yarn generate-types
This project uses Coventional Commits along with commitlint and husky to enforce commit style. This enables us to rely on semantic-release to automatically push updates to npm.