Single page applications (SPAs)

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, e.g. click into a category listing or view 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.

javascript

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

You have to emit this event for every page "load" where the contens of the page change.

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