294 lines
5.3 KiB
Markdown
294 lines
5.3 KiB
Markdown
# 🚀 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)
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```html
|
|
<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
|
|
|
|
```json
|
|
{
|
|
"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
|