File Manager

Editing: product.php

<?php
 
// Include the database connection
require_once 'security.php';
require_once 'functions.php';

$host = "127.0.0.1:3306"; 
$username = "u404542307_dacotywebsites"; 
$password = "daCotywebs1te5"; 
$database = "u404542307_eizon";

try {
    // Establish database connection
    $pdo = new PDO("mysql:host=$host;dbname=$database", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Could not connect to the database: " . $e->getMessage());
}

// Get the product ID from the query string
if (isset($_GET['card_id'])) {
    $cardId = intval($_GET['card_id']);
} else {
    die("Product ID not specified.");
}

// Fetch product details from the database
$stmt = $pdo->prepare("SELECT * FROM cards WHERE card_id = :card_id");
$stmt->bindParam(':card_id', $cardId, PDO::PARAM_INT);
$stmt->execute();
$product = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$product) {
    die("Product not found.");
}

$countryCode = $product['country_code'];
$phoneNumber = $product['contacts'];
$fullPhoneNumber = $countryCode . $phoneNumber;

// Set Open Graph (OG) tags for the product
$ogTitle = htmlspecialchars($product['name']);
$ogDescription = htmlspecialchars($product['description']);
$ogImage = 'https://www.eizononline.com/' . $product['image1']; // Full URL to the product image
$ogUrl = 'https://www.eizononline.com/product.php?card_id=' . $cardId;

// Replace spaces with hyphens in the category for the URL
$category = str_replace(' ', '-', $product['category']); // Replace spaces with hyphens
$categoryDisplay = htmlspecialchars($product['category']); // Sanitize for display

// Prepare images array for structured data
$images = [];
if (!empty($product['image1'])) $images[] = 'https://www.eizononline.com/' . $product['image1'];
if (!empty($product['image2'])) $images[] = 'https://www.eizononline.com/' . $product['image2'];
if (!empty($product['image3'])) $images[] = 'https://www.eizononline.com/' . $product['image3'];

// Determine brand from product name
$knownBrands = ['Samsung', 'Apple', 'Huawei', 'Sony', 'Dell', 'HP', 'Canon']; // Extend as needed
$brandFound = 'Generic';
foreach ($knownBrands as $brand) {
    if (stripos($product['name'], $brand) !== false) {
        $brandFound = $brand;
        break;
    }
}

// Product URL
$productUrl = 'https://www.eizononline.com/product.php?card_id=' . $product['card_id'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $ogTitle ?> - Product Details</title>
     <meta name="description" content="<?= htmlspecialchars($product['description']) ?>">
    <meta name="keywords" content="<?= htmlspecialchars($product['name']) ?>, EIZON, Tanzania,sell, buy <?= htmlspecialchars($product['name']) ?>">
    
    <meta property="og:title" content="<?= $ogTitle ?>">
    <meta property="og:description" content="<?= $ogDescription ?>">
    <meta property="og:image" content="<?= $ogImage ?>">
    <meta property="og:url" content="<?= $ogUrl ?>">
    <meta property="og:type" content="product">
    
     
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "<?= htmlspecialchars($product['name']) ?>",
      "image": [
        <?= '"' . implode('","', $images) . '"' ?>
      ],
      "description": "<?= htmlspecialchars($product['description']) ?>",
      "brand": {
        "@type": "Brand",
        "name": "<?= $brandFound ?>"
      },
      "offers": {
        "@type": "Offer",
        "url": "<?= $productUrl ?>",
        "priceCurrency": "TZS",
        "price": "<?= $product['price'] ?>",
        "availability": "https://schema.org/InStock"
      }
    }
    </script>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 10% auto 0 0;
            padding: 20px;
        }
        .product-details {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }
        .carousel {
            position: relative;
            max-width: 100%;
            margin: 0 auto 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .carousel img {
            max-width: 100%;
            max-height: 400px; /* Set a max height for images */
            width: auto;
            height: auto;
            object-fit: contain; /* Ensure the image scales proportionally */
            border-radius: 10px;
            display: none; /* Hide all images by default */
        }
        .carousel img.active {
            display: block; /* Show the active image */
        }
        .thumbnails {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        .thumbnails img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 5px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.3s ease;
        }
        .thumbnails img.active {
            border-color: #24e037;
        }
        .product-title {
            font-size: 2rem;
            margin: 0 0 10px;
            color: #333;
        }
        .product-price {
            font-size: 1.5rem;
            color: #e67e22;
            margin: 0 0 20px;
        }
        
        .product-location {
            font-size: 1.4rem;
            color: green;
            margin: 0 0 20px;
        }
        .product-description {
            font-size: 1rem;
            line-height: 1.6;
            color: #666;
            margin: 0 0 20px;
        }
        .back-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #24e037;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .back-button:hover {
            background-color: orange;
        }
        @media (max-width: 768px) {
            .product-title {
                font-size: 1.5rem;
            }
            .product-price {
                font-size: 1.2rem;
            }
            
             .product-location {
                font-size: 1rem;
            }
            .product-description {
                font-size: 0.9rem;
            }
            .carousel img {
                max-height: 300px; /* Adjust max height for smaller screens */
            }
            .thumbnails img {
                width: 40px;
                height: 40px;
            }
        }
        
         /* Contact Seller Button Styles */
    .contact-seller-btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: orange; /* Green color */
        color: #fff; /* White text */
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 10px; /* Add spacing above the button */
        margin-bottom: 5px;
    }

