Skip to content

made changes #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lamidev merged 1 commit into from
Nov 2, 2025
Merged

made changes #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions Client/public/product-share.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
<head>
<title>AFKiT Product Share</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Premium Product - AFKiT" />
<meta property="og:description" content="Buy high-quality products from AFKiT. Best prices with 6-month warranty." />
<meta property="og:image" content="https://afkit.ng/apple-touch-icon.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://afkit.ng" />
<meta property="og:type" content="product" />
<meta property="og:site_name" content="AFKiT" />

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Premium Product - AFKiT" />
<meta name="twitter:description" content="Buy high-quality products from AFKiT. Best prices with 6-month warranty." />
<meta name="twitter:image" content="https://afkit.ng/apple-touch-icon.png" />

<meta name="description" content="Buy high-quality products from AFKiT. Best prices with 6-month warranty." />

<script>
// Function to update meta tags with product data
function updateMetaTags(productData) {
if (!productData) return;

const title = `${productData.title} - AFKiT`;
const description = `Buy ${productData.title} for ₦${Number(productData.price).toLocaleString('en-NG')}`;
const imageUrl = getAbsoluteImageUrl(productData.images?.[0] || productData.image);
const currentUrl = window.location.href;

// Update meta tags
const metaTags = [
{ property: 'og:title', content: title },
{ property: 'og:description', content: description },
{ property: 'og:image', content: imageUrl },
{ property: 'og:url', content: currentUrl },
{ name: 'twitter:title', content: title },
{ name: 'twitter:description', content: description },
{ name: 'twitter:image', content: imageUrl },
{ name: 'description', content: description }
];

metaTags.forEach(tag => {
let element;
if (tag.property) {
element = document.querySelector(`meta[property="${tag.property}"]`);
} else {
element = document.querySelector(`meta[name="${tag.name}"]`);
}
if (element) {
element.content = tag.content;
}
});

// Update title
document.title = title;

// Update page content
if (document.getElementById('productTitle')) {
document.getElementById('productTitle').textContent = productData.title;
document.getElementById('productPrice').textContent = `₦${Number(productData.price).toLocaleString('en-NG')}`;
document.getElementById('productImage').src = imageUrl;
document.getElementById('productImage').alt = productData.title;
document.getElementById('productDescription').textContent = productData.description || `Buy ${productData.title} from AFKiT`;
}
}

function getAbsoluteImageUrl(imagePath) {
if (!imagePath) return "https://afkit.ng/apple-touch-icon.png";
if (imagePath.startsWith("http")) return imagePath;
if (imagePath.startsWith("/")) return `https://afkit.ng${imagePath}`;
return `https://afkit.ng/${imagePath}`;
}

// Get product ID from URL and fetch data
async function loadProductData() {
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('id');

if (!productId) {
redirectToHome();
return;
}

try {
// Try to fetch product data from your API
const response = await fetch(`https://afkit.ng/api/shop/products/get/${productId}`);
if (response.ok) {
const result = await response.json();
const productData = result.data || result;

if (productData && productData.title) {
updateMetaTags(productData);

// Set up redirect to actual product page
setTimeout(() => {
window.location.href = `https://afkit.ng/shop/product/${productId}`;
}, 2000);

return;
}
}
} catch (error) {
console.log('API fetch failed, using URL parameters');
}

// Fallback: Use data from URL parameters
const title = urlParams.get('title') || 'AFKiT Product';
const price = urlParams.get('price') || '0';
const image = urlParams.get('image') || '';
const description = urlParams.get('description') || 'Quality product from AFKiT';

const productData = {
title: decodeURIComponent(title),
price: parseInt(price),
image: image ? decodeURIComponent(image) : '',
description: decodeURIComponent(description)
};

updateMetaTags(productData);

// Redirect to product page
setTimeout(() => {
window.location.href = `https://afkit.ng/shop/product/${productId}`;
}, 2000);
}

function redirectToHome() {
setTimeout(() => {
window.location.href = 'https://afkit.ng';
}, 1000);
}

