# 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. 🎉