395 lines
10 KiB
JavaScript
395 lines
10 KiB
JavaScript
// API Configuration
|
|
const API_BASE_URL = (function() {
|
|
if (typeof window !== 'undefined' && window.location && window.location.protocol.startsWith('http')) {
|
|
return `${window.location.protocol}//${window.location.host}/api`;
|
|
}
|
|
return 'http://localhost:5000/api';
|
|
})();
|
|
const TOKEN_KEY = 'authToken';
|
|
|
|
// Ensure auth methods are available globally for inline scripts
|
|
window.login = async function(email, password) {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
localStorage.setItem(TOKEN_KEY, data.token);
|
|
console.log('Login successful');
|
|
return data;
|
|
}
|
|
|
|
alert('Login failed: ' + (data.message || 'Unknown error'));
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
alert('Login error: ' + (error.message || 'Network or server issue.'));
|
|
return null;
|
|
}
|
|
};
|
|
|
|
window.register = async function(firstName, lastName, email, password, passwordConfirm) {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/auth/register`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ firstName, lastName, email, password, passwordConfirm }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
localStorage.setItem(TOKEN_KEY, data.token);
|
|
console.log('Registration successful');
|
|
return data;
|
|
}
|
|
|
|
alert('Registration failed: ' + (data.message || 'Unknown error'));
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Registration error:', error);
|
|
alert('Registration error: ' + (error.message || 'Network or server issue.'));
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// ============================================
|
|
// PRODUCT FUNCTIONS
|
|
// ============================================
|
|
|
|
function logout() {
|
|
localStorage.removeItem(TOKEN_KEY);
|
|
console.log('Logged out');
|
|
}
|
|
|
|
function isLoggedIn() {
|
|
return localStorage.getItem(TOKEN_KEY) !== null;
|
|
}
|
|
|
|
function getToken() {
|
|
return localStorage.getItem(TOKEN_KEY);
|
|
}
|
|
|
|
// ============================================
|
|
// PRODUCT FUNCTIONS
|
|
// ============================================
|
|
|
|
async function getAllProducts(category = null, sortBy = null, search = null, page = 1, limit = 10) {
|
|
try {
|
|
let url = `${API_BASE_URL}/products?page=${page}&limit=${limit}`;
|
|
if (category) url += `&category=${category}`;
|
|
if (sortBy) url += `&sortBy=${sortBy}`;
|
|
if (search) url += `&search=${search}`;
|
|
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error fetching products:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function getProductById(productId) {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/products/${productId}`);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.product;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error fetching product:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function getCategories() {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/products/categories`);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.categories;
|
|
}
|
|
return [];
|
|
} catch (error) {
|
|
console.error('Error fetching categories:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
async function getProductsByCategory(category) {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/products/category/${category}`);
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error fetching products by category:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CART FUNCTIONS
|
|
// ============================================
|
|
|
|
async function getCart() {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) {
|
|
console.log('User not logged in');
|
|
return null;
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error fetching cart:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function addToCart(productId, quantity) {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) {
|
|
alert('Please log in first');
|
|
return null;
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/add`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ productId, quantity }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
console.log('Added to cart:', data.message);
|
|
alert('Product added to cart!');
|
|
return data.cart;
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
return null;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding to cart:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function updateCartItem(productId, quantity) {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) return null;
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/update`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ productId, quantity }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error updating cart:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function removeFromCart(productId) {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) return null;
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/remove/${productId}`, {
|
|
method: 'DELETE',
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
console.log('Removed from cart');
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error removing from cart:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function clearCart() {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) return null;
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/clear`, {
|
|
method: 'DELETE',
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
console.log('Cart cleared');
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error clearing cart:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function applyDiscount(discountCode, discountAmount) {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) return null;
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/discount`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ discountCode, discountAmount }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error applying discount:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function applyShipping(shippingCost) {
|
|
try {
|
|
const token = getToken();
|
|
if (!token) return null;
|
|
|
|
const response = await fetch(`${API_BASE_URL}/cart/shipping`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ shippingCost }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
return data.cart;
|
|
}
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error applying shipping:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// DISPLAY FUNCTIONS
|
|
// ============================================
|
|
|
|
async function displayProducts(containerId, category = null) {
|
|
const data = await getAllProducts(category);
|
|
if (!data || !data.products) return;
|
|
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
data.products.forEach(product => {
|
|
const price = product.salePrice || product.price;
|
|
const html = `
|
|
<div class="product-card">
|
|
<img src="${product.image}" alt="${product.name}" class="product-image"/>
|
|
<h3>${product.name}</h3>
|
|
<p class="product-description">${product.description.substring(0, 100)}...</p>
|
|
<div class="product-price">
|
|
<span>$${price.toFixed(2)}</span>
|
|
</div>
|
|
<button onclick="addToCart('${product._id}', 1)" class="add-to-cart-btn">
|
|
Add to Cart
|
|
</button>
|
|
</div>
|
|
`;
|
|
container.innerHTML += html;
|
|
});
|
|
}
|
|
|
|
async function displayCart(containerId) {
|
|
const cart = await getCart();
|
|
if (!cart) {
|
|
document.getElementById(containerId).innerHTML = '<p>Please log in to view cart</p>';
|
|
return;
|
|
}
|
|
|
|
const container = document.getElementById(containerId);
|
|
container.innerHTML = '';
|
|
|
|
if (cart.items.length === 0) {
|
|
container.innerHTML = '<p>Cart is empty</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '<table class="cart-table"><tr><th>Product</th><th>Price</th><th>Quantity</th><th>Total</th><th>Action</th></tr>';
|
|
|
|
cart.items.forEach(item => {
|
|
const itemTotal = item.price * item.quantity;
|
|
html += `
|
|
<tr>
|
|
<td>${item.product.name || 'Product'}</td>
|
|
<td>$${item.price.toFixed(2)}</td>
|
|
<td><input type="number" value="${item.quantity}" onchange="updateCartItem('${item.product._id}', this.value)"/></td>
|
|
<td>$${itemTotal.toFixed(2)}</td>
|
|
<td><button onclick="removeFromCart('${item.product._id}')">Remove</button></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += '</table>';
|
|
html += `
|
|
<div class="cart-summary">
|
|
<p>Subtotal: $${cart.subtotal.toFixed(2)}</p>
|
|
<p>Tax (10%): $${cart.tax.toFixed(2)}</p>
|
|
<p>Shipping: $${cart.shippingCost.toFixed(2)}</p>
|
|
<p>Discount: -$${cart.discountAmount.toFixed(2)}</p>
|
|
<h3>Total: $${cart.total.toFixed(2)}</h3>
|
|
<button onclick="clearCart()" class="clear-cart-btn">Clear Cart</button>
|
|
<button onclick="checkout()" class="checkout-btn">Checkout</button>
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function checkout() {
|
|
alert('Proceeding to checkout...');
|
|
// Will be implemented in next sections
|
|
}
|