# Doctor Individual Page — Integration Notes

Open items and TODO list for the Drupal team. Each item identifies a placeholder, stub, or decision deferred from the static handover.

## Open items table

| # | Item | Status in static | Resolved in Drupal by |
|---|---|---|---|
| 1 | Doctor headshot | Placeholder copy of `doctor-lalit-verma.png` → `assets/images/doctor-mahipal-sachdev.png` | `field_doctor_photo` on `node--doctor`. Real Sachdev headshot pending from client |
| 2 | Specialization icons (×7) | All 7 are placeholder copies of the same image at `assets/images/doctor-individual/icon-{slug}.png` | `field_speciality_icon` on each `taxonomy_term--speciality`. Per-speciality icons pending from client |
| 3 | Award badge icon | Single shared SVG (`assets/images/doctor-individual/icon-award-badge.svg`) inlined into all 9 cards | Drupal can keep one shared icon, or add per-award `field_award_icon` if client wants variety |
| 4 | Specialization links | All `href="#"` in static | Wrap card with `<a href="{taxonomy_term--speciality.field_speciality_link}">` per row. Each speciality term should point to its `/speciality/<slug>` cluster page |
| 5 | Booking-form action URL | `action="#"` on `<form>`, all inputs have `id`+`name` attributes only | Webform `doctor-appointment` — POST endpoint `/webforms/doctor-appointment/submit` |
| 6 | Centre dropdown options | Static `<option>` list with 6 example centres (Delhi/NCR, Hyderabad, Bangalore, Vadodara, Chennai, Punjab) | Drupal pre-populates from `taxonomy_term--centre`. Optional: pre-filter to centres where this doctor practises (`node.field_practising_centres`) |
| 7 | Research items 2-column split | Static markup splits 16 items into 9 (left) and 7 (right) by hand | Single multivalue `field_research_designation`; Twig can split by `{% if loop.index <= total/2 %}` or use CSS `column-count: 2` on a single `<ul>` |
| 8 | Award card copy | Hard-coded Sachdev's 9 awards | Multivalue `field_awards` on `node--doctor` |
| 9 | Hero name + subtitle + experience | Hard-coded Sachdev | Render from `node.title`, `field_qualifications_summary`, `field_years_of_experience`, `field_primary_location` |
| 10 | Qualification + Experience bullets | Hard-coded Sachdev's items | Multivalue `field_qualifications` and `field_experience` |
| 11 | Active nav link | Static — "Find an eye specialist" highlighted (inherited from blogs.html) | Per-route active nav. The doctor profile page IS reached from "Find an eye specialist" so this default is correct, but Drupal's active-trail computation should override anyway |

## Hooking up the doctor cluster

The "Book An Appointment" button on each doctor card in `eye-specialists.html` (and the doctor-cards section of `index.html` and `cataract.html`) currently has `href="#"`. In Drupal, this should be replaced with the doctor's profile URL.

**Decision deferred to client:** should the existing yellow "Book An Appointment" button on the cluster card go directly to:

- (a) the booking sidebar — link to `/doctor/<slug>#booking` — so clicking the CTA scrolls straight to the appointment form on the profile page, or
- (b) the doctor profile — link to `/doctor/<slug>` — so the user lands on the top of the profile page and decides whether to read the credentials or book

Option (a) preserves the "click → book" momentum from the cluster card. Option (b) gives the user space to qualify the doctor before booking. The Figma design didn't specify which.

If the cluster cards add a separate "View profile" link in a future iteration, then the existing yellow button should go to `#booking` (option a) and the new link should go to the bare URL (option b).

## Drupal templates summary

Listed in `doctor-individual-drupal-mapping.md`. Brief recap:

- `node--doctor--full.html.twig`
- `views-view-row--doctor-specializations.html.twig`
- `views-view-row--doctor-qualifications.html.twig`
- `views-view-row--doctor-experience.html.twig`
- `views-view-row--doctor-research.html.twig`
- `views-view-row--doctor-awards.html.twig`
- `webform--doctor-appointment.html.twig`

## URL alias pattern

`/doctor/[node:title]` — or use a dedicated `field_slug` (text) on `node--doctor` if the doctor name should be normalized to a clean URL (e.g. "Prof. Dr. Mahipal S Sachdev" → `prof-dr-mahipal-s-sachdev` via Pathauto).

The breadcrumb's "Doctor" intermediate crumb links to `/eye-specialists` (the cluster page). Confirm this is the desired parent URL.

## Schema / SEO

This page is a high-value SERP target. Consider adding `schema.org/Physician` structured data via the Drupal Metatag module:

```json
{
  "@context": "https://schema.org",
  "@type": "Physician",
  "name": "{node.title}",
  "image": "{absolute URL of field_doctor_photo}",
  "description": "{field_qualifications_summary}",
  "medicalSpecialty": "{field_specializations -> term names, joined}",
  "yearsOfPractice": "{field_years_of_experience}",
  "memberOf": {
    "@type": "MedicalOrganization",
    "name": "Centre for Sight"
  }
}
```

Configure via Drupal Metatag's `Schema.org` submodule on the `node--doctor` content type.

## Accessibility / a11y notes

- Map-pin SVG in hero has `aria-hidden="true"` — location is announced via the adjacent "Delhi" text.
- Specialization card images have `alt=""` — name is in the adjacent `<span>` so the icon is decorative.
- Award badge SVGs have `alt=""` — same reason; award text is the meaningful content.
- Booking form inputs have visible `<label>` text via wrapping `<label>` element.
- Carousel arrows have `aria-label="Previous award"` / `"Next award"`.
- All anchor jumplinks behave as expected with screen readers (native HTML `<a href="#section-id">`).
- Console issue: form fields are missing `autocomplete` attributes on the booking sidebar (Patient Name, Patient Contact, Patient E-Mail). Consider adding `autocomplete="name"`, `autocomplete="tel"`, `autocomplete="email"` for browser autofill UX.

## Testing checklist for Drupal handoff

- [ ] Render `/doctor/<slug>` with full content for at least 3 different doctors
- [ ] Verify Specializations grid handles odd/even card counts (1, 2, 5, 7, 8 specialties)
- [ ] Verify Awards carousel handles short lists (1, 2, 3 awards) — should not break layout if fewer cards
- [ ] Verify booking form submission lands as expected webform submission
- [ ] Verify breadcrumb back-link to `/eye-specialists` works
- [ ] Verify mobile sticky bar's "Book Appointment" CTA opens the booking modal/anchor (existing behavior, should already work)
- [ ] Verify hero photo image style crops top-anchored (face stays in frame)
- [ ] Verify `[node:title]` URL alias generates clean slug for doctors with periods, ampersands, etc.