// Load product data when page loads
document.addEventListener('DOMContentLoaded', loadProductData);
</script>
</head>
<body>
<div style="text-align: center; padding: 50px; font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<img id="productImage" src="https://afkit.ng/apple-touch-icon.png" alt="AFKiT Product" style="max-width: 400px; height: auto; border-radius: 10px;">
<h1 id="productTitle" style="color: #1f2937; margin: 20px 0;">Loading Product...</h1>
<p id="productPrice" style="font-size: 28px; color: #059669; font-weight: bold; margin: 15px 0;">₦0</p>
<p id="productDescription" style="color: #6b7280; line-height: 1.6; margin: 20px 0;">
Please wait while we load the product details...
</p>
<div style="margin: 30px 0;">
<button onclick="window.location.href = 'https://afkit.ng'"
style="background: #2563eb; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; margin: 5px;">
Visit AFKiT Store
</button>
</div>
<p style="color: #9ca3af; font-size: 14px; margin-top: 30px;">
Redirecting to product page...
</p>
</div>
</body>
</html>
108 changes: 3 additions & 105 deletions Client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,3 @@
// import { Routes, Route, Navigate } from "react-router-dom";
// import AuthLayout from "./components/auth/layout";
// import AuthLogin from "./pages/auth/login";
// import AuthRegister from "./pages/auth/register";
// import AdminLayout from "./components/admin-view/layout";
// import AdminDashboard from "./pages/admin-view/dashboard";
// import AdminProducts from "./pages/admin-view/products";
// import ShoppingLayout from "./components/shopping-view/layout";
// import NotFound from "./pages/not-found";
// import ShoppingHome from "./pages/shopping-view/home";
// import ShoppingCheckout from "./pages/shopping-view/checkout";
// import CheckAuth from "./components/common/check-auth";
// import UnauthPage from "./pages/unauth-page";
// import { useSelector, useDispatch } from "react-redux";
// import { useEffect } from "react";
// import { checkAuth } from "./store/auth-slice";
// import ShoppingListing from "./pages/shopping-view/listing";
// import SearchProducts from "./pages/shopping-view/search";
// import EmailVerificationPage from "./pages/auth/email-verification";
// import ForgotPasswordPage from "./pages/auth/forgot-password";
// import ResetPasswordPage from "./pages/auth/reset-password";
// import AboutPage from "./pages/shopping-view/about";
// import LoadingSpinner from "./components/shopping-view/loading-spinner";
// import { Toaster } from "./components/ui/sonner";
// import ShoppingProductDetails from "./pages/shopping-view/product-details-page";
// import AuthListener from "./components/shopping-view/auth-listener";

// function App() {
// const { user, isAuthenticated, isLoading } = useSelector(
// (state) => state.auth
// );
// const dispatch = useDispatch();

// useEffect(() => {
// dispatch(checkAuth());
// }, [dispatch]);

// if (isLoading) return <LoadingSpinner />; // Replace Skeleton with LoadingSpinner

// return (
// <div className="flex flex-col overflow-hidden bg-white">
// <Toaster />
// <AuthListener />
// <Routes>
// {/* Redirect root to the shop home */}
// <Route path="/" element={<Navigate to="/shop/home" replace />} />

// {/* Auth Routes */}
// <Route path="/auth" element={<AuthLayout />}>
// <Route path="login" element={<AuthLogin />} />
// <Route path="register" element={<AuthRegister />} />
// <Route path="verify-email" element={<EmailVerificationPage />} />
// <Route path="forgot-password" element={<ForgotPasswordPage />} />
// <Route path="reset-password/:token" element={<ResetPasswordPage />} />
// </Route>

// {/* Admin Routes */}
// <Route
// path="/admin"
// element={
// <CheckAuth isAuthenticated={isAuthenticated} user={user}>
// <AdminLayout />
// </CheckAuth>
// }
// >
// <Route path="dashboard" element={<AdminDashboard />} />
// <Route path="products" element={<AdminProducts />} />
// </Route>

// {/* Shopping Routes (Public) */}
// <Route path="/shop" element={<ShoppingLayout />}>
// <Route path="home" element={<ShoppingHome />} />
// <Route path="listing" element={<ShoppingListing />} />
// <Route path="product/:id" element={<ShoppingProductDetails />} />
// <Route path="search" element={<SearchProducts />} />
// <Route path="about" element={<AboutPage />} />
// </Route>

// {/* Checkout requires authentication */}
// <Route
// path="/shop/checkout"
// element={
// <CheckAuth isAuthenticated={isAuthenticated} user={user}>
// <ShoppingCheckout />
// </CheckAuth>
// }
// />

// {/* Unauthenticated and Not Found Pages */}
// <Route path="/unauth-page" element={<UnauthPage />} />
// <Route path="*" element={<NotFound />} />
// </Routes>
// </div>
// );
// }

// export default App;


import { Routes, Route, Navigate } from "react-router-dom";
import AuthLayout from "./components/auth/layout";
import AuthLogin from "./pages/auth/login";
Expand All @@ -123,7 +24,6 @@ import LoadingSpinner from "./components/shopping-view/loading-spinner";
import { Toaster } from "./components/ui/sonner";
import ShoppingProductDetails from "./pages/shopping-view/product-details-page";
import AuthListener from "./components/shopping-view/auth-listener";
import ProductSharePage from "./components/shopping-view/product-share-page";

function App() {
const { user, isAuthenticated, isLoading } = useSelector(
Expand All @@ -135,7 +35,7 @@ function App() {
dispatch(checkAuth());
}, [dispatch]);

if (isLoading) return <LoadingSpinner />;
if (isLoading) return <LoadingSpinner />; // Replace Skeleton with LoadingSpinner

return (
<div className="flex flex-col overflow-hidden bg-white">
Expand Down Expand Up @@ -176,9 +76,6 @@ function App() {
<Route path="about" element={<AboutPage />} />
</Route>

{/* ADD THIS NEW ROUTE - Share page for social media */}
<Route path="/share/product/:id" element={<ProductSharePage />} />

{/* Checkout requires authentication */}
<Route
path="/shop/checkout"
Expand All @@ -197,4 +94,5 @@ function App() {
);
}

export default App;
export default App;

Loading