Skip to content

Favourites API

Feature name: add-to-favourites

Api name: AddToFavourtiesApi

API used to add or remove product from the favourites list.

classDiagram
direction LR
    FavouritesApi --> subscribe
    FavouritesApi --> unsubscribe
    FavouritesApi --> isSubscribed

    class FavouritesApi {
        subscribe() Promise~TResponseStatus|undefined~
        unsubscribe() Promise~TResponseStatus|undefined~
        isSubscribed() Promise~TResponseStatus|undefined~
    }

    link subscribe "../methods/subscribe/"
    link unsubscribe "../methods/unsubscribe/"
    link isSubscribed "../methods/is-subscribed/"

Get API

To get the Favourites API use its name AddToFavouritesApi with the getApi method.

This API is initialized asynchronously which means that if you use the getApiSync method to get it, it might not exist yet and you will get an error as a result.

useStorefront(async (storefront) => {
    const favouritesApi = await storefront.getApi('AddToFavouritesApi');
});

This API is initialized only after add-to-favourites webcomponent has been added to the page. Unless you add the webcomponent, you won't be able to fetch the API. If you wish to use the API alone without the webcomponent you can use the registerDynamic method from the Feature System API. Here is an example on how to do it:

useStorefront(async (storefront) => {
    const featureSystemApi = this.getApiSync('FeatureSystemApi');
    await featureSystemApi.registerDynamic('add-to-favourites');

    const favouritesApi = await storefront.getApi('AddToFavouritesApi');
});

Methods

  • subscribe - add a given product to the favourites list
  • unsubscribe - remove a given product from the favourites list
  • isSubscribed - check if a given product is in the favourites list

Event Bus events

Methods of this API dispatch the following events with the Event Bus:

Example

In this example we make a AddToFavouritesApi call to add a given product to the favourites list.

useStorefront((storefront) => {
    const favouritesApi = await storefront.getApi('AddToFavouritesApi');

    favouritesApi.subscribe(5);
});

Example

In this example we make a AddToFavouritesApi call to remove a given product from the favourites list.

useStorefront((storefront) => {
    const favouritesApi = await storefront.getApi('AddToFavouritesApi');

    favouritesApi.unsubscribe(5);
});

Example

In this example we make a AddToFavouritesApi call to check if a given product is on the favourites list.

useStorefront((storefront) => {
    const favouritesApi = await storefront.getApi('AddToFavouritesApi');

    favouritesApi.isSubscribed(5);
});

Objects reference

Webcomponents reference

APIs reference