# Pages and paths

The widget works on one page, or across one page for each step. A full page load loses nothing, as the order lives in three places:

| What                                                       | Where                      | Why                                                   |
| ---------------------------------------------------------- | -------------------------- | ----------------------------------------------------- |
| The search, the car type, the level, add-on covers, extras | The address                | A link can be shared, and a page cache keeps working. |
| The customer's details                                     | The tab's `sessionStorage` | Personal data never goes in an address.               |
| The hold and the booking after Pay                         | The tab's `sessionStorage` | The done page and a reload find them.                 |

The address of an order looks like this. Products go by their code and the car type by its slug. The site's own parameters stay as they are:

```
/book?pickup=…&pickupAt=2027-06-01T10:00&returnAt=2027-06-04T10:00
     &carType=camper-4x4&insurance=PREMIUM&extras=GPS,CHAIR:2&step=extras
```

`url-state="none"` keeps the step and the order in memory instead. A reload then starts again.

## One page

Without `paths`, every step is on the page, and the step is in `?step=`. The browser's Back button goes one step back. An address with a whole search and no step opens on the car types.

## One page for each step

`paths` names a page for each step:

```html
<mellow-booking
  rental="your-rental"
  auth="pk_live_…"
  paths="car-type=/book insurance=/book/insurance extras=/book/extras driver=/book/details pay=/book/pay done=/book/thanks"
></mellow-booking>
```

Put the same tag on each of those pages. Each page shows its own step. Next goes to the next step's page.

- A step with no path is on the page of the step before it. The steps before the first path are on the first path's page. Above, the search is thus on `/book` with the car types.
- A page whose earlier steps are not complete shows the first step that is not. Thus `/book/insurance` opened with no car type shows the car types, on `/book`.
- A page that no path names holds every step.

## Your own router

By default a move to another page is a full page load. That suits WordPress and plain HTML. A site with its own router, such as Next.js or Nuxt, takes the move itself:

1. Listen for `mellow-step` and cancel it with `preventDefault()`.
2. Send your router to `event.detail.path`.
3. Once the router moved, call `store.locate()`: the store reads the address again.

```js
const booking = document.querySelector("mellow-booking");
const store = await booking.storeReady;
booking.addEventListener("mellow-step", (event) => {
  const next = new URL(event.detail.path, location.href);
  if (next.pathname === location.pathname) return; // the same page: the widget moves itself
  event.preventDefault();
  router.push(next.pathname + next.search).then(() => store.locate());
});
```

Keep the same `<mellow-booking>` element in a layout that every booking page shares. The store then stays in memory across the pages, and the address and the storage are only for a reload.