SkyArtShop/Sky_Art_shop/INTEGRATION_GUIDE.md

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:

<!-- 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:

<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>:

<!-- 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:

<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>:

<!-- 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:

<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>:

<!-- 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):

<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>:

<!-- 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):

<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:

<!-- 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):

   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:

// 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 2. Verify files in Admin/wwwroot/uploads/products/ 3. Open DevTools Network tab, check image URLs 4. Confirm product has mainImageUrl in database
"Unable to load products"	1. Backend not running (start with dotnet run --launch-profile https) 2. CORS issue (already fixed) 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

{
  "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

{
  "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. 🎉