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:
File Change cms/editables/room-details.tsAdd two fields and keep the existing field definitions src/app/pages/RoomDetails.tsxRead 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
- The generated field group includes the two new controls beside the original room fields.
- A destination and label entered in WordPress survive saving and reloading.
- The visitor's link uses the saved destination and visible label.
- With an unset or empty destination, the link uses the configured contact fallback.
- Two Pages using the template can have different enquiry labels or destinations.
- Previously saved description, capacity, and size values remain connected after the template update.
- 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.
Hint 2: Bind both link parts
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
pnpm typecheck
pnpm forgewp export --validate --strictUpdate 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.