Skip to content

JavaScript APIs

This guide provides an overview of JavaScript APIs essential for building core storefront functionalities. These APIs serve as reliable tools to ensure stability and efficiency in your custom implementations.

Why you should use JavaScript APIs?

JavaScript APIs act as stable contracts between our platform and your code. Regardless of internal implementation, these APIs are designed to ensure backward compatibility, allowing your code to function seamlessly and return the expected results without needing adjustments.

Returning an API

You can access each API either synchronously or asynchronously:

  • Synchronous Access: Returns the API object immediately.
  • Asynchronous Access: Returns a Promise that resolves to the specified API.
useStorefront((storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi'); // synchronous
    const httpRequesterApiAsync = storefront.getApi('HTTPRequesterApi'); // asynchronous
});

Remember to use either an async/await or a then when accessing an API asynchronously to ensure a seamless implementation

useStorefront(async (storefront) => {
    const httpRequesterApi = await storefront.getApi('HTTPRequesterApi');
});

useStorefront((storefront) => {
    storefront.getApi('HTTPRequesterApi').then((api) => {
        // do something with API
    });
});

Events Constants

The useStorefront SDK provides a convenient events object that contains type-safe constants for event names. This is the recommended approach for listening to events as it helps prevent typos, and ensures that changes to event names are automatically reflected in your code.

Currently, the events object includes:

  • events.analytics - Contains all analytics-related event names

Example

useStorefront((storefront) => {
    const analyticsEvents = storefront.events.analytics;

    storefront.eventBus.on(analyticsEvents.addedToBasket, () => {
        console.log('Item added to basket');
    });

    storefront.eventBus.on(analyticsEvents.viewedItem, () => {
        console.log('Item viewed');
    });
});

Objects

Some custom objects are frequently used across multiple APIs. We have gathered all general-purpose objects in this directory to streamline your reference experience.

Available APIs