D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home3
/
encodto1
/
tresboutique.in
/
Filename :
productdetails.php
back
Copy
<?php include('tresadmin/config.php') ?> <!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>Tres - Product Details</title> <?php require('style.php') ?> <style> .fabric-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .fabric-btn { background-color: #f4f4f4; border: 1px solid #ccc; padding: 8px 16px; font-size: 14px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .fabric-btn:hover { background-color: #007bff; color: white; } .fabric-btn.selected { background-color: #007bff; /* Change the background color */ color: white; /* Change text color */ } </style> </head> <body> <?php include 'header.php' ?> <main class="main"> <div class="page-header breadcrumb-wrap"> <div class="container"> <div class="breadcrumb"> <a href="index.php" rel="nofollow">Home</a> <span></span> Product <span></span> Product Details </div> </div> </div> <section class="mt-50 mb-50"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="product-detail accordion-detail"> <?php // Assuming a connection to your database is already established if (isset($_GET['product_id'])) { $product_id = $_GET['product_id']; // Get the product ID from the URL parameter // Query to fetch product details based on the product ID $query = "SELECT * FROM products WHERE product_id = ?"; // Assuming 'id' is the correct column name $stmt = $conn->prepare($query); $stmt->bind_param("i", $product_id); $stmt->execute(); $result = $stmt->get_result(); $product = $result->fetch_assoc(); if ($product) { $old_price = $product['product_price'] * 1.30; // Combine all image columns into one array $images = []; for ($i = 1; $i <= 6; $i++) { if (!empty($product["product_img_$i"])) { $images[] = $product["product_img_$i"]; } } ?> <div class="row mb-50"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="detail-gallery"> <span class="zoom-icon"><i class="fa-solid fa-magnifying-glass"></i></span> <!-- MAIN SLIDES --> <div class="product-image-slider"> <?php foreach ($images as $image): ?> <figure class="border-radius-10"> <img src="tresadmin/uploads/products/<?= $image ?>" alt="product image"> </figure> <?php endforeach; ?> </div> <!-- THUMBNAILS --> <div class="slider-nav-thumbnails pl-20 pr-15"> <?php foreach ($images as $image): ?> <div><img src="tresadmin/uploads/products/<?= $image ?>" alt="product thumbnail"></div> <?php endforeach; ?> </div> </div> <!-- End Gallery --> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="detail-info"> <h2 class="title-detail"><?= htmlspecialchars($product['product_name']) ?></h2> <div class="clearfix product-price-cover"> <div class="product-price primary-color float-left"> <ins><span class="text-brand">RS. <?= number_format($product['product_price'], 2) ?></span></ins> <ins><span class="old-price font-md ml-15">Rs. <?= number_format($old_price, 2) ?></span></ins> <span class="save-price font-md color3 ml-15"><?= round(100 - ($product['product_price'] / $old_price) * 100) ?>% Off</span> </div> </div> <div class="bt-1 border-color-1 mt-15 mb-15"></div> <div class="short-desc mb-30"> <p><?= htmlspecialchars($product['product_desc']) ?></p> </div> <div class="product_sort_info font-xs mb-30"> <ul> <li class="mb-10">1 Year Warranty</li> <li class="mb-10">30 Day Return Policy</li> <li>Cash on Delivery available</li> </ul> </div> <div class="attr-detail attr-size"> <strong class="mr-10">Size</strong> <ul class="list-filter size-filter font-small"> <?php // Assuming sizes are stored in a comma-separated list $sizes = explode(',', $product['product_size']); foreach ($sizes as $size): ?> <li><a href="#"><?= htmlspecialchars($size) ?></a></li> <?php endforeach; ?> </ul> </div> <div class="bt-1 border-color-1 mt-30 mb-30"></div> <div class="detail-extralink"> <div class="attr-detail attr-fabric"> <strong class="mr-10">Fabrics</strong><br><br> <div class="fabric-buttons"> <?php // Assuming 'product_fabric' contains a comma-separated list of fabrics $fabrics = explode(',', $product['fabrics']); foreach ($fabrics as $fabric) { echo '<button class="fabric-btn">' . htmlspecialchars(trim($fabric)) . '</button>'; } ?> </div> </div> <br><br><br> <div class="detail-qty border radius"> <a href="#" class="qty-down"><i class="fa-solid fa-angle-down"></i></a> <span class="qty-val">1</span> <a href="#" class="qty-up"><i class="fa-solid fa-angle-up"></i></a> </div> <div class="product-extra-link2"> <button type="button" class="button button-add-to-cart" id="getQuoteBtn">Get Enquiry</button> </div> <script> let selectedFabric = ""; // Variable to store the selected fabric // Add event listener to all fabric buttons const fabricButtons = document.querySelectorAll('.fabric-btn'); fabricButtons.forEach(button => { button.addEventListener('click', function() { // Mark the selected button (optional, for visual feedback) fabricButtons.forEach(btn => btn.classList.remove('selected')); // Remove 'selected' class from all button.classList.add('selected'); // Add 'selected' class to the clicked button // Set the selected fabric selectedFabric = button.textContent.trim(); }); }); // Add event listener to the "Get Quote" button document.getElementById('getQuoteBtn').addEventListener('click', function() { var productName = "<?= htmlspecialchars($product['product_name']) ?>"; var productPrice = "RS. <?= number_format($product['product_price'], 2) ?>"; var productSize = "<?= htmlspecialchars($product['product_size']) ?>"; var productPageUrl = window.location.href; // Get the current page URL // Fetch the product image (assuming the image is stored in the 'product_img_1' field) // Construct the message to send via WhatsApp var message = `Hi, I'd like to get an Enquiry for the following product:\n\n` + `Product Name: ${productName}\n` + `Price: ${productPrice}\n` + `Size: ${productSize}\n` + `Fabric: ${selectedFabric}\n` + // Include the selected fabric `Product Page: ${productPageUrl}`; var phoneNumber = "9733712121"; // Your phone number var encodedMessage = encodeURIComponent(message); // Encoding the message for URL // Construct the WhatsApp URL with the message and phone number var whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`; // Open WhatsApp with the message window.open(whatsappUrl, '_blank'); }); </script> </div> <ul class="product-meta font-xs color-grey mt-50"> <li class="mb-5">SKU: <a href="#"><?= htmlspecialchars($product['product_sku']) ?></a></li> <li>Availability:<span class="in-stock text-success ml-5"><?= $product['product_status'] ?> Items In Stock</span></li> </ul> </div> <!-- Detail Info --> </div> </div> <div class="row"> <div class="col-lg-10 m-auto entry-main-content"> <h2 class="section-title style-1 mb-30">Description</h2> <div class="description mb-50"> <p><?= $product['product_desc'] ?></p> </div> </div> </div> <?php } else { echo "<p>Product not found.</p>"; } } else { echo "<p>Product ID not specified.</p>"; } ?> <div class="row mt-60"> <div class="col-12"> <h3 class="section-title style-1 mb-30">Related products</h3> </div> <div class="col-12"> <div class="row related-products"> <?php // Query to fetch products along with category name $query = "SELECT p.*, c.product_category_name FROM products p LEFT JOIN product_category c ON p.product_category = c.product_category_id ORDER BY p.created_at DESC LIMIT 4"; // Adjust limit as needed $result = $conn->query($query); if ($result->num_rows > 0) { while ($product = $result->fetch_assoc()) { // Calculate old price as 30% more than product price $calculated_old_price = $product['product_price'] * 1.30; ?> <div class="col-lg-3 col-md-4 col-12 col-sm-6"> <div class="product-cart-wrap mb-30"> <div class="product-img-action-wrap"> <div class="product-img product-img-zoom"> <a href="productdetails.php?product_id=<?php echo $product['product_id']; ?>"> <img class="default-img" src="tresadmin/uploads/products/<?= htmlspecialchars($product['product_img_1']) ?>" alt="Product Image"> <img class="hover-img" src="tresadmin/uploads/products/<?= htmlspecialchars($product['product_img_1']) ?>" alt="Product Hover Image"> </a> </div> </div> <div class="product-content-wrap"> <h2><a href="productdetails.php?product_id=<?= $product['product_id'] ?>"><?= htmlspecialchars($product['product_name']) ?></a></h2> <div class="product-price"> <span class="new-price">₹<?= number_format($product['product_price'], 2) ?></span> <span class="old-price">₹<?= number_format($calculated_old_price, 2) ?></span> </div> </div> </div> </div> <?php } } ?> </div> </div> </div> </div> </div> </div> </div> </section> </main> <?php include 'footer.php' ?> <!-- Preloader Start --> <div id="preloader-active"> <div class="preloader d-flex align-items-center justify-content-center"> <div class="preloader-inner position-relative"> <div class="text-center"> <h5 class="mb-5">Now Loading</h5> <div class="loader"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> </div> </div> </div> </div> </div> <!-- Vendor JS--> <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script> <script src="assets/js/vendor/jquery-3.6.0.min.js"></script> <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script> <script src="assets/js/vendor/bootstrap.bundle.min.js"></script> <script src="assets/js/plugins/slick.js"></script> <script src="assets/js/plugins/jquery.syotimer.min.js"></script> <script src="assets/js/plugins/wow.js"></script> <script src="assets/js/plugins/jquery-ui.js"></script> <script src="assets/js/plugins/perfect-scrollbar.js"></script> <script src="assets/js/plugins/magnific-popup.js"></script> <script src="assets/js/plugins/select2.min.js"></script> <script src="assets/js/plugins/waypoints.js"></script> <script src="assets/js/plugins/counterup.js"></script> <script src="assets/js/plugins/jquery.countdown.min.js"></script> <script src="assets/js/plugins/images-loaded.js"></script> <script src="assets/js/plugins/isotope.js"></script> <script src="assets/js/plugins/scrollup.js"></script> <script src="assets/js/plugins/jquery.vticker-min.js"></script> <script src="assets/js/plugins/jquery.theia.sticky.js"></script> <script src="assets/js/plugins/jquery.elevatezoom.js"></script> <script src="assets/js/main.js"></script> <script src="assets/js/shop.js"></script> </body> </html>