SkyArtShop/docs/CONTACT_EDITING_QUICK_REFERENCE.md

🚀 Quick Reference: Structured Contact Page Editing

Problem Solved ✅

Before: Rich text editor allowed users to type anything, breaking the beautiful layout
After: Structured fields ensure data updates without breaking layout

---

How to Edit Contact Page

1. Access Admin

Login → Navigate to /admin/pages.html

2. Edit Contact

Find "Contact" page → Click Edit button (pencil icon)

3. You'll See (Not a Rich Text Editor!)

📝 Header Section
   ├─ Title field
   └─ Subtitle field

📞 Contact Information
   ├─ Phone field
   ├─ Email field
   └─ Address field

🕐 Business Hours
   ├─ Time Slot 1 (Days + Hours)
   ├─ Time Slot 2 (Days + Hours)
   ├─ Time Slot 3 (Days + Hours)
   └─ [+ Add Time Slot button]

4. Make Changes

✏️ Click any field → Type new value → Save

5. Result

✅ Data updated on frontend
✅ Layout remains organized
✅ Gradient cards intact
✅ Icons in place
✅ Styling preserved

---

Common Tasks

Change Phone Number

1. Edit Contact page
2. Find "Phone Number" field
3. Type new number: +1 (555) 123-4567
4. Click "Save Page"
5. ✅ Done! Check /contact.html

Update Email

1. Edit Contact page
2. Find "Email Address" field
3. Type new email: info@skyartshop.com
4. Save
5. ✅ Email updated in pink card

Modify Address

1. Edit Contact page
2. Find "Physical Address" field
3. Type new address
4. Save
5. ✅ Address updated in blue card

Add Business Hours

1. Edit Contact page
2. Scroll to "Business Hours"
3. Click "+ Add Time Slot"
4. Enter Days: Holiday
5. Enter Hours: Closed
6. Save
7. ✅ New time slot appears

Remove Business Hours

1. Edit Contact page
2. Find time slot to delete
3. Click trash icon 🗑️
4. Save
5. ✅ Time slot removed

---

Layout Guarantee 🎨

No matter what you type, these stay perfect:

✅ Gradient Cards (purple, pink, blue, orange)
✅ Bootstrap Icons (phone, envelope, location)
✅ Grid Layout (3 columns, responsive)
✅ Rounded Corners (16px radius)
✅ Box Shadows (depth effect)
✅ Typography (fonts, sizes, colors)
✅ Business Hours Card (gradient background)

---

Why This Works

Structure (Fixed)

// This is in code, protected
<div class="gradient-card">
  <icon>
  <title>
  {YOUR_DATA_HERE}  ← Only this changes
</div>

Your Input (Variable)

Phone: +1 (555) 123-4567  ← You edit this

Result

<div class="purple-gradient-card">
  <i class="bi-telephone"></i>
  <h3>Phone</h3>
  <p>+1 (555) 123-4567</p>  ← Your data in perfect layout
</div>

---

Other Pages (About, Privacy)

These still use Rich Text Editor because:

• No fixed layout requirement
• Content structure varies
• Need full formatting control

Auto-Detected:

• Editing Contact → Structured fields
• Editing other pages → Quill editor

---

Testing

Quick Test

1. Visit /test-structured-fields.html
2. Follow step-by-step guide
3. See split-view comparison
4. Test editing live

Manual Test

1. Edit contact → Change phone to "555-999-8888"
2. Save
3. Visit /contact.html
4. ✅ New phone in purple card, layout perfect

---

Troubleshooting

"I don't see structured fields"

• Are you editing the Contact page specifically?
• Try refreshing the admin panel
• Check you're logged in as admin

"Changes not appearing"

• Hard refresh frontend (Ctrl+Shift+R)
• Check if you clicked "Save Page"
• Verify page is marked as "Published"

"Layout looks broken"

• This shouldn't happen with structured fields!
• If it does, run: node backend/restore-contact-layout.js
• Contact support

---

Database

Structure Stored As

{
  "header": { "title": "...", "subtitle": "..." },
  "contactInfo": { "phone": "...", "email": "...", "address": "..." },
  "businessHours": [
    { "days": "Monday - Friday", "hours": "9:00 AM - 6:00 PM" }
  ]
}

Location

Table: pages
Column: pagedata (JSONB)
Row: WHERE slug = 'contact'

---

Key Files

Frontend Admin

• website/admin/pages.html - Structured fields UI
• website/admin/js/pages.js - JavaScript logic

Backend

• backend/routes/admin.js - API endpoints
• backend/add-pagedata-column.js - Database setup

Testing

• website/public/test-structured-fields.html - Testing interface

Documentation

• docs/STRUCTURED_FIELDS_IMPLEMENTATION_SUMMARY.md - Full details
• docs/CONTACT_STRUCTURED_FIELDS_COMPLETE.md - Technical doc

---

Benefits Summary

User Benefits

✅ No HTML knowledge needed
✅ Can't break layout accidentally
✅ Simple form fields
✅ Visual organization

Developer Benefits

✅ Layout in one place
✅ Easy to modify template
✅ Structured queryable data
✅ Reusable pattern

Business Benefits

✅ Consistent branding
✅ Professional appearance
✅ Reduced support requests
✅ Faster updates

---

Remember

"Edit the data, not the layout!"

The structured fields ensure you can update contact information without worrying about breaking the beautiful design. The layout is protected in code—only your data changes.

---

Status: ✅ Production Ready
Last Updated: December 23, 2025
Version: 1.0