📖 StayWithJay – Dynamic Reviews Implementation Guide

(Refer to attached screenshots on chatgpt throughout this guide for visual context of each step and current output.)

1. Custom Layouts for Reviews

We created Custom Layouts in Neve and scoped them to show only for the Reviews post type.
This ensures reviews render dynamically across the site without requiring manual content duplication.
Each layout can pull fields directly from Advanced Custom Fields (ACF) and display them inside block patterns.

✅ Working:

Layouts are applying correctly when Post Type = Reviews.
Different patterns (gradient hero block, light background version) are rendering reviews.

⚠️ Needs Simplification:

Currently requires manual JSON edits when tweaking colors or text styles.
Theme variables (e.g., var(--nv-site-bg)) are still overriding custom text colors in some cases — we fixed this by switching to hardcoded hex colors and adding "customColor":true.

2. Advanced Custom Fields (ACF) Setup

We have a Review Field Group with these key fields:

guestname
reviewenglish / reviewspanish
review_image
guest_country
staydate
nights
platform
reservation_code
listingid
internal_id

New additions made during this effort:

Dropdown in Review Form with direct links to all listings’ booking buttons.
Category field labeled “Listings” in ACF that stores all internal listing numbers.
- Goal: Call these listing IDs dynamically inside review templates for cross-linking (e.g., “Book the Coroa San Room”).

✅ Working:

All ACF fields are saving and rendering when called in layouts.
Dropdown for direct links has been added and is functional.

⚠️ Not Working Yet:

We don’t yet have dynamic linking between listingid or internal_id and the “Book Now” button. Currently, CTA buttons are manually set.
category: Listings exists, but isn’t yet dynamically feeding into layouts.

3. Block Patterns (Dark vs Light)

We created block patterns for reviews to control design. Two main versions:

Dark Gradient Layout:
- Background: pink → purple gradient (#EC3B69 → #230A41).
- Text forced to white (#FFFFFF).
- CTA button: gold (#FFCC00) or pink (#EC3B69).
Light Gradient Layout:
- Background: white → light-gray with soft StayWithJay pink accents at low opacity.
- Text: dark purple (#230A41) and gray (#333).
- CTA button: gold or pink.

✅ Working:

Both layouts render dynamically when swapped into Custom Layouts.
Light version now feels airy and branded (after fixing the earlier “too washed out” problem).

⚠️ Still Clunky:

Editing requires switching into Code Editor and manually adjusting JSON.
Color overrides can still break if theme variables sneak back in.

4. Dynamic Rendering

Reviews pull their content dynamically:

[acf field="guestname"] → Guest name.
[acf field="reviewenglish"] → Review text.
[acf field="review_image"] → Guest photo.
[acf field="guest_country"] → Guest’s country.
[acf field="staydate"] and [acf field="nights"] → Stay details.

✅ Working:

Guest details + review excerpts populate correctly.
Dynamic data is styled inside the layout patterns.

⚠️ Still Pending:

Dynamic linking from dropdown to listings (so reviews can point users to book the correct room).
Ability to auto-generate excerpts from long reviews without manual trimming.

5. Styling & Visual Distribution

Screenshots show multiple iterations where we refined the design:

Hero-style two-column layouts (review content on left, guest image on right).
Gradient backgrounds tuned for readability + branding.
Typography hierarchy:
- Guest name/review title = large bold heading (2em+).
- Review excerpt = medium readable body text (16–18px).
- Metadata (country, date, nights) = small and subtle.

✅ Looks Polished:

CTA buttons pop and guide users to booking pages.
Background gradients match StayWithJay’s identity.

⚠️ Next Level:

Could alternate layouts (left/right image flip) for visual rhythm across reviews.
Could introduce a star rating visual or icons to break up heavy text.

6. Next Steps for Web Dev Team

Finalize Dynamic Linking:
- Map listingid or internal_id → booking URLs (dropdown links).
- Automate CTA button so it pulls the correct link per review.
Simplify Editing:
- Explore making these review layouts saved reusable patterns instead of JSON edits.
- Ensure color overrides are permanent by baking them into block styles.
Enhance Design:
- Add star rating or icons for better scannability.
- Create alternating light/dark layouts for variety.
- Make review excerpts auto-truncate at set length.
Archive & Reuse System:
- Document this workflow as a template for future use with:
  - Testimonials.
  - Host stories.
  - Case studies.

7. What’s Working vs Not Working

✅ Working Now:

Custom Layout applies to Reviews post type.
ACF fields map dynamically into layouts.
Dark & light gradient backgrounds render properly.
Review excerpts + guest info show dynamically.
Dropdown with direct links to listings has been added.
Listings category exists in ACF with internal IDs.

⚠️ Not Working Yet:

Direct dynamic linking of reviews to booking buttons.
Dynamic use of “Listings” category in CTA buttons.
Simplified styling controls (still too reliant on raw JSON edits).

8. Conclusion

We now have a fully dynamic review system in place that is:

Branded,
Flexible,
Ready to expand to other post types.

The main development push ahead is to integrate listing IDs into CTA links so reviews automatically drive guests to the correct booking page.

This will complete the cycle: guest leaves review → review displays dynamically → review links directly back to booking → conversion funnel closed.

Author: Jay