Single page applications (SPAs)

Note

You are reading about requirements for the integration done by the Luigi’s Box team. You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi’s Box frontend libraries.

If your website is written as a single page application you need to take an extra step to make it compatible with Luigi’s Box integration via the LBX script.

How to know if your website is a single page application?

• It is written in React
• It is written in Vue.js
• It is written in Angular

To be 100% sure, consult your developers to confirm.

Page load events

The SPAs are avoiding a regular page loading mechanism by design. If you navigate the website, for example, clicking into a category listing or viewing a product detail, the browser is not reloading the page, instead the page loading is handled by the application.

To notify Luigi’s Box that a page has been loaded, emit a JavaScript event called lbx:page:load. You can use the sample code below.

const event = new Event("lbx:page:load");
document.dispatchEvent(event);

You have to emit this event for every page “load” where the contents of the page change.

Note

You only have to do this if your website is written as a single page application.