Copy page

Recipes

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.

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:

Code
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>:

Code
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:

Code
// 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} />

Code
"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.