1#@!#!123s

: / home3 / encodto1 / siliguritoys.com /
Filename : product-details.php
back
<?php
session_start();
include 'config.php'; // Database connection

// Check if user is logged in
$user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0;

// Generate CSRF token if not already set
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Fetch only 3 categories for display
$categoryQuery = "SELECT category_id, category_name FROM product_category LIMIT 3";
$categoryResult = mysqli_query($conn, $categoryQuery);

// Fetch products with wishlist status
$query = "SELECT p.*, c.category_name, 
          IFNULL((SELECT COUNT(*) FROM product_wishlist w WHERE w.user_id = ? AND w.product_id = p.id), 0) AS is_wishlisted 
          FROM slgtoys_products p 
          JOIN product_category c ON p.category_id = c.category_id 
          LIMIT 6"; // Limit to 6 products

$stmt = $conn->prepare($query);
if ($stmt) {
    $stmt->bind_param("i", $user_id);
    $stmt->execute();
    $productResult = $stmt->get_result();
} else {
    die("Query preparation failed: " . mysqli_error($conn));
}
?>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <?php include 'style.php'; ?>
    <style>
        .product-big-img {
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .zoom-image {
            width: 100%;
            cursor: pointer;
        }

        .thumbnail-gallery {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
        }

        .thumbnail {
            width: 60px;
            height: 60px;
            cursor: pointer;
            border: 1px solid #ddd;
            transition: 0.3s;
        }

        .thumbnail:hover {
            border-color: #000;
        }

        /* Custom Lens Zoom Styles */
        .lens {
            position: absolute;
            border: 2px solid #fd7f34;
            width: 150px;
            height: 150px;
            background-repeat: no-repeat;
            pointer-events: none;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- Header -->
    <?php include 'header.php'; ?>

    <!-- Breadcrumb Section -->
    <div class="breadcumb-wrapper" data-bg-src="assets/img/bg/breadcrumb-bg.png">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title" data-cue="slideInUp">Shop Details</h1>
                <ul class="breadcumb-menu">
                    <li data-cue="slideInUp" data-delay="100"><a href="index.html">Home</a></li>
                    <li data-cue="slideInUp" data-delay="100">Shop Details</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Product Details Section -->
    <?php
    // Fetch product details based on product ID from URL
    $product_id = isset($_GET['id']) ? intval($_GET['id']) : 1;
    $query = "SELECT p.*, c.category_name 
              FROM slgtoys_products p 
              JOIN product_category c ON p.category_id = c.category_id 
              WHERE p.id = ?";
    $stmt = $conn->prepare($query);
    $stmt->bind_param("i", $product_id);
    $stmt->execute();
    $result = $stmt->get_result();
    $product = $result->fetch_assoc();

    if (!$product) {
        echo "<p>Product not found.</p>";
        exit;
    }
    ?>

    <section class="product-details mt-50 space-extra-bottom">
        <div class="container">
            <div class="row gx-60 gy-50">
                <!-- Product Image Gallery -->
                <div class="col-lg-6">
                    <div class="product-big-img">
                        <div class="img">
                            <img id="mainImage" src="slgadmintoys/<?php echo $product['image_1']; ?>" alt="Product Image" class="zoom-image" />
                            <div id="lens" class="lens"></div>
                        </div>
                        <div class="thumbnail-gallery">
                            <?php for ($i = 2; $i <= 5; $i++) {
                                $image_field = "image_" . $i;
                                if (!empty($product[$image_field])) { ?>
                                    <img class="thumbnail" src="slgadmintoys/<?php echo $product[$image_field]; ?>" alt="Thumb <?php echo $i; ?>" onclick="changeImage(this)">
                            <?php }
                            } ?>
                        </div>
                    </div>
                </div>

                <!-- Product Details -->
                <div class="col-xxl-6 align-self-center">
                    <div class="product-about">
                        <h2 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h2>
                        <p class="text"><?php echo htmlspecialchars($product['description']); ?></p>
                        <p class="price">
                            Rs. <?php echo number_format($product['price']); ?>
                            <span class="stock-availability"><?php echo ($product['stock_quantity'] > 0) ? 'In Stock' : 'Out of Stock'; ?></span>
                        </p>

                        <!-- Product Options -->
                        <div class="product-option">
                            <div class="product-color-wrap">
                                <div class="product-option-title">Color:</div>
                                <span style="background-color: <?php echo htmlspecialchars($product['color']); ?>; padding: 5px 10px; border-radius: 3px;"><?php echo htmlspecialchars($product['color']); ?></span>
                            </div>
                        </div>

                        <!-- Quantity & Cart Buttons -->
                        <div class="actions">
                            <div class="quantity">
                                <button class="quantity-minus qty-btn"><i class="far fa-minus"></i></button>
                                <input type="number" class="qty-input" step="1" min="1" max="100" name="quantity" value="1" title="Qty" />
                                <button class="quantity-plus qty-btn"><i class="far fa-plus"></i></button>
                            </div>
                            <button class="ot-btn add-to-cart" data-product-id="<?php echo $product['id']; ?>"><i class="fa-light fa-basket-shopping me-1"></i> Add to Cart</button>
                            <a href="#" class="icon-btn wishlist-btn" data-product-id="<?php echo $product['id']; ?>"><i class="far fa-heart"></i></a>
                        </div>

                        <!-- Product Meta Details -->
                        <div class="product_meta">
                            <span class="sku_wrapper">Dimensions: <span class="sku"><?php echo htmlspecialchars($product['size']); ?></span></span>
                            <span>Age: <a href="#"><?php echo htmlspecialchars($product['age_category']); ?> Years</a></span>
                            <span class="posted_in">Category: <a href="#"><?php echo htmlspecialchars($product['category_name']); ?></a></span>
                            <span>Weight: <a href="#"><?php echo htmlspecialchars($product['weight']); ?> Gm</a></span>
                            <span class="posted_in">Material: <a href="#"><?php echo htmlspecialchars($product['material']); ?></a></span>
                        </div>

                        <!-- Product Features -->
                        <div class="checklist-wrap">
                            <div class="row gy-2">
                                <div class="col-lg-5">
                                    <div class="check-list">
                                        <ul>
                                            <li><i class="fas fa-check"></i> Free shipping Above Rs. 500</li>
                                            <li><i class="fas fa-check"></i> 30 days exchange & return</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="check-list">
                                        <ul>
                                            <li><i class="fas fa-check"></i> Babymart Flash Discount: Starting at 30% Off</li>
                                            <li><i class="fas fa-check"></i> Safe & Secure online shopping</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Product Tabs -->
                <ul class="nav product-tab-style1" id="productTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="description-tab" data-bs-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="false">Description</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="information-tab" data-bs-toggle="tab" href="#information" role="tab" aria-controls="information" aria-selected="false">Additional Information</a>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="productTabContent">
                    <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
                        <p class="mb-0"><?php echo htmlspecialchars($product['description']); ?></p>
                    </div>
                    <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                        <table class="woocommerce-table mb-0">
                            <tbody>
                                <tr>
                                    <th>Weight</th>
                                    <td><?php echo htmlspecialchars($product['weight']); ?> GM</td>
                                </tr>
                                <tr>
                                    <th>Dimensions</th>
                                    <td><?php echo htmlspecialchars($product['size']); ?></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- JavaScript for Wishlist, Add to Cart, and Image Switching -->
    <script>
        var isLoggedIn = <?php echo ($user_id > 0) ? 'true' : 'false'; ?>;

        // Change main image when thumbnail is clicked
        function changeImage(element) {
            var mainImage = document.getElementById("mainImage");
            mainImage.src = element.src;
        }

        $(document).ready(function() {
            // Wishlist Button Click
            $(".wishlist-btn").click(function(e) {
                e.preventDefault();

                if (!isLoggedIn) {
                    alert("You must login first!");
                    return;
                }

                var button = $(this);
                var productId = button.data("product-id");

                $.ajax({
                    url: "wishlist_handler.php",
                    method: "POST",
                    data: {
                        product_id: productId
                    },
                    success: function(response) {
                        if (response == "added") {
                            button.html("❤️");
                        } else {
                            button.html("🤍");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Wishlist error: " + error);
                    }
                });
            });

            // Add to Cart Button Click
            $(".add-to-cart").click(function(e) {
                e.preventDefault();

                if (!isLoggedIn) {
                    alert("You must login first!");
                    return;
                }

                var button = $(this);
                var productId = button.data("product-id");

                $.ajax({
                    url: "cart_handler.php",
                    method: "POST",
                    data: {
                        product_id: productId,
                        action: "add"
                    },
                    success: function(response) {
                        alert("Product added to cart!");
                    },
                    error: function(xhr, status, error) {
                        console.error("Add to cart error: " + error);
                    }
                });
            });
        });
    </script>

    <!-- Footer -->
    <?php include 'footer.php'; ?>
</body>

</html>