.png)
Get this attractive ecommerce website with advanced admin panel. The admin panel show all the analytics along with charts and table about the website. And many more features
<?php
// Include the header file
include('header.php');
// Include the database connection
include('admin/db.php');
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maclister Style Header</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
include('main/hero.php');
include('main/tags.php');
?>
<!-- Link to the products page -->
<!-- <div class="container mt-5">
<a href="products.php" class="btn btn-primary">View Featured Products</a>
</div> -->
<?php
// Fetch all products added in the last 30 days
$sql_recent_products = "SELECT id, name, image1 FROM products WHERE created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)";
$result_recent_products = mysqli_query($conn, $sql_recent_products);
$products = mysqli_fetch_all($result_recent_products, MYSQLI_ASSOC);
$product_count = count($products);
?>
<!-- Recently Added Products Section -->
<div class="container-fluid mt-5">
<?php if ($product_count > 0): ?>
<div class="recent-products-carousel mb-5 position-relative">
<h3 class="mb-3">Recently Added Products</h3>
<div class="carousel-container">
<button class="carousel-button" id="prev-recent">❮</button>
<div class="products-carousel" id="products-carousel">
<?php foreach ($products as $product): ?>
<div class="product">
<a href="view_product.php?id=<?= $product['id'] ?>">
<img src="admin/<?= htmlspecialchars($product['image1']) ?>"
alt="<?= htmlspecialchars($product['name']) ?>"
class="product-image">
<p class="product-name"> <?= htmlspecialchars($product['name']) ?> </p>
</a>
</div>
<?php endforeach; ?>
</div>
<button class="carousel-button" id="next-recent">❯</button>
</div>
</div>
<?php else: ?>
<p class="text-center">No products have been added in the last 30 days.</p>
<?php endif; ?>
</div>
<!-- Styles -->
<style>
.recent-products-carousel {
background: #ffffff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.carousel-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 100%;
}
.products-carousel {
display: flex;
gap: 10px;
padding: 10px;
overflow-x: auto;
scroll-behavior: smooth;
white-space: nowrap;
scrollbar-width: none;
width: 90%;
}
.products-carousel::-webkit-scrollbar {
display: none;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
min-width: 150px;
cursor: pointer;
}
.product a {
text-decoration: none;
color: #333;
}
.product-image {
width: 100px;
height: 100px;
object-fit: contain;
border-radius: 5px;
}
.product-name {
font-size: 14px;
text-align: center;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #e3ebf9;
color: black;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
z-index: 10;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-button:hover {
background-color: #d0d9f3;
}
#prev-recent {
left: 10px;
}
#next-recent {
right: 10px;
}
</style>
<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
let carousel = document.getElementById("products-carousel");
let prevButton = document.getElementById("prev-recent");
let nextButton = document.getElementById("next-recent");
let scrollAmount = 200;
function updateButtons() {
prevButton.style.display = carousel.scrollLeft > 0 ? "block" : "none";
nextButton.style.display = carousel.scrollLeft < (carousel.scrollWidth - carousel.clientWidth) ? "block" : "none";
}
nextButton.addEventListener("click", function() {
carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
});
prevButton.addEventListener("click", function() {
carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
});
carousel.addEventListener("scroll", updateButtons);
updateButtons(); // Initial check
});
</script>
<?php
include('recent.php');
?>
<?php
include('products.php');
include('footer.php');
?>
</body>
</html>
.png)
.png)
.png)
.png)