.contact-seller-btn:hover {
        background-color: red;  
    }
    
    </style>
      <link rel="stylesheet" href="e-commerce.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> 
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    
    <?php include 'header.php'; ?> 
    <div class="container">
        <div class="product-details">
            
            <div class="carousel">
                <?php if (!empty($product['image1'])): ?>
                    <img src="<?= $product['image1'] ?>" alt="Image 1" class="active">
                <?php endif; ?>
                <?php if (!empty($product['image2'])): ?>
                    <img src="<?= $product['image2'] ?>" alt="Image 2">
                <?php endif; ?>
                <?php if (!empty($product['image3'])): ?>
                    <img src="<?= $product['image3'] ?>" alt="Image 3">
                <?php endif; ?>
            </div>

<div class="thumbnails">
                <?php if (!empty($product['image1'])): ?>
                    <img src="<?= $product['image1'] ?>" alt="Thumbnail 1" onclick="showImage(0)" class="active">
                <?php endif; ?>
                <?php if (!empty($product['image2'])): ?>
                    <img src="<?= $product['image2'] ?>" alt="Thumbnail 2" onclick="showImage(1)">
                <?php endif; ?>
                <?php if (!empty($product['image3'])): ?>
                    <img src="<?= $product['image3'] ?>" alt="Thumbnail 3" onclick="showImage(2)">
                <?php endif; ?>
            </div>

<h1 class="product-title"><?= $ogTitle ?></h1>

<p class="product-price">Price: <?= number_format($product['price'], 2) ?> Tsh</p>
            
            <p class="product-location">Location: <?= $product['region'] ?> </p>

<p class="product-description"><?= $ogDescription ?></p>
            
       <button class="contact-seller-btn" onclick="window.open('https://wa.me/<?= htmlspecialchars($fullPhoneNumber) ?>?text=Habari!%20I%20am%20interested%20in%20your%20product%20<?= urlencode($product['name']) ?>%20on%20eizon:%20<?= urlencode('https://www.eizononline.com/product.php?card_id=' . $product['card_id']) ?>', '_blank');">
    Contact Seller
</button>
           
 
<a href="https://www.eizononline.com/products/<?= $category ?>" class="back-button">
    See all <?= $categoryDisplay ?>
</a>
        </div>
    </div>
    
      <footer>
        <div class="socialmediaicons">
            <hr>
            <div class="socials">
                <a href="https://www.instagram.com/eizononline">
                    <i class="fa-brands fa-square-instagram"></i>
                </a>
                <a href=" https://x.com/daCotyINDUSTRY?t=S8dPyqv7g8JiKjWufrcgBQ&s=09">
                    <i class="fa-brands fa-square-x-twitter"></i>
                </a>
                <a href="https://chat.whatsapp.com/BjYHA7zTwzN0EA0cdZJnzd">
                    <i class="fa-brands fa-square-whatsapp"></i>
                </a>
                <a href="facebook">
                    <i class="fa-brands fa-facebook"></i>
                </a>
                <a href="youtube">
                    <i class="fa-brands fa-youtube"></i>
                </a>
            </div>  
            <hr>
        </div>
        <div class="footerlogo">
            <h1>e!zon</h1>
            <p>Copyright ©<?= date('Y'); ?> eizon, a daCotyINDUSTRY Company. All Rights Reserved.</p>
        </div>       
    </footer>

<script>
        let currentIndex = 0;
        const images = document.querySelectorAll('.carousel img');
        const thumbnails = document.querySelectorAll('.thumbnails img');

// Function to show the selected image
        function showImage(index) {
            currentIndex = index;
            images.forEach((img, i) => {
                img.classList.toggle('active', i === index);
            });
            thumbnails.forEach((thumb, i) => {
                thumb.classList.toggle('active', i === index);
            });
        }

// Auto-slide functionality
        function autoSlide() {
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        }

// Start auto-slide every 5 seconds
        setInterval(autoSlide, 5000);
    </script>
    
    <?php include_once __DIR__ . '/cordova-bridge.php'; ?>
</body>
</html>

⬅ Back