Fix admin route access and backend configuration
- Added /admin redirect to login page in nginx config - Fixed backend server.js route ordering for proper admin handling - Updated authentication middleware and routes - Added user management routes - Configured PostgreSQL integration - Updated environment configuration
This commit is contained in:
Local Server
327
Sky_Art_shop/INTEGRATION_GUIDE.md
Normal file
327
Sky_Art_shop/INTEGRATION_GUIDE.md
Normal file
@@ -0,0 +1,327 @@
|
||||
# Sky Art Shop - Admin CMS Integration Guide
|
||||
|
||||
## ✅ What's Been Set Up
|
||||
|
||||
Your Admin backend (ASP.NET Core + MongoDB) now exposes public read-only APIs for your static website:
|
||||
|
||||
- **Backend URL**: <https://localhost:5001> (or <http://localhost:5000>)
|
||||
- **CORS Enabled**: Static files can call the API from `file://` URLs
|
||||
- **Image Serving**: `/uploads/products/`, `/uploads/projects/`, `/uploads/blog/`
|
||||
|
||||
### Available API Endpoints
|
||||
|
||||
| Endpoint | Description | Example |
|
||||
|----------|-------------|---------|
|
||||
| `GET /api/products` | All products | Returns array of products with images, prices, descriptions |
|
||||
| `GET /api/products/{id}` | Single product | Get one product by ID |
|
||||
| `GET /api/projects` | Portfolio projects | Returns array of projects with images |
|
||||
| `GET /api/projects/{id}` | Single project | Get one project by ID |
|
||||
| `GET /api/blog` | Blog posts | Returns array of posts with featured images |
|
||||
| `GET /api/blog/{id}` | Single post | Get one post by ID |
|
||||
| `GET /api/pages/{slug}` | Page by slug | Get page content (e.g., "about", "contact") |
|
||||
| `GET /api/categories` | Categories | All portfolio categories |
|
||||
| `GET /api/settings` | Site settings | Global site configuration |
|
||||
|
||||
---
|
||||
|
||||
## 📦 Integration Files Created
|
||||
|
||||
All integration code has been created in your `Sky_Art_Shop` folder:
|
||||
|
||||
```
|
||||
Sky_Art_Shop/
|
||||
├── js/
|
||||
│ ├── api-integration.js # Core API functions (load this first!)
|
||||
│ ├── shop-page.js # For shop.html
|
||||
│ ├── portfolio-page.js # For portfolio.html
|
||||
│ ├── blog-page.js # For blog.html
|
||||
│ ├── index-page.js # For index.html
|
||||
│ └── about-page.js # For about.html
|
||||
└── css/
|
||||
└── api-styles.css # Styling for product/project/blog cards
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 How to Integrate Each Page
|
||||
|
||||
### 1. **shop.html** (Products Page)
|
||||
|
||||
Add these lines **before the closing `</body>` tag**:
|
||||
|
||||
```html
|
||||
<!-- API Integration -->
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/shop-page.js"></script>
|
||||
```
|
||||
|
||||
**In your HTML body**, add a container where products will render:
|
||||
|
||||
```html
|
||||
<section class="products-section">
|
||||
<h2>Our Products</h2>
|
||||
<div id="productsContainer" class="products-grid">
|
||||
<p class="loading">Loading products</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. **portfolio.html** (Projects Page)
|
||||
|
||||
Add before `</body>`:
|
||||
|
||||
```html
|
||||
<!-- API Integration -->
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/portfolio-page.js"></script>
|
||||
```
|
||||
|
||||
Add container:
|
||||
|
||||
```html
|
||||
<section class="portfolio-section">
|
||||
<h2>Our Portfolio</h2>
|
||||
<div id="projectsContainer" class="projects-grid">
|
||||
<p class="loading">Loading projects</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. **blog.html** (Blog Page)
|
||||
|
||||
Add before `</body>`:
|
||||
|
||||
```html
|
||||
<!-- API Integration -->
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/blog-page.js"></script>
|
||||
```
|
||||
|
||||
Add container:
|
||||
|
||||
```html
|
||||
<section class="blog-section">
|
||||
<h2>Latest Blog Posts</h2>
|
||||
<div id="blogContainer" class="blog-grid">
|
||||
<p class="loading">Loading posts</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. **index.html** (Home Page)
|
||||
|
||||
Add before `</body>`:
|
||||
|
||||
```html
|
||||
<!-- API Integration -->
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/index-page.js"></script>
|
||||
```
|
||||
|
||||
Add containers for featured content (optional):
|
||||
|
||||
```html
|
||||
<section class="featured-products">
|
||||
<h2>Featured Products</h2>
|
||||
<div id="featuredProducts" class="products-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="recent-projects">
|
||||
<h2>Recent Projects</h2>
|
||||
<div id="recentProjects" class="projects-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="recent-blog">
|
||||
<h2>Latest Posts</h2>
|
||||
<div id="recentBlog" class="blog-grid"></div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. **about.html** (About Page)
|
||||
|
||||
Add before `</body>`:
|
||||
|
||||
```html
|
||||
<!-- API Integration -->
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/about-page.js"></script>
|
||||
```
|
||||
|
||||
**Option A**: Load dynamic CMS content (if you create an "about" page in admin):
|
||||
|
||||
```html
|
||||
<section class="about-section">
|
||||
<div id="pageContent">
|
||||
<p class="loading">Loading content</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Option B**: Keep your static content and just load settings for site name, etc.
|
||||
|
||||
---
|
||||
|
||||
### 6. **contact.html** (Contact Page)
|
||||
|
||||
For contact forms, you typically keep static content. Optionally load settings:
|
||||
|
||||
```html
|
||||
<!-- API Integration (optional) -->
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
const settings = await loadSettings();
|
||||
// Use settings.contactEmail, settings.phone, etc. if you want
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Customizing the Look
|
||||
|
||||
The `css/api-styles.css` file contains complete styling for:
|
||||
|
||||
- Product cards (`.product-card`)
|
||||
- Project cards (`.project-card`)
|
||||
- Blog cards (`.blog-card`)
|
||||
- Grids (`.products-grid`, `.projects-grid`, `.blog-grid`)
|
||||
|
||||
**To match your existing design:**
|
||||
|
||||
1. Open `css/api-styles.css`
|
||||
2. Adjust colors, fonts, spacing to match your site
|
||||
3. Or copy the card styles into your existing stylesheet
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Testing
|
||||
|
||||
1. **Start the backend** (if not already running):
|
||||
|
||||
```powershell
|
||||
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
|
||||
dotnet run --launch-profile https
|
||||
```
|
||||
|
||||
2. **Open your static site**:
|
||||
- `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/index.html`
|
||||
- `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/shop.html`
|
||||
- etc.
|
||||
|
||||
3. **Check browser console** (F12):
|
||||
- Should see: `"Loaded products: X"`, `"Loaded projects: Y"`, etc.
|
||||
- If you see CORS errors, they should resolve automatically (CORS is enabled)
|
||||
- If API fails, make sure backend is running on <https://localhost:5001>
|
||||
|
||||
4. **Verify images appear**:
|
||||
- Images should load from `https://localhost:5001/uploads/products/<filename>`
|
||||
- Check Network tab to see image requests
|
||||
|
||||
---
|
||||
|
||||
## 🔄 How It Works
|
||||
|
||||
When a user visits your static site:
|
||||
|
||||
1. Browser loads the HTML page
|
||||
2. JavaScript calls the Admin backend API (e.g., `/api/products`)
|
||||
3. API queries MongoDB and returns JSON data
|
||||
4. JavaScript renders the data into HTML cards with images
|
||||
5. Images are served from `wwwroot/uploads/` via the backend
|
||||
|
||||
**When you edit content in Admin:**
|
||||
|
||||
- Add/edit/delete products, projects, or blog posts
|
||||
- Upload images
|
||||
- Changes appear immediately when users refresh the static pages
|
||||
|
||||
---
|
||||
|
||||
## 📝 Advanced: Custom Rendering
|
||||
|
||||
If you want custom HTML for products, edit `js/api-integration.js`:
|
||||
|
||||
```javascript
|
||||
// In loadProducts() function, customize the template string:
|
||||
return `
|
||||
<article class="product-card">
|
||||
<img src="${imgSrc}" alt="${product.title}">
|
||||
<h3>${product.title}</h3>
|
||||
<p>${product.description}</p>
|
||||
<p class="price">${price}</p>
|
||||
<button onclick="addToCart('${product.id}')">Add to Cart</button>
|
||||
</article>`;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| **Images not showing** | 1. Check backend is running<br>2. Verify files in `Admin/wwwroot/uploads/products/`<br>3. Open DevTools Network tab, check image URLs<br>4. Confirm product has `mainImageUrl` in database |
|
||||
| **"Unable to load products"** | 1. Backend not running (start with `dotnet run --launch-profile https`)<br>2. CORS issue (already fixed)<br>3. Check console for specific error |
|
||||
| **Products show but no images** | Products in database missing `mainImageUrl`. Edit product in admin and upload image. |
|
||||
| **Blank page** | Check console (F12) for JavaScript errors. Ensure `api-integration.js` loads first. |
|
||||
| **Mixed content warning** | If static site is on `https://` but API is `http://`, change `API_BASE` in `api-integration.js` to `https://localhost:5001` |
|
||||
|
||||
---
|
||||
|
||||
## 📧 API Response Examples
|
||||
|
||||
### Product Response
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "123abc",
|
||||
"title": "Sky Painting",
|
||||
"description": "Beautiful artwork...",
|
||||
"price": 299.99,
|
||||
"mainImageUrl": "/uploads/products/abc123.jpg",
|
||||
"images": ["/uploads/products/abc123.jpg", "/uploads/products/xyz456.jpg"],
|
||||
"category": "Paintings"
|
||||
}
|
||||
```
|
||||
|
||||
### Project Response
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "456def",
|
||||
"title": "Mural Project",
|
||||
"shortDescription": "City mural...",
|
||||
"coverImageUrl": "/uploads/projects/mural.jpg",
|
||||
"images": ["/uploads/projects/mural.jpg"],
|
||||
"category": "Murals"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Next Steps
|
||||
|
||||
1. **Add script tags** to each HTML page as shown above
|
||||
2. **Add container divs** with the correct IDs
|
||||
3. **Refresh pages** and check console for "Loaded X items"
|
||||
4. **Customize styles** in `api-styles.css` to match your design
|
||||
5. **Test editing** content in Admin and seeing changes on static site
|
||||
|
||||
**Questions or issues?** Check the console first, then refer to the Troubleshooting section above.
|
||||
|
||||
---
|
||||
|
||||
**That's it!** Your static site is now powered by the Admin CMS. Any content changes you make in the admin will instantly reflect on the static pages when users refresh. 🎉
|
||||
Reference in New Issue
Block a user