SkyArtShop/docs/CUSTOM_PAGES_QUICK_REFERENCE.md

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