195 lines
4.7 KiB
Markdown
195 lines
4.7 KiB
Markdown
# Custom Pages - Quick Reference Guide
|
|
|
|
## 🎯 Accessing the System
|
|
|
|
### Admin Panel
|
|
|
|
**URL**: <http://localhost:5000/admin/pages.html>
|
|
**Login Required**: Yes (use admin credentials)
|
|
|
|
### Frontend Pages
|
|
|
|
- **About**: <http://localhost:5000/about.html>
|
|
- **Contact**: <http://localhost:5000/contact.html>
|
|
- **Privacy**: <http://localhost:5000/privacy.html>
|
|
- **Dynamic**: <http://localhost:5000/page.html?slug=YOUR-SLUG>
|
|
|
|
## ✏️ How to Edit Pages
|
|
|
|
### Step 1: Access Admin Panel
|
|
|
|
1. Navigate to `/admin/pages.html`
|
|
2. Login if prompted
|
|
3. You'll see a list of all custom pages
|
|
|
|
### Step 2: Edit a Page
|
|
|
|
1. Find the page you want to edit (About, Contact, or Privacy)
|
|
2. Click the **pencil icon** (Edit button)
|
|
3. Modal opens with page details loaded
|
|
|
|
### Step 3: Make Changes
|
|
|
|
Use the rich text editor to format content:
|
|
|
|
- **Headings**: H1-H6 dropdown
|
|
- **Bold/Italic**: Click B or I buttons
|
|
- **Lists**: Bullet or numbered
|
|
- **Colors**: Text and background
|
|
- **Links**: Insert hyperlinks
|
|
- **Images**: Add images (optional)
|
|
|
|
### Step 4: Save Changes
|
|
|
|
1. Review your changes
|
|
2. Toggle "Published" if needed
|
|
3. Click **"Save Page"**
|
|
4. Changes are immediately saved
|
|
|
|
### Step 5: View Changes
|
|
|
|
1. Open the frontend page (e.g., `/about.html`)
|
|
2. Refresh browser to see updates
|
|
3. Content loads from database
|
|
|
|
## 📋 Current Pages
|
|
|
|
### About Us (page-about)
|
|
|
|
- **Slug**: `about`
|
|
- **Frontend**: `/about.html`
|
|
- **Sections**: Our Story, What We Offer, Why Choose Us
|
|
|
|
### Contact (page-contact)
|
|
|
|
- **Slug**: `contact`
|
|
- **Frontend**: `/contact.html`
|
|
- **Sections**: Contact Info, Business Hours
|
|
- **Note**: Preserves contact form below content
|
|
|
|
### Privacy Policy (page-privacy)
|
|
|
|
- **Slug**: `privacy`
|
|
- **Frontend**: `/privacy.html`
|
|
- **Sections**: Full privacy policy with 6 main sections
|
|
|
|
## 🛠️ Common Tasks
|
|
|
|
### Update About Page Content
|
|
|
|
1. Admin Panel → Click edit on "About Us"
|
|
2. Modify text in editor
|
|
3. Save → Refresh `/about.html`
|
|
|
|
### Change Contact Information
|
|
|
|
1. Admin Panel → Click edit on "Contact"
|
|
2. Update phone, email, or address
|
|
3. Save → Refresh `/contact.html`
|
|
|
|
### Update Privacy Policy
|
|
|
|
1. Admin Panel → Click edit on "Privacy Policy"
|
|
2. Add/modify policy sections
|
|
3. Save → Refresh `/privacy.html`
|
|
|
|
### Create New Page
|
|
|
|
1. Admin Panel → Click "Create New Page"
|
|
2. Enter title (e.g., "Shipping Policy")
|
|
3. Slug auto-generates (e.g., "shipping-policy")
|
|
4. Add content with editor
|
|
5. Save → Access at `/page.html?slug=shipping-policy`
|
|
|
|
## 🎨 Formatting Tips
|
|
|
|
### Headers for Structure
|
|
|
|
```
|
|
H2 for main sections (Our Story, Contact Information)
|
|
H3 for subsections (Phone, Email, Location)
|
|
```
|
|
|
|
### Lists for Items
|
|
|
|
- Use bullet lists for features or contact methods
|
|
- Use numbered lists for steps or procedures
|
|
|
|
### Links for Actions
|
|
|
|
- Make phone numbers clickable: `tel:+1234567890`
|
|
- Make emails clickable: `mailto:email@example.com`
|
|
|
|
### Bold for Emphasis
|
|
|
|
- Use **bold** for important information
|
|
- Highlight key contact details
|
|
|
|
## ⚠️ Important Notes
|
|
|
|
1. **Always Save**: Changes aren't applied until you click "Save Page"
|
|
|
|
2. **Published Status**: Uncheck "Published" to hide page from frontend
|
|
|
|
3. **Slug is URL**: The slug becomes the page URL
|
|
- Example: slug `about` → `/about.html` or `/page.html?slug=about`
|
|
|
|
4. **Test After Editing**: Always check the frontend page after saving
|
|
|
|
5. **SEO Fields**: Fill in Meta Title and Meta Description for better SEO
|
|
|
|
## 🔍 Troubleshooting
|
|
|
|
### Edit Button Not Working
|
|
|
|
- ✅ **Fixed**: ID escaping issue resolved
|
|
- Ensure you're logged in as admin
|
|
- Check browser console for errors
|
|
|
|
### Content Not Updating
|
|
|
|
1. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)
|
|
2. Clear browser cache
|
|
3. Check if page is marked as "Published"
|
|
|
|
### Page Not Loading
|
|
|
|
- Verify slug matches exactly (case-sensitive)
|
|
- Check if page is active in database
|
|
- Ensure API routes are working: `/api/pages/{slug}`
|
|
|
|
## 📊 Database Fields
|
|
|
|
Each page has:
|
|
|
|
- **id**: Unique identifier (e.g., "page-about")
|
|
- **title**: Display title ("About Us")
|
|
- **slug**: URL path ("about")
|
|
- **content**: Delta format for editor (JSON)
|
|
- **pagecontent**: HTML for frontend display
|
|
- **metatitle**: SEO title
|
|
- **metadescription**: SEO description
|
|
- **ispublished**: Visible on frontend (true/false)
|
|
- **isactive**: Active status (true/false)
|
|
|
|
## 🚀 Quick Links
|
|
|
|
- **Admin Pages**: /admin/pages.html
|
|
- **Test Interface**: /test-custom-pages.html
|
|
- **About**: /about.html
|
|
- **Contact**: /contact.html
|
|
- **Privacy**: /privacy.html
|
|
|
|
## 💾 Backup Reminder
|
|
|
|
Before making major changes:
|
|
|
|
1. Test in development first
|
|
2. Keep backup of important content
|
|
3. Use draft mode (unpublish) to test changes
|
|
4. Can always edit again if needed
|
|
|
|
---
|
|
|
|
**Need Help?** Check the detailed documentation at `/docs/CUSTOM_PAGES_INTEGRATION_COMPLETE.md`
|