Page Manager API¶

API used to perform actions related to the page management like visiting subpages, clearing page cache and toggling a dynamic page reload.

classDiagram
direction LR
    PageManagerApi --> visit
    PageManagerApi --> clearCache
    PageManagerApi --> isDynamicPageReloadEnabled
    PageManagerApi --> enableDynamicPageReload
    PageManagerApi --> disableDynamicPageReload

    class PageManagerApi {
        visit() void
        clearCache() void
        isDynamicPageReloadEnabled() boolean
        enableDynamicPageReload() void
        disableDynamicPageReload() void
    }

    link visit "../methods/visit/"
    link clearCache "../methods/clear-cache/"
    link isDynamicPageReloadEnabled "../methods/is-dynamic-page-reload-enabled/"
    link enableDynamicPageReload "../methods/enable-dynamic-page-reload/"
    link disableDynamicPageReload "../methods/disable-dynamic-page-reload/"

Get API¶

To get the Page Manager API use its name PageManagerApi with the getApiSync method.

useStorefront(async (storefront) => {
    const pageManagerApi = storefront.getApiSync('PageManagerApi');
});

Dynamic Page Reload¶

Under the hood the Storefront shops use a technology called Turbo. Turbo is a framework that reduces the loading and navigating time of the applications. It basically follows links in your pages and replaces the current page contents with the response from the server, all without requiring a full page load. This is what we call a dynamic page reload and it is a default behavior of all Storefront shops. However in some cases it may be necessary to disable this behavior, for example when needing to reload a page in order to submit a form. In such cases you can use the Page Manager API to disable the dynamic page reload.

useStorefront(async (storefront) => {
    const pageManagerApi = storefront.getApiSync('PageManagerApi');

    pageManagerApi.disableDynamicPageReload();
});

In case of a need to disable a dynamic page reload for a specific element you can also add a special prop to HTML elements called data-turbo.

    <form data-turbo="false">
        ...
    </form>

Events¶

Turbo framework offers a set of events that you can listen to and perform some additional actions. You can find the full list of events here.

Methods¶

visit - visit a given url
clearCache - clear cache from a current page
isDynamicPageReloadEnabled - returns true if dynamic page reload is enabled, otherwise it returns false
enableDynamicPageReload - enables dynamic page reload
disableDynamicPageReload - disables dynamic page reload

Event Bus events¶

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

PageManager.visited

Example¶

In this example we make a PageManagerApi call to advance to a given url.

    useStorefront(async (storefront) => {
        const pageManagerApi = storefront.getApiSync('PageManagerApi');

        pageManagerApi.visit('/some-url');
    });

Example¶

In this example we make a PageManagerApi call to clear page cache.

    useStorefront(async (storefront) => {
        const pageManagerApi = storefront.getApiSync('PageManagerApi');

        pageManagerApi.clearCache();
    });

Example¶

In this example we make a PageManagerApi call to enable a dynamic page reload if it is disabled.

    useStorefront(async (storefront) => {
        const pageManagerApi = storefront.getApiSync('PageManagerApi');

        if (pageManagerApi.isDynamicPageReloadEnabled() === false) {
            pageManagerApi.enableDynamicPageReload();
        }
    });