Page component

A page component is similar to a block component but instead of being injected into a page, it stands as its own separate page.

Example: Hello World Page Component

export default context => {
    context.componentLoader.registerPageComponent({
        path: 'hello-world',
        loadContent: async ctx => {
            const { page, shadow } = ctx;

            page.setTitle('Welcome to the Hello world page');

            const h2 = document.createElement('h2');
            h2.innerText = 'Hello World';
            shadow.appendChild(h2);
        },
    });
};

The path property defines a segment of the URL for the page and must be unique. For instance, the URL to this page will be /{country}/{culture}/pages/hello-world.

Note: Plugin authors cannot rely on this URL to be permanent. Use location.getPagePluginAbsolutePath() to retrieve this URL from the context object.

Appearance

A page component consists of a header and content generated by the component. The header is automatically added to the top of the page. By default, it shows a back button, which takes the user back to the start page. The behavior of the back button can be changed using the page.setButton function on the context object. Set the type to "back-button".

Page parameters

A page component can have page parameters, which are arguments to the page. Use location.getPageParams() to read page parameters.

Here's a longer example of a page that displays information about a discount, with CSS and reading discountId from page parameters.

export default context => {
    context.componentLoader.registerPageComponent({
        path: 'discounts',
        loadContent: async ctx => {
            const { shadow, page } = ctx;

            page.setTitle('Your discounts');

            // styles
            const css = new CSSStyleSheet();
            await css.replace(`
                html {
                    font-size: larger;
                    color: var(--border-color);
                }
                p {
                    font-size: 3rem;
                }
            `);
            shadow.adoptedStyleSheets.push(css);

            // read page params
            const { discountId } = ctx.location.getPageParams();

            // contents
            const div = document.createElement('div');
            div.classList.add('list-container');
            div.innerText = 'You are viewing discount with id ' + discountId;
            shadow.appendChild(div);

            const h2 = document.createElement('h2');
            h2.innerText = 'Welcome to the discounts page!';
            div.appendChild(h2);
        },
    });
};

Navigate to a page

Use the "location" object on the context to navigate to a page component.

Here's an example of navigating to a page component. The first property of the argument specifies the path to which the page component is bound. The second property is the page parameters sent to the page. The final property determines whether to add a return URL to easily go back to where the user came from.

// navigate to discount page
context.location.navigateToPageComponent({
    pageName: 'discounts',
    queryParams: { discountId: discount.id },
    addReturnUrl: true
);

// discount page
context.componentLoader.registerPageComponent({
    path: 'discount',
    loadContent: async ctx => {},
});

Page injectable locations

A regular page component is displayed only when another plugin navigates to it. However, a page component can also be associated with a specific location.

Each location represents a special area in the Future Ordering UI and is automatically shown when the user reaches that point in the ordering flow.

For example, the following page component is shown as part of the checkout step — before the user reaches the payment method selection.

The index property determines the component’s position when multiple components are registered for the same location. If multiple components use the same index, their order is not guaranteed.

context.componentLoader.registerPageComponent({
    path: 'checkout-component',
    location: {
        name: 'checkout',
        index: 0,
    },
    loadContent: async ctx => {},
});

Available locations

• checkout, shown as part of the checkout process, after the user presses the Checkout button but before arriving at the page where payment method is selected.

Controlling the next button

The Next button advances the user to the next page in the checkout flow.

You can control its visibility, enabled state, and define a custom callback to run before leaving the page, as shown below:

nextButtonClick = context.page.setButton({
    type: 'next-button',
    visible: true,
    enabled: true,
    onClick: async () => {
        // do stuff here before leaving page
        // proceeds unless an error is thrown
    },
});

// trigger next button from another part of the code
// for example if user presses enter in an input
nextButtonClick();

Component styling

See Component styling