ForgeWP

Practice: Add a Room Enquiry Link

Extend the room schema with an editable link label and destination while preserving existing room data.

Start with Build Editable Room Details. Add an enquiry link that staff can label and point to an existing contact Page. Each room Page should keep its own label and destination.

Your task

Update the existing files rather than creating a second room template:

Table · 2 columns
File
Change
cms/editables/room-details.ts
Add two fields and keep the existing field definitions
src/app/pages/RoomDetails.tsx
Read the new values with useWpMeta and render an anchor

Add:

  • room_enquiry_label, a text field labeled Enquiry link label, defaulting to Ask about this room.
  • room_enquiry_url, a URL field labeled Enquiry destination, defaulting to /contact.

Render the enquiry link after the room facts. Use the schema default when a destination has not yet been saved.

Create a contact Page with the permalink /contact on your test site, or change the schema's fallback to the site's actual contact URL before exporting. Staff can then choose a different destination for any room. This exercise creates a navigation link rather than submitting a form.

Acceptance criteria

  1. The generated field group includes the two new controls beside the original room fields.
  2. A destination and label entered in WordPress survive saving and reloading.
  3. The visitor's link uses the saved destination and visible label.
  4. With an unset or empty destination, the link uses the configured contact fallback.
  5. Two Pages using the template can have different enquiry labels or destinations.
  6. Previously saved description, capacity, and size values remain connected after the template update.
  7. The link can be focused and followed with the keyboard on the visitor page.

Use an existing Page's real permalink for testing. Review the destination as part of the editor's normal publishing workflow.

Hints

Hint 1: Extend the schema

Import url alongside the existing helpers and use it for room_enquiry_url. Keep getEditableDefaults(editable) after the complete schema so it includes the new values.

Read both fields inside the Page component. Use the URL as href and the label as the anchor's text. Follow the same key/default pattern as the existing room fields.

Hint 3: Choose a useful fallback

Point the default destination to a working contact Page. Keep the anchor in the layout and let useWpMeta resolve either a saved room-specific destination or that default.

Verify and compare

Theme terminal: check and export the extended fields
pnpm typecheck
pnpm forgewp export --validate --strict

Update the test theme and check both a Page with saved room details and a second Page with different values. Test a room-specific destination, the configured fallback, keyboard navigation, and a reload of the editor.

Then compare your code with Solution: Room Enquiry Fields.

Extension

Add a text field named room_arrival_note. Put it near the capacity and size in the layout, and verify that its value remains independent for each Page. Decide which default is useful for a room that has not yet been configured.