Sanity

The long story of each car type lives in Sanity, and Mellow keeps its facts: specs, pictures, features and the price. An editor picks the car type in a string field whose input reads 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

It needs no key, and any site may read it from the browser. It answers:

Code
{
  "rental": "your-rental",
  "channel": "your-channel",
  "carTypes": [
    {
      "id": "…",
      "code": "CAMPER4",
      "slug": "camper-4x4",
      "name": "Camper 4x4",
      "kind": "camper",
      "image": "https://…",
      "updatedAt": "…"
    }
  ]
}

1. The input

A string field keeps the car type's code. Its input is a list of the car types in the feed:

Code
// schemas/car-type-input.tsx
import { useEffect, useState } from "react";
import { set, unset, type StringInputProps } from "sanity";
import { Select } from "@sanity/ui";

const FEED = "https://app.mellow.is/feeds/catalog/your-rental/your-channel";

type CarType = { id: string; code: string; name: string };

export function CarTypeInput(props: StringInputProps) {
  const { value, onChange, elementProps } = props;
  const [list, setList] = useState<CarType[]>([]);

  useEffect(() => {
    fetch(FEED)
      .then((res) => res.json())
      .then((feed) => setList(feed.carTypes));
  }, []);

  return (
    <Select
      {...elementProps}
      value={value ?? ""}
      onChange={(event) => {
        const code = event.currentTarget.value;
        onChange(code ? set(code) : unset());
      }}
    >
      <option value="">Pick a car type</option>
      {list.map((c) => (
        <option key={c.id} value={c.code}>
          {c.name} ({c.code})
        </option>
      ))}
    </Select>
  );
}

2. The field

Code
// schemas/car-page.ts
import { defineField, defineType } from "sanity";
import { CarTypeInput } from "./car-type-input";

export const carPage = defineType({
  name: "carPage",
  title: "Car type page",
  type: "document",
  fields: [
    defineField({ name: "title", type: "string" }),
    defineField({
      name: "carType",
      title: "Car type in Mellow",
      type: "string",
      components: { input: CarTypeInput },
    }),
    defineField({ name: "story", type: "array", of: [{ type: "block" }] }),
  ],
});

3. The page

Read carType with the page, such as with GROQ *[_type == "carPage" && slug.current == $slug][0]{ title, story, carType }, and give it to <mellow-car-type id="…"> and to the search's car-type, as in One car type on its own page. The Prismic recipe shows that markup in a React component, and the Nuxt recipe the same in Vue.

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. To join on the id instead, which never changes, put c.id in the option's value. <mellow-car-type> takes either.