updateweb
This commit is contained in:
Local Server
293
docs/CONTACT_EDITING_QUICK_REFERENCE.md
Normal file
293
docs/CONTACT_EDITING_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,293 @@
|
||||
# 🚀 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
|
||||
Reference in New Issue
Block a user