Custom Commerce Plugins

To create a custom plugin for the Commerce provider you need to define each of the methods defined by the Commerce Provider interface.

Each interface can be found under their respective directories, here is a list of the methods you must define: Commerce Provider sourcecode Review the X.types.ts file in each directory for the methods interface definition along with the response interface.

• Cart
• Catalog
• Checkout
• Commerce
• Context
• Customer
• Product

Example

Overview

Let's create a content plugin. Here is the interface for the Content plugin.

export type UseCartPlugin = (
  config: Config,
  cart?: Cart,
) => {
  get: () => Promise<Cart>;
  add: (
    productId: string,
    quantity: number,
    properties?: CartItemProperties,
  ) => Promise<Cart>;
  update: (
    cartItem: CartItem,
    quantity: number,
    properties?: CartItemProperties,
  ) => Promise<Cart>;
  remove: (cartItem: CartItem) => Promise<Cart>;
};

the content plugin method takes 2 parameters, 1 required, 1 optional.

• config: the plugin configuration, this object is passed in at the time of registering the plugin (see Register the plugin)
• productId: the id of the product to load.

This plugin returns 4 methods.

• get
• add
• update
• remove

So let's put this together to create a basic Cart plugin.

Create the plugin

const useCart: UseCartPlugin = (_config: Config, cart?: Cart) => ({
  get: async (): Promise<Cart> => {
    // load the cart object and return it
  },
  add: async (
    productId: string | number,
    quantity: number,
    properties?: CartItemProperties,
  ): Promise<Cart> => {
    // do your add logic and return the cart object
  },
  update: async (
    cartItem: CartItem,
    quantity: number,
    properties?: CartItemProperties,
  ): Promise<Cart> => {
    // do your update logic and return the cart object
  },
  remove: async (cartItem: CartItem): Promise<Cart> => {
    // do your remove logic and return the cart object
  },
});

export default useCart;

Now export your plugin from your modules entry file. (typically index.ts)

export * from './Cart'

Register the plugin

With your plugin created you can now register it with your provider. On your frontend create a file to register the plugins.

// customProvider.ts
// Import the commerce provider
import { commerce } from "@acromedia/gesso-commerce";
// Import your custom plugin
import plugin from "@acromedia/your-plugin";

// Configure the provider as required.
const config = {
  // Your configuration if required
};

// Register the plugins with the provider.
const commerce = commerce(plugin, config);

export default commerce;

you can now import your methods from this file where needed.

// Clientside method
import {useCart} from 'path/to/customProvider';

// Serverside method
import {getCart} from 'path/to/customProvider';