# Prismic

The long story of each car type lives in Prismic, and Mellow keeps its facts: specs, pictures, features and the price. An editor picks the car type in an integration field, from Mellow's catalog feed. The page then shows the editor's text beside the widget for that car type.

:::caution{title="Not tried yet"}
Mellow has not tried this recipe in a Prismic repository yet. The catalog feed's Prismic shape was checked against Prismic's own documentation for a pull endpoint.
:::

## The catalog feed

In Mellow, open **Settings · Widget** and the widget. Under **Show more**, press **Copy CMS link**. It is the address of the widget's catalog feed, such as:

```
https://app.mellow.is/feeds/catalog/your-rental/your-channel
```

The feed lists the car types the widget's Website channel sells. It needs no key. Add `?format=prismic` for the shape Prismic pulls: 50 car types a page, with `results_size`, and `page=` for the next page. Add `&locale=de` for the names in another language the rental uses.

Each item's `blob`, which Prismic gives your site, holds the car type's `id`, `code`, `slug`, `name`, `kind` and `image` (the first picture's address, or null).

## 1. A catalog in Prismic

1. In Prismic, open **Settings → Integration Fields**. When the tab is not there, ask Prismic's support for it.
2. Pick **Pull data from my endpoint**.
3. Give the catalog a name, such as `mellow car types`.
4. In **Endpoint**, paste the CMS link with `?format=prismic` after it. Leave **Access token** empty.
5. Press **Create my integration field**. Prismic reads the feed at once, then every 30 minutes.

## 2. A field on the car type page

Add an integration field to the page type that tells a car type's story, with the catalog's id, `<repository>--<catalog name>`:

```sh
npx prismic field add integration car_type --to-type car_page \
  --catalog your-repository--mellow_car_types
```

The editor then picks the car type from a list with its name and code.

## 3. The page

Read the field from the page's data, and give its `code` to `<mellow-car-type>` and to the search's `car-type`. The search shows the car type's price for the customer's dates, and Book opens the booking page with it chosen. Next.js, as in the [Next.js recipe](/widget/recipes/nextjs):

```tsx
// The page's own text from Prismic, then the facts and the search of the picked car type.
<PrismicRichText field={page.data.story} />
<CarTypeSearch code={page.data.car_type?.code} />
```

```tsx
"use client";

export function CarTypeSearch({ code }: { code?: string }) {
  if (!code) return null;
  return (
    <>
      <mellow-car-type id={code}>
        <mellow-image index="0"></mellow-image>
        <mellow-features></mellow-features>
      </mellow-car-type>
      <mellow-search
        rental="your-rental"
        auth={process.env.NEXT_PUBLIC_MELLOW_KEY!}
        action="/book"
        car-type={code}
      ></mellow-search>
    </>
  );
}
```

The booking page, `/book`, holds `<mellow-booking>`.

The code is the join between the two: staff may change a car type's code in Mellow. Then the editor picks the car type again. The `id` in the blob never changes, and `<mellow-car-type>` takes it too.