Only 1 image from the database is pulling inside the modal which is the class= “main-image”
<?php
session_start();
// Check if the user is logged in
if (isset($_SESSION['username'])) {
#echo "Welcome, ". $_SESSION['username']. "!";
// Rest of your code here...
} else {
echo "You are not logged in.";
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['product_id'])) {
$product_id = $_POST['product_id'];
$product_name = $_POST['product_name'];
$product_price = $_POST['product_price'];
$product_persona = $_POST['product_persona'];
if (!isset($_SESSION['cart'])) {
$_SESSION['cart'] = [];
}
if (isset($_SESSION['cart'][$product_id])) {
$_SESSION['cart'][$product_id]['quantity'] += 1;
} else {
$_SESSION['cart'][$product_id] = [
'name' => $product_name,
'price' => $product_price,
'quantity' => 1,
'persona' => $product_persona
];
}
// Set session variable to indicate item added
$_SESSION['item_added'] = $product_name;
$total = 0;
foreach ($_SESSION['cart'] as $item) {
$total += $item['price'] * $item['quantity'];
}
// Return JSON response for Ajax requests
if (isset($_POST['ajax'])) {
echo json_encode(['total' => $total, 'cart' => $_SESSION['cart']]);
exit;
}
}
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "client_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT products.p_id, products.name, products.quantity, products.price, products.details, images.image, products.persona
FROM products
JOIN images ON products.p_id = images.p_id
ORDER BY products.p_id";
$result = $conn->query($sql);
$products = [];
while ($row = $result->fetch_assoc()) {
$product_id = $row['p_id'];
$products[$product_id]['details'] = [
'name' => $row['name'],
'quantity' => $row['quantity'],
'price' => $row['price'],
'details' => $row['details'],
'persona' => $row['persona'],
];
// Store all images for the product
$products[$product_id]['images'][] = base64_encode($row['image']);
}
$cart = isset($_SESSION['cart']) ? $_SESSION['cart'] : [];
$total = 0;
foreach ($cart as $item) {
$total += $item['price'] * $item['quantity'];
}
?>
<div class="outer_container">
<div class="container-lg my-5">
<div class="header-design">
<h1><i class="bi bi-award"></i> OUR PRODUCTS</h1>
<p>Discover our exclusive range of personalized products crafted just for you!</p>
</div>
<br>
<div class="search-bar">
<input type="text" class="search-input" placeholder="Search products...">
<button class="search-button" type="submit"><i class="bi bi-search"></i></button>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
<?php
foreach ($products as $p_id => $product) {
if (!isset($product['details']['name']) || !isset($product['details']['price']) || !isset($product['details']['quantity']) || !isset($product['details']['details']) || !isset($product['details']['persona'])) {
echo '<div class="col"><div class="alert alert-danger">Missing details for product ID: ' . htmlspecialchars($p_id) . '</div></div>';
continue;
}
echo '
<div class="col">
<div class="product_card">
<div id="carousel-' . $p_id . '" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">';
foreach ($product['images'] as $index => $image) {
echo '
<div class="carousel-item ' . ($index === 0 ? 'active' : '') . '">
<img src="data:image/jpeg;base64,' . $image . '" class="d-block w-100 product-image" alt="...">
</div>';
}
echo '
</div>
</div>
<div class="product_card-body">
<h5 class="product-name">' . htmlspecialchars($product['details']['name']) . '</h5>
<div class="product-info">
<div class="product-price">$' . htmlspecialchars($product['details']['price']) . '</div>
<div class="stock-display">Stock: ' . htmlspecialchars($product['details']['quantity']) . '</div>
</div>
<button class="btn view-details" onclick="openModal(' . $p_id . ', '' . htmlspecialchars($product['details']['name']) . '', '' . $image . '', ' . htmlspecialchars($product['details']['price']) . ', '' . htmlspecialchars($product['details']['details']) . '', ' . htmlspecialchars($product['details']['quantity']) . ', '' . htmlspecialchars($product['details']['persona']) . '')">View Details</button>
</div>
</div>
</div>';
}
?>
</div>
</div>
</div>
<!-- MODAL START -->
<div id="cartModal" class="modal" style="font-size:small">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<div class="modal-body">
<table>
<tr>
<td class="product-img">
<section class="prod_image">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<div class="main-image">
<img src="./assets/caro1.1.jpg" alt="" class="img-fluid w-100 product-img" id="modal-product-image">
</div>
<div class="small-img-group">
<div class="small-img-col">
<img src="./assets/blog3.jpg" class="small-img product-img">
</div>
<div class="small-img-col">
<img src="./assets/caro1.1.jpg" class="small-img product-img">
</div>
<div class="small-img-col">
<img src="./assets/caro1.3.jpg" class="small-img product-img">
</div>
</div>
</div>
</div>
</section>
</td>
<td class="prod_details">
<p id="modal-product-name"></p>
<p id="modal-product-details"></p>
<div class="modal-product-price-stock">
<p id="modal-product-price"></p>
<p id="modal-product-stock"></p>
</div>
<form id="details-form" action="" method="POST"><br>
<!-- Other form fields here -->
<div class="form-group">
<label class="form-content fw-bold" for="personalization">Add your personalization <span><small>(if applicable)</small></span></label>
<p id="modal-product-persona">ETONG TEXT PART NA TO DAPAT NABABAGO DEPENDE SA ILALAGAY NA PERSONALIZATION DETAILS SA INSERT_PRODUCT.PHP</p>
<textarea class="form-control" id="personalization" name="personalization" rows="2" required></textarea>
<br>
</div>
</form>
<span style="font-weight: bold; margin:0px 0px 50px 20px">Qty:</span>
<div class="quantity-controls">
<button class="quantity-btn" onclick="decrementQuantity()"> -</button>
<input type="number" id="item-quantity" value="2" min="1" class="form-control item-quantity">
<button class="quantity-btn" onclick="incrementQuantity()">+</button>
<button type="submit" name="send" class="btn" style="background-color: #f795bd; color: white; margin-left: 135px; font-weight:bold;">Add to cart</button>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const mainImage = document.getElementById("modal-product-image");
const smallImages = document.querySelectorAll(".small-img");
// Function to change main image to clicked small image
function changeMainImage(clickedImg) {
mainImage.src = clickedImg.src;
}
// Function to change small image to main image
function changeSmallImage(clickedImg) {
smallImages.forEach(function(img) {
if (img.src === clickedImg.src) {
mainImage.src = img.src;
}
});
}
// Event listener for clicking on main image
mainImage.addEventListener("click", function() {
changeSmallImage(mainImage);
});
// Event listeners for clicking on each small image
smallImages.forEach(function(smallImg) {
smallImg.addEventListener("click", function() {
changeMainImage(smallImg);
});
});
});
function decrementQuantity() {
var quantityInput = document.getElementById('item-quantity');
var currentQuantity = parseInt(quantityInput.value);
if (currentQuantity > 1) {
quantityInput.value = currentQuantity - 1;
}
}
function incrementQuantity() {
var quantityInput = document.getElementById('item-quantity');
var currentQuantity = parseInt(quantityInput.value);
quantityInput.value = currentQuantity + 1;
}
function openModal(id, name, image, price, details, quantity,persona) {
document.getElementById('modal-product-name').textContent = name;
document.getElementById('modal-product-image').src = 'data:image/jpeg;base64,' + image;
document.getElementById('modal-product-price').textContent = '$' + price;
document.getElementById('modal-product-persona').textContent = '' + persona;
document.getElementById('modal-product-details').textContent = details;
document.getElementById('modal-product-stock').textContent = ' Stock: ' + quantity;
document.getElementById('cartModal').style.display = 'block';
}
function closeModal() {
document.getElementById('cartModal').style.display = 'none';
}
</script>
card with view details button, once it is clicked a modal should popup
This is the modal where images should be inserted from the databas
table in client_db for image
table in client_db for product details
so i tried making it into array but when i am trying to change the code to array the modal doesn’t open because the view details button is not calling the openModal() function.
New contributor
Obri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.