279 lines
12 KiB
PHP
279 lines
12 KiB
PHP
<?php include '../template/template1.php'; ?>
|
|
<?php include '../template/header.php'; ?>
|
|
<?php include '../config.php'; ?>
|
|
|
|
<style>
|
|
.portfolio-content {
|
|
position: relative;
|
|
}
|
|
.portfolio-content img {
|
|
width: 250px;
|
|
height: 250px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.portfolio-content .view-icon {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
padding: 8px;
|
|
border-radius: 50%;
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
|
|
z-index: 10;
|
|
}
|
|
.portfolio-info h4 {
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
min-height: 48px; /* Tinggi cukup untuk 2 baris */
|
|
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|
|
|
|
<section id="portfolio" class="portfolio section">
|
|
<div class="container section-title mt-4" data-aos="fade-up">
|
|
<h2>Produk</h2>
|
|
<p>Nikmati kualitas terbaik Produk Fresh dari kami.</p>
|
|
</div>
|
|
|
|
<div class="container mb-5">
|
|
<div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
|
|
<ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
|
|
<li data-filter="*" class="filter-active">Semua</li>
|
|
<li data-filter=".filter-Daging">Daging</li>
|
|
<li data-filter=".filter-Jeroan">Jeroan</li>
|
|
</ul>
|
|
|
|
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-2 isotope-container" data-aos="fade-up" data-aos-delay="200">
|
|
<?php
|
|
$query = mysqli_query($conn, "SELECT * FROM produk;");
|
|
while ($produk = mysqli_fetch_assoc($query)) {
|
|
?>
|
|
<div class="col portfolio-item isotope-item filter-<?php echo $produk['kategori']; ?>">
|
|
<div class="portfolio-content h-100 position-relative">
|
|
<img src="<?= $base_url; ?>/assets/img/produk/<?= $produk['gambar']; ?>" class="img-fluid" style="display: block; margin: auto; text-align: center;" alt="">
|
|
|
|
<a href="detail-produk.php?id=<?php echo $produk['id_produk']; ?>" title="Lihat Detail" class="view-icon">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
|
|
<div class="portfolio-info text-center" data-produk-id="<?php echo $produk['id_produk']; ?>">
|
|
<h4 style="text-align: center;"><?php echo $produk['nama_produk']; ?></h4>
|
|
<p class="stok-info" style="text-align: center;">Stok: <?php echo $produk['stok']; ?></p>
|
|
<p class="harga-info" style="text-align: center;">Rp<?php echo number_format($produk['harga_jual'], 0, ',', '.'); ?></p>
|
|
</div>
|
|
|
|
<?php if (isset($_SESSION['status_login']) && $_SESSION['status_login']): ?>
|
|
<div class="d-flex flex-column align-items-center mt-1">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm minus-btn"
|
|
data-produk-id="<?php echo $produk['id_produk']; ?>"
|
|
<?= $produk['stok'] <= 0 ? 'disabled' : ''; ?>>-</button>
|
|
|
|
<input type="number" class="form-control mx-2 text-center jumlah-input"
|
|
data-produk-id="<?php echo $produk['id_produk']; ?>"
|
|
value="1" min="1" style="width: 50px;" <?= $produk['stok'] <= 0 ? 'disabled' : ''; ?>>
|
|
|
|
<button type="button" class="btn btn-outline-secondary btn-sm plus-btn"
|
|
data-produk-id="<?php echo $produk['id_produk']; ?>"
|
|
<?= $produk['stok'] <= 0 ? 'disabled' : ''; ?>>+</button>
|
|
</div>
|
|
|
|
<a href="#" class="btn btn-primary w-100 keranjang-btn mt-2 mb-2"
|
|
data-produk-id="<?php echo $produk['id_produk']; ?>"
|
|
data-stok="<?php echo $produk['stok']; ?>"
|
|
data-kategori="<?php echo $produk['kategori']; ?>"
|
|
<?= $produk['stok'] <= 0 ? 'disabled style="pointer-events: none; opacity: 0.5; cursor: not-allowed;"' : ''; ?>>
|
|
Tambah ke Keranjang
|
|
</a>
|
|
</div>
|
|
<?php else: ?>
|
|
<button class="btn btn-secondary w-100 mt-2 mb-2" disabled>Harap Masuk Terlebih Dahulu!</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
function fetchProduk() {
|
|
fetch(`index.php?fetch_produk=1`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(produk => {
|
|
let parentElem = document.querySelector(`.portfolio-info[data-produk-id="${produk.id_produk}"]`);
|
|
if (!parentElem) return;
|
|
|
|
let stokElem = parentElem.querySelector(".stok-info");
|
|
let hargaElem = parentElem.querySelector(".harga-info");
|
|
let keranjangBtn = parentElem.closest(".portfolio-content").querySelector(".keranjang-btn");
|
|
let minusBtn = parentElem.closest(".portfolio-content").querySelector(".minus-btn");
|
|
let plusBtn = parentElem.closest(".portfolio-content").querySelector(".plus-btn");
|
|
let jumlahInput = parentElem.closest(".portfolio-content").querySelector(".jumlah-input");
|
|
|
|
if (stokElem) stokElem.innerText = `Stok: ${produk.stok}`;
|
|
if (hargaElem) hargaElem.innerText = `Rp${parseInt(produk.harga).toLocaleString()}`;
|
|
|
|
let stokTersedia = produk.stok > 0;
|
|
|
|
if (keranjangBtn) {
|
|
if (stokTersedia) {
|
|
keranjangBtn.removeAttribute("disabled");
|
|
keranjangBtn.style.pointerEvents = "auto";
|
|
keranjangBtn.style.opacity = "1";
|
|
} else {
|
|
keranjangBtn.setAttribute("disabled", "true");
|
|
keranjangBtn.style.pointerEvents = "none";
|
|
keranjangBtn.style.opacity = "0.5";
|
|
}
|
|
}
|
|
|
|
if (minusBtn && plusBtn && jumlahInput) {
|
|
if (stokTersedia) {
|
|
minusBtn.removeAttribute("disabled");
|
|
plusBtn.removeAttribute("disabled");
|
|
jumlahInput.removeAttribute("disabled");
|
|
} else {
|
|
minusBtn.setAttribute("disabled", "true");
|
|
plusBtn.setAttribute("disabled", "true");
|
|
jumlahInput.setAttribute("disabled", "true");
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching produk:', error));
|
|
}
|
|
|
|
setInterval(fetchProduk, 2000);
|
|
fetchProduk();
|
|
|
|
document.addEventListener("click", function (e) {
|
|
if (e.target.classList.contains("keranjang-btn")) {
|
|
e.preventDefault();
|
|
|
|
const btn = e.target;
|
|
const produkId = btn.dataset.produkId;
|
|
const kategori = btn.dataset.kategori;
|
|
const jumlahInput = btn.closest(".portfolio-content").querySelector(".jumlah-input");
|
|
const jumlah = parseInt(jumlahInput.value);
|
|
|
|
// Ambil stok real-time dari server
|
|
fetch(`get_stok.php?id=${produkId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const stokMax = parseInt(data.stok);
|
|
|
|
if (jumlah > stokMax) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops!',
|
|
text: 'Jumlah melebihi stok yang tersedia (real-time).',
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (kategori === "Jeroan") {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: 'Produk telah ditambahkan ke keranjang.',
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
}).then(() => {
|
|
window.location.href = `add_to_cart.php?add=${produkId}&jumlah=${jumlah}`;
|
|
});
|
|
return;
|
|
}
|
|
|
|
Swal.fire({
|
|
title: 'Pilih Jumlah Potongan',
|
|
input: 'select',
|
|
inputOptions: {
|
|
1: '1 Potong',
|
|
2: '2 Potong',
|
|
4: '4 Potong',
|
|
6: '6 Potong',
|
|
8: '8 Potong',
|
|
10: '10 Potong',
|
|
12: '12 Potong'
|
|
},
|
|
inputPlaceholder: 'Pilih jumlah potongan',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Tambah ke Keranjang',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Cek apakah user memilih potongan atau tidak
|
|
if (!result.value) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops!',
|
|
text: 'Kamu harus memilih jumlah potongan terlebih dahulu.',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const potongan = result.value;
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: 'Produk telah ditambahkan ke keranjang.',
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
}).then(() => {
|
|
window.location.href = `add_to_cart.php?add=${produkId}&jumlah=${jumlah}&potong=${potongan}`;
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Gagal mengambil stok:', error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error!',
|
|
text: 'Gagal mengecek stok produk.',
|
|
});
|
|
});
|
|
}
|
|
|
|
if (e.target.classList.contains("plus-btn")) {
|
|
const btn = e.target;
|
|
const jumlahInput = btn.closest(".portfolio-content").querySelector(".jumlah-input");
|
|
const stokMax = parseInt(btn.closest(".portfolio-content").querySelector(".keranjang-btn").dataset.stok);
|
|
let jumlah = parseInt(jumlahInput.value) + 1;
|
|
|
|
if (jumlah <= stokMax) {
|
|
jumlahInput.value = jumlah;
|
|
} else {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Oops!',
|
|
text: 'Jumlah melebihi stok yang tersedia.',
|
|
});
|
|
}
|
|
}
|
|
|
|
if (e.target.classList.contains("minus-btn")) {
|
|
const jumlahInput = e.target.closest(".portfolio-content").querySelector(".jumlah-input");
|
|
if (jumlahInput.value > 1) {
|
|
jumlahInput.value = parseInt(jumlahInput.value) - 1;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<?php include '../template/footer.php'; ?>
|
|
<?php include '../template/template2.php'; ?>
|