Skip to content

User API

API used to perform actions related to the currently authenticated user like getting the user data, orders, addresses and more.

classDiagram
direction LR
    class selectUser["selectUser$"]
    class selectOrders["selectOrders$"]
    class selectAddresses["selectAddresses$"]
    class selectIsProductNotificationPossible["selectIsProductNotificationPossible$"]
    class selectLoyalty["selectLoyalty$"]
    class selectLoyaltyPoints["selectLoyaltyPoints$"]

    UserApi --> getUser
    UserApi --> selectUser
    UserApi --> getOrders
    UserApi --> selectOrders
    UserApi --> getAddresses
    UserApi --> selectAddresses
    UserApi --> isProductNotificationPossible
    UserApi --> selectIsProductNotificationPossible
    UserApi --> getLoyalty
    UserApi --> selectLoyalty
    UserApi --> getLoyaltyPoints
    UserApi --> selectLoyaltyPoints

    class UserApi {
        getUser() User|null
        selectUser$() Observable~User|null~
        getOrders() Promise~UserOrder[]~
        selectOrders$() Observable~Promise~UserOrder[]~~
        getAddresses() Promise~UserAddress[]~
        selectAddresses$() Observable~Promise~UserAddress[]~~
        isProductNotificationPossible(productVariantId: number) boolean
        selectIsProductNotificationPossible$(productVariantId: number) Observable~boolean~
        getLoyalty() UserLoyalty|null
        selectLoyalty$() Observable~UserLoyalty|null~
        getLoyaltyPoints() number|null~
        selectLoyaltyPoints$() Observable~number|null~
    }

    link getUser "../methods/get-user/"
    link selectUser "../methods/select-user/"
    link getOrders "../methods/get-orders/"
    link selectOrders "../methods/select-orders/"
    link getAddresses "../methods/get-addresses/"
    link selectAddresses "../methods/select-addresses/"
    link isProductNotificationPossible "../methods/is-product-notification-possible/"
    link selectIsProductNotificationPossible "../methods/select-is-product-notification-possible/"
    link getLoyalty "../methods/get-loyalty/"
    link selectLoyalty "../methods/select-loyalty/"
    link getLoyaltyPoints "../methods/get-loyalty-points/"
    link selectLoyaltyPoints "../methods/select-loyalty-points/"

Get API

To get the User API use its name UserApi 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 userApi = await storefront.getApi('UserApi');
});

Methods

  • getUser - returns data of the currently authenticated user
  • selectUser$ - returns an observable with the data of the currently authenticated user
  • getOrders - returns a promise with orders related to the currently authenticated user
  • selectOrders$ - returns an observable with a promise with orders related to the currently authenticated user
  • getAddresses - returns a promise with addresses related to the currently authenticated user
  • selectAddresses$ - returns an observable with a promise with addresses related to the currently authenticated user
  • isProductNotificationPossible - returns a boolean value indicating if the user can subscribe to notifications about a certain product
  • selectIsProductNotificationPossible$ - returns an observable with a boolean value indicating if the user can subscribe to notifications about a certain product
  • getLoyaltyPoints - returns an object of properties regarding the loyalty program
  • selectLoyaltyPoints$ - returns an observable with an object of properties regarding the loyalty program
  • getLoyaltyPoints - returns a number or null representing the amount of points in the loyalty program
  • selectLoyaltyPoints$ - returns an observable with a number or null representing the current amount of points in the loyalty program

Event Bus events

This API listens the following events with the Event Bus:

Example

In this example we make a UserApi call to get an email of a currently authenticated user.

    useStorefront(async (storefront) => {
        const userApi = await storefront.getApi('UserApi');

        const user = userApi.getUser();

        if (user) {
            console.log('email of a current user:', user.email);
        }
    });

Example

In this example we make a UserApi call to get informations about a user. If the user is not authenticated, no action will be performed. However if the user is authenticated and it is possible to send him notifications we will use the AvailabilityNotifierApi to subscribe the user to notifications about the availability of a certain product.

Note that for the sake of example simplicity we wrote an id of some product variant by hand, however in real world this data usually gets passed to webcomponents within a product context with the help of Twig and ObjectApi.

    useStorefront(async (storefront) => {
        const userApi = await storefront.getApi('UserApi');
        const availabilityNotifierApi = await storefront.getApi('AvailabilityNotifierApi');

        const exampleProductVariantId = 1;

        const user = userApi.getUser();
        const isNotificationPossible = userApi.isProductNotificationPossible(exampleProductVariantId);

        if (user && isNotificationPossible) {
            availabilityNotifierApi.subscribe(exampleProductVariantId, user?.email);
        }
    });

Example

In this example we make a UserApi call to get an observable with addresses currently related to the user. We then subscribe to such observable and perform some action when the observable emits a new value.

    useStorefront(async (storefront) => {
        const userApi = await storefront.getApi('UserApi');

        const userAddresses$ = userApi.selectAddresses$();

        userAddresses$.subscribe((addresses) => {
            const billingAddress = user?.addresses.billing?.address;

            if (billingAddress) {
                console.log('billing address:', billingAddress)
            }
        });
    });

Models reference