wiki-vault/Sources/Dev/pbs-membership-loe1-phase2-save-button.md

created	path	project	status	tags	type	updated
2026-04-06	Sources/Dev	pbs-membership-loe1-phase2-save-button	planned	pbs wordpress wprm wpcode javascript membership frontend	project-plan	2026-04-06

PBS Membership Platform — LOE 1 Phase 2: Save Button on WordPress

Context

This is Phase 2 of LOE 1 (Recipe Saving) in the PBS Membership Platform. Phase 1 built the backend API and database. Phase 2 builds the user-facing save button that lives on WordPress recipe pages and calls the Phase 1 API.

Related docs:

• pbs-membership-loe1-recipe-saving — Phase 1 backend foundation

---

Goal

Add a save button to WordPress recipe pages that lets Sunnies bookmark their favorite recipes with a single click. Logged-out visitors see the button as a signup funnel.

Estimated Time: 4-6 hours

---

Scope

In scope

• JavaScript widget injected via WPCode Lite
• Save button in two locations on recipe pages
• Logged-in and logged-out behaviors
• Visual feedback via Sunnie icon transformation
• Responsive bottom sheet / modal for signup prompt
• Integration with Phase 1 API endpoints

Out of scope

• Saved recipes listing page (Phase 3)
• Collections (Phase 4)
• Pinterest button decisions (deferred pending Jenny's input on traffic)
• Star ratings or other WPRM features

---

User Experience

Logged-in Sunnie

1. Lands on a recipe page
2. Sees heart icon in brand color (two locations)
3. On page load, JS calls /api/interactions/check — if already saved, heart shows as filled Sunnie
4. Clicks heart → calls POST /api/interactions → heart animates from outline to Sunnie
5. Clicks Sunnie → calls DELETE /api/interactions → Sunnie animates back to outline heart

Logged-out visitor

1. Lands on a recipe page
2. Sees heart icon (same as logged in)
3. Clicks heart → bottom sheet / modal slides up
4. Modal message: "Join the Sunnies to save your favorite recipes! Build your personal PBS cookbook — free to join."
5. Options: "Sign Up" (goes to Ultimate Member registration) or "Maybe Later" (dismisses, returns to recipe)

Key principle: Never hide the save button. It's a passive conversion funnel on every recipe page.

Technical Approach

Where the code lives

WPCode Lite snippet — single JavaScript + CSS file injected site-wide on recipe pages. No plugin dependency, no theme modification.

Detecting recipe pages

The snippet runs on all pages but only activates when it detects WPRM elements on the page. If no WPRM buttons exist, the script exits quietly.

Button injection

JavaScript targets WPRM's CSS classes to insert the save button into the existing button groups. TBD which specific selectors during implementation — depends on current WPRM markup.

Locations:

• Top of post — next to Jump to Recipe / Print Recipe
• Inside recipe card — next to Print / Pin buttons

Login detection

Client-side check for WordPress logged-in cookie (name includes wordpress_logged_in_). The JS doesn't validate the cookie — that's the API's job. It only needs to decide: show save action or show signup prompt.

API integration

All API calls go to pbs-hub endpoints from Phase 1:

• On load: GET /api/interactions/check?post_id={id}&action=save
• On save click: POST /api/interactions with {post_id, action: "save"}
• On unsave click: DELETE /api/interactions with {post_id, action: "save"}

The post ID comes from WordPress page context (wp_postmeta or a JS variable exposed by WordPress).

Visual design

Button states:

• Not saved → outlined heart in PBS brand color
• Saved → filled Sunnie icon (PBS already has this asset)
• Hover → subtle scale or bounce
• Transition → 200-300ms animation from heart to Sunnie

Animation ideas to experiment with:

• Heart shrinks → Sunnie blooms in its place
• Petal confetti burst
• Gentle rotation + scale

Keep animations fast and subtle. Final choice made during implementation testing.

Signup modal / bottom sheet

Responsive behavior:

• Desktop → centered modal dialog
• Mobile → bottom sheet sliding up from bottom

Same HTML/CSS, different positioning based on viewport. Pure CSS media queries, no framework.

Modal content:

• Sunnie icon
• Headline: "Save your favorites!"
• Body: "Join the Sunnies to build your personal PBS cookbook. Free to join."
• Primary button: "Sign Up" → Ultimate Member registration URL
• Secondary: "Maybe Later" → dismiss
• Close X in corner
• Tap outside to dismiss

Error handling

• API call fails → brief toast notification: "Couldn't save right now. Try again?"
• Network offline → same toast
• Auth expired → treat as logged out, show signup modal
• All errors logged to browser console for debugging

---

Phase 2 Checklist

• Review current WPRM markup on a live recipe page (identify CSS selectors)
• Export Sunnie icon as inline SVG for button use
• Write JavaScript for login detection
• Write JavaScript for button injection (both locations)
• Write JavaScript for API integration (check, save, unsave)
• Build heart-to-Sunnie animation (CSS/SVG)
• Build signup modal (HTML + CSS)
• Implement responsive bottom sheet behavior
• Write error handling and toast notifications
• Create WPCode Lite snippet with all code
• Test: logged-in save flow
• Test: logged-in unsave flow
• Test: logged-out modal flow
• Test: API error states
• Test: mobile responsiveness (Chrome DevTools + real phone)
• Test: does not break WPRM print or Pinterest buttons
• Get Jenny's eyes on the final look

---

Key Decisions Made

Decision	Choice	Rationale
Plugin vs custom	Custom JavaScript via WPCode Lite	Existing favorites
plugins store data in their own tables, not pbs-hub. Would create two
sources of truth and block the future AI layer.
Button locations	Both top of post AND inside recipe card	Catches
users wherever their eye lands. Reinforces the save action.
Logged-out visibility	Always show	Button becomes a passive conversion
funnel on every recipe page. Hiding it means logged-out users never
discover the feature.
Logged-out behavior	Modal / bottom sheet with signup prompt	Less
disruptive than direct redirect. Lets user make the choice without losing
their place on the recipe.
Mobile pattern	Responsive bottom sheet	Feels native on mobile where
most traffic comes from. Same code as desktop modal.
Visual feedback	Heart → Sunnie icon transformation	Brand moment on
every save. Reinforces Sunnies identity. Differentiates from generic recipe
sites.
Animation length	200-300ms max	Fast enough to feel snappy on repeat
use.
Pinterest button	Deferred	Awaiting Jenny's input on whether Pinterest
drives meaningful traffic.

---

Open Questions

• WPRM CSS selectors: Need to inspect current recipe page markup to identify exact classes/IDs for button containers
• Sunnie icon asset: Confirm Jenny has an SVG-ready version, or need to convert existing asset
• Post ID exposure: How does WordPress currently expose the post ID to JavaScript on the page? (Likely via wp_localize_script or a data attribute)
• Brand color hex: Exact brand color for the heart outline state
• Pinterest decision: Revisit with Jenny after checking Pinterest analytics

---

Next Step: Inspect a recipe page's HTML to identify WPRM CSS selectors and confirm button injection points

...sent from Jenny & Travis