+ keranjang
This commit is contained in:
parent
b09ad3d424
commit
8152490596
@ -326,6 +326,7 @@ class CustomerController extends Controller
|
||||
'status_order' => "Belum Bayar",
|
||||
'email' => $biodataResult['email'],
|
||||
'alamat' => $biodataResult['alamat'],
|
||||
'entry_at' => Carbon::now()->format('Y-m-d H:i:s.u'),
|
||||
];
|
||||
$order = Order::create($payloadOrder);
|
||||
foreach ($dataCart as $cart) {
|
||||
@ -417,7 +418,6 @@ class CustomerController extends Controller
|
||||
], 200);
|
||||
return back()->with('success', 'Bukti pembayaran berhasil diunggah.');
|
||||
} catch (\Throwable $th) {
|
||||
dd($th);
|
||||
DB::rollBack();
|
||||
return response([
|
||||
'status' => false,
|
||||
@ -438,6 +438,7 @@ class CustomerController extends Controller
|
||||
}
|
||||
|
||||
public function checkOrder(){
|
||||
|
||||
$payload = [
|
||||
'title' => 'Check Order'
|
||||
];
|
||||
|
||||
@ -1836,3 +1836,93 @@ section,
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* =============== 375 PX FIX =============== */
|
||||
@media (max-width: 375px) {
|
||||
|
||||
/* CARD */
|
||||
.col-6.col-xs-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
/* GAMBAR */
|
||||
.card img {
|
||||
height: 120px !important;
|
||||
}
|
||||
|
||||
/* OVERLAY */
|
||||
.position-absolute[style*="height:50%"] {
|
||||
height: 35% !important;
|
||||
}
|
||||
|
||||
/* NAMA */
|
||||
.position-absolute.bottom-0.start-0 h6 {
|
||||
font-size: .75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
/* BADGE KALORI, KATEGORI, SIANG/SORE */
|
||||
.position-absolute.bottom-0.start-0 .badge,
|
||||
.position-absolute.bottom-0.end-0 .badge {
|
||||
font-size: .5rem !important;
|
||||
padding: .15rem .35rem;
|
||||
max-width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* CHIP TANGGAL */
|
||||
.d-flex.gap-1.overflow-auto span {
|
||||
font-size: .6rem !important;
|
||||
padding: .15rem .35rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* HARGA */
|
||||
.row.text-muted.small {
|
||||
font-size: .7rem !important;
|
||||
}
|
||||
|
||||
/* TOMBOL */
|
||||
.btn {
|
||||
font-size: .60rem !important; /* ≈ 10 px */
|
||||
padding: .31rem .41rem !important;
|
||||
border-radius: .25rem !important;
|
||||
}
|
||||
|
||||
|
||||
.d-flex.justify-content-between small { font-size: .65rem; }
|
||||
.d-flex.justify-content-between strong { font-size: .65rem; }
|
||||
|
||||
}
|
||||
|
||||
/* fallback < 360 px menjadi 1 kolom */
|
||||
@media (max-width: 359px) {
|
||||
.col-6.col-xs-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.d-flex.p-2 { flex-direction: column; gap: .5rem; }
|
||||
.btn { width: 100% !important; font-size: .7rem; padding: .35rem 0; }
|
||||
}
|
||||
}
|
||||
|
||||
#floatingCartButton:hover,
|
||||
#menuBtn:hover {
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
transition: transform .25s;
|
||||
}
|
||||
@ -122,7 +122,7 @@ async function submitOrderToServer(){
|
||||
confirmButtonText: 'Tutup!'
|
||||
}).then(() => {
|
||||
window.location.href = "/";
|
||||
});;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
sessionStorage.removeItem('cart');
|
||||
|
||||
@ -31,6 +31,7 @@ let orderIndex = 0;
|
||||
function renderCartList() {
|
||||
$("#cartSidebar").offcanvas('show')
|
||||
$('#floatingCartButton').addClass('d-none');
|
||||
$('#menuBtn').addClass('d-none');
|
||||
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
||||
let total = 0;
|
||||
|
||||
@ -129,6 +130,7 @@ let orderIndex = 0;
|
||||
|
||||
if (cart.length > 0) {
|
||||
$('#floatingCartButton').removeClass('d-none');
|
||||
$('#menuBtn').removeClass('d-none');
|
||||
$('#floatingCartCount').text(totalItem);
|
||||
$('#floatingCartTotal').text('Rp ' + totalHarga.toLocaleString('id-ID'));
|
||||
$('#floatingCartDesc').text(`Total pesanan dari ${cart[0].nama_menu}`);
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
||||
if (cart.length > 0) {
|
||||
$('#floatingCartButton').removeClass('d-none');
|
||||
$('#menuBtn').removeClass('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
@ -100,85 +101,95 @@
|
||||
menus?.forEach(menu => {
|
||||
|
||||
html += `
|
||||
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
|
||||
<div class="card h-100 shadow-sm p-2 rounded-4 mb-3">
|
||||
<!-- Gambar Makanan -->
|
||||
<img src="gambar/${menu.foto || '3.jpeg'}"
|
||||
class="rounded shadow-sm object-fit-cover w-100" height="150px"
|
||||
alt="${menu.nama_menu}">
|
||||
<!-- Info Tersedia Tanggal -->
|
||||
<div class="text-muted small mt-2 px-1">
|
||||
${
|
||||
menu.apakah_someday
|
||||
? `<i class="fa fa-calendar-check me-1 text-success"></i> Tersedia setiap hari (Senin - Minggu)`
|
||||
: (menu.dmph && menu.dmph.length > 0
|
||||
? `<i class="fa fa-calendar-alt me-1 text-success"></i> Tersedia pada tanggal:
|
||||
${menu.dmph.slice(0, 5).map(i => i.tgl_harian).join(', ')}
|
||||
${menu.dmph.length > 5 ? ` dan ${menu.dmph.length - 5} lainnya...` : ''}`
|
||||
: `<i class="fa fa-calendar-times me-1 text-danger"></i> Tidak tersedia saat ini`)
|
||||
}
|
||||
</div>
|
||||
<div class="col-6 col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-2">
|
||||
<div class="card h-80 shadow-sm p-2 rounded-4 mb-3">
|
||||
<!-- GAMBAR + NAMA DI DALAM GAMBAR -->
|
||||
<div class="position-relative">
|
||||
<img src="gambar/${menu.foto || '3.jpeg'}"
|
||||
class="rounded shadow-sm object-fit-cover w-100" height="150"
|
||||
alt="${menu.nama_menu}">
|
||||
|
||||
<!-- Ketersediaan Siang/Sore -->
|
||||
<div class="text-muted small mt-1 px-1">
|
||||
${
|
||||
menu.apakah_menu_siang && menu.apakah_menu_sore
|
||||
? `<i class="fa fa-clock me-1 text-success"></i> Tersedia untuk makan siang dan sore`
|
||||
: menu.apakah_menu_siang
|
||||
? `<i class="fa fa-sun me-1 text-warning"></i> Tersedia untuk makan siang`
|
||||
: menu.apakah_menu_sore
|
||||
? `<i class="fa fa-sun me-1 text-info"></i> Tersedia untuk makan sore`
|
||||
: `<i class="fa fa-ban me-1 text-danger"></i> Tidak tersedia untuk waktu makan apapun`
|
||||
}
|
||||
<!-- Overlay gelap bawah -->
|
||||
<div class="position-absolute bottom-0 start-0 w-100"
|
||||
style="height:50%; background:linear-gradient(transparent, rgba(0,0,0,.6)); border-radius:0 0 .5rem .5rem;"></div>
|
||||
|
||||
<!-- di dalam .position-relative (gambar) -->
|
||||
<!-- Nama + kalori di dalam gambar (bawah) -->
|
||||
<div class="position-absolute bottom-0 start-0 p-2 w-100">
|
||||
<h6 class="fw-bold text-white mb-0 lh-1" style="font-size:.9rem">${menu.nama}</h6>
|
||||
${menu?.kalori.length > 0 ? `
|
||||
<small class="text-white badge bg-success">${(menu.kalori || []).slice(0,1).map(k=>k.nilai_kalori||0).join('')} kkal</small>`: ''}
|
||||
</div>
|
||||
|
||||
<div class="text-muted small">
|
||||
${
|
||||
menu.apakah_someday
|
||||
? `<span class="badge bg-success ms-2 tx" title="Tersedia setiap hari">Menu Someday</span>
|
||||
`
|
||||
: `<span class="badge bg-warning text-dark ms-2" title="Hanya tersedia di tanggal tertentu">Menu Normal</span>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
<!-- Nama & Harga -->
|
||||
<h5 class="fw-bold mb-1 mt-2">${menu.nama} <small class="fs-6">${(menu.kalori || [])
|
||||
<!-- Kategori Diet -->
|
||||
<div class="position-absolute bottom-0 start-0">
|
||||
${(menu.klasifikasiMenu || [])
|
||||
.slice(0, 2)
|
||||
.map(kkal => {
|
||||
const name = kkal.nilai_kalori || '';
|
||||
.map(tag => {
|
||||
const name = tag.nama_kategori_diet || '';
|
||||
const truncated = name.length > 12 ? name.substring(0, 12) + '...' : name;
|
||||
return `<span class="badge bg-success me-1 mb-1" title="${name}">${truncated} kkal</span>`;
|
||||
return `<span class="badge bg-info me-1 mb-1" title="${name}">${truncated}</span>`;
|
||||
}).join('')}
|
||||
${(menu.kalori || []).length > 2
|
||||
? `<span class="badge bg-secondary">+${(menu.klasifikasiMenu.length - 2)} lainnya</span>`
|
||||
: ''}</small> </h5>
|
||||
<div class="row text-muted small">
|
||||
<div class="col-12 fw-semibold">Harga</div>
|
||||
<div class="col-6">Karyawan:</div>
|
||||
<div class="col-6 text-end fw-semibold">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</div>
|
||||
<div class="col-6">Public:</div>
|
||||
<div class="col-6 text-end fw-semibold">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Kategori Diet (Badge) -->
|
||||
<div class="mb-1">
|
||||
${(menu.klasifikasiMenu || [])
|
||||
.slice(0, 2)
|
||||
.map(tag => {
|
||||
const name = tag.nama_kategori_diet || '';
|
||||
const truncated = name.length > 12 ? name.substring(0, 12) + '...' : name;
|
||||
return `<span class="badge bg-secondary me-1 mb-1" title="${name}">${truncated} </span>`;
|
||||
}).join('')}
|
||||
${(menu.klasifikasiMenu || []).length > 2
|
||||
? `<span class="badge bg-secondary">+${(menu.klasifikasiMenu.length - 2)} lainnya</span>`
|
||||
${(menu.klasifikasiMenu || []).length > 2
|
||||
? `<span class="badge bg-secondary">+${menu.klasifikasiMenu.length - 2} lainnya</span>`
|
||||
: ''}
|
||||
</div>
|
||||
<!-- badge someday/normal (kiri-atas) -->
|
||||
<div class="position-absolute top-0 start-0 m-2">
|
||||
${menu.apakah_someday
|
||||
? '<span class="badge bg-success">Someday</span>'
|
||||
: '<span class="badge bg-warning text-dark">Normal</span>'}
|
||||
</div>
|
||||
|
||||
<!-- Tombol Order -->
|
||||
<div class="d-flex p-2 mt-auto">
|
||||
<button class="btn btn-outline-success w-50 me-2"
|
||||
onclick="orderMenu(this)"
|
||||
<!-- Label siang / sore (kanan-bawah gambar) -->
|
||||
<div class="position-absolute bottom-0 end-0 m-1 d-flex gap-1">
|
||||
${menu.apakah_menu_siang
|
||||
? '<div class="badge bg-warning text-dark d-flex align-items-center px-1" style="font-size:.55rem"><i class="fa fa-sun me-1" style="font-size:.5rem"></i>Siang</div>'
|
||||
: ''}
|
||||
${menu.apakah_menu_sore
|
||||
? '<div class="badge bg-info text-dark d-flex align-items-center px-1" style="font-size:.55rem"><i class="fa fa-moon me-1" style="font-size:.5rem"></i>Sore</div>'
|
||||
: ''}
|
||||
${!menu.apakah_menu_siang && !menu.apakah_menu_sore
|
||||
? '<div class="badge bg-danger d-flex align-items-center px-1" style="font-size:.55rem"><i class="fa fa-times-circle me-1" style="font-size:.5rem"></i>Tutup</div>'
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tanggal tersedia (chip scroll) -->
|
||||
<div class="d-flex align-items-center gap-1 mt-2 px-1">
|
||||
<small class="text-muted fw-semibold">Tersedia:</small>
|
||||
|
||||
<div class="flex-fill" style="min-width:0; max-width:100%;">
|
||||
<div class="d-flex gap-1 overflow-auto"
|
||||
style="font-size:.75rem; scrollbar-width:none; -ms-overflow-style:none;">
|
||||
${menu.apakah_someday
|
||||
? '<span class="badge bg-success" style="font-size:.75rem">Setiap hari</span>'
|
||||
: (Array.isArray(menu.dmph) && menu.dmph.length > 0
|
||||
? menu.dmph.slice(0, 6).map(d =>
|
||||
`<span class="badge text-success border" style="font-size:.75rem">${d.tgl_harian}</span>`
|
||||
).join('')
|
||||
: '<span class="badge bg-danger" style="font-size:.75rem">Tutup</span>')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Harga -->
|
||||
<!-- Harga 1 baris -->
|
||||
<div class="d-flex justify-content-between align-items-center text-muted small mt-1 px-1">
|
||||
<small>Karyawan</small>
|
||||
<strong class="text-success">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center text-muted small px-1">
|
||||
<small>Public</small>
|
||||
<strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="d-flex p-2 mt-auto ">
|
||||
<button class="btn btn-outline-success w-50 me-2"
|
||||
onclick="orderMenu(this)"
|
||||
data-id="${menu.master_menu_id || menu.master_paket_menu_id}"
|
||||
data-nama_menu="${menu.nama}"
|
||||
data-harga_karyawan="${menu.harga_karyawan}"
|
||||
@ -191,30 +202,28 @@
|
||||
data-foto="${menu.foto}"
|
||||
data-apakah_menu_sore="${menu.apakah_menu_sore}"
|
||||
data-apakah_menu_siang="${menu.apakah_menu_siang}"
|
||||
data-apakah_someday="${menu.apakah_someday}"
|
||||
>
|
||||
<i class="fa-solid fa-circle-info"></i> Detail
|
||||
data-apakah_someday="${menu.apakah_someday}">
|
||||
<i class="fa-solid fa-circle-info"></i> Detail
|
||||
</button>
|
||||
<button class="btn btn-success w-50"
|
||||
onclick="handleClick(this)"
|
||||
data-id="${menu.master_menu_id ?? menu.master_paket_menu_id}"
|
||||
data-nama_menu="${menu.nama}"
|
||||
data-harga_karyawan="${menu.harga_karyawan}"
|
||||
data-harga_public="${menu.harga_public}"
|
||||
data-jenis_menu="${menu.jenis_menu}"
|
||||
data-deskripsi="${menu.deskripsi}"
|
||||
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
||||
data-tgl_tersedia="${(menu.dmph || []).map(tgl => tgl.tgl_harian).join(', ')}"
|
||||
data-kalori="${(menu.kalori || []).map(kkal => kkal.nilai_kalori).join(', ')}"
|
||||
data-foto="${menu.foto}"
|
||||
data-apakah_menu_sore="${menu.apakah_menu_sore}"
|
||||
data-apakah_menu_siang="${menu.apakah_menu_siang}"
|
||||
data-apakah_someday="${menu.apakah_someday}"
|
||||
>
|
||||
<button class="btn btn-success w-50 "
|
||||
onclick="handleClick(this)"
|
||||
data-id="${menu.master_menu_id ?? menu.master_paket_menu_id}"
|
||||
data-nama_menu="${menu.nama}"
|
||||
data-harga_karyawan="${menu.harga_karyawan}"
|
||||
data-harga_public="${menu.harga_public}"
|
||||
data-jenis_menu="${menu.jenis_menu}"
|
||||
data-deskripsi="${menu.deskripsi}"
|
||||
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
||||
data-tgl_tersedia="${(menu.dmph || []).map(tgl => tgl.tgl_harian).join(', ')}"
|
||||
data-kalori="${(menu.kalori || []).map(kkal => kkal.nilai_kalori).join(', ')}"
|
||||
data-foto="${menu.foto}"
|
||||
data-apakah_menu_sore="${menu.apakah_menu_sore}"
|
||||
data-apakah_menu_siang="${menu.apakah_menu_siang}"
|
||||
data-apakah_someday="${menu.apakah_someday}">
|
||||
<i class="fas fa-shopping-cart me-1"></i> Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
@ -336,6 +345,7 @@
|
||||
if (menuNames.length > maxLength) {
|
||||
menuNames = menuNames.substring(0, maxLength).trim() + '...';
|
||||
}
|
||||
$('#menuBtn').removeClass('d-none');
|
||||
$('#floatingCartButton').removeClass('d-none');
|
||||
$('#floatingCartCount').text(cart.length);
|
||||
$('#floatingCartDesc').text(menuNames);
|
||||
@ -343,6 +353,7 @@
|
||||
} else {
|
||||
$cartCount.hide();
|
||||
$('#floatingCartButton').addClass('d-none');
|
||||
$('#menuBtn').addClass('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
@ -481,5 +492,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCartList() {
|
||||
const list = document.getElementById('cartList');
|
||||
list.classList.toggle('d-none');
|
||||
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
||||
renderCart(cart);
|
||||
|
||||
// jika baru dibuka, render & pasang listener
|
||||
if (!list.classList.contains('d-none')) {
|
||||
setTimeout(() => document.addEventListener('click', closeOnOutside, { once: true }), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCart(cart) {
|
||||
const body = document.getElementById('cartListBody');
|
||||
body.innerHTML = cart.length
|
||||
? cart.map((it, i) => `
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="small">${it.nama_menu}</span>
|
||||
<button class="btn btn-danger btn-sm" onclick="removeItem(${i})">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
`).join('')
|
||||
: '<p class="text-center text-muted m-0 py-2">Keranjang kosong</p>';
|
||||
if (cart.length === 0) {
|
||||
document.getElementById('cartList').classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(index) {
|
||||
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
||||
cart.splice(index, 1);
|
||||
sessionStorage.setItem('cart', JSON.stringify(cart));
|
||||
renderCart(cart);
|
||||
updateCartCount(cart.length);
|
||||
}
|
||||
|
||||
function closeOnOutside(e) {
|
||||
const list = document.getElementById('cartList');
|
||||
const removeButton = e.target.closest('button[onclick^="removeItem"]')
|
||||
if (!list.contains(e.target) && !document.getElementById('menuBtn').contains(e.target) && !removeButton) {
|
||||
list.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -58,36 +58,63 @@
|
||||
<span id="labelTanggalText">Menampilkan menu...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info d-flex align-items-center mb-3 shadow-sm rounded-3" role="alert">
|
||||
<i class="fa fa-user-md fa-lg me-2 text-primary"></i>
|
||||
<div>
|
||||
<strong>Konsultasi Gizi!</strong><br>
|
||||
Butuh rekomendasi menu sesuai kondisi Anda?
|
||||
<a href="#" class="alert-link">Lihat jadwal konsultasi & daftar sekarang</a>.
|
||||
<div class="alert alert-info mb-3 shadow-sm rounded-3" role="alert">
|
||||
<div class="d-flex align-items-center overflow-hidden">
|
||||
<div class="flex-grow-1">
|
||||
<marquee
|
||||
behavior="scroll"
|
||||
direction="left"
|
||||
scrollamount="4"
|
||||
onmouseover="this.stop()"
|
||||
onmouseout="this.start()"
|
||||
>
|
||||
<i class="fa fa-user-md fa-lg me-2 text-primary flex-shrink-0"></i>
|
||||
<strong>Konsultasi Gizi!</strong>
|
||||
Butuh rekomendasi menu sesuai kondisi Anda?
|
||||
<a href="#" class="alert-link">Lihat jadwal konsultasi & daftar sekarang</a>.
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="order_guest_id"></div>
|
||||
<div id="floatingCartButton"
|
||||
class="cart-floating bg-success text-white rounded d-none shadow-lg"
|
||||
onclick="checkout()"
|
||||
style="cursor: pointer; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 1050; width: 90%; max-width: 500px;">
|
||||
<div class="d-flex justify-content-between align-items-center px-3 py-2">
|
||||
<div>
|
||||
<strong><span id="floatingCartCount">0</span> item</strong><br>
|
||||
<small id="floatingCartDesc">Isi keranjang anda</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="btn btn-light btn-sm">
|
||||
<i class="fa-solid fa-cart-shopping text-success"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tombol Menu -->
|
||||
<button type="button" id="menuBtn"
|
||||
class="btn btn-danger position-fixed start-50 translate-middle-x
|
||||
rounded-pill shadow-lg d-flex align-items-center gap-2
|
||||
px-3 py-2 d-none"
|
||||
style="bottom: 75px; z-index: 1051; font-size: .8rem;" onclick="toggleCartList()">
|
||||
<i class="fa-solid fa-bell-concierge"></i>
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
<div id="cartList"
|
||||
class="position-fixed start-50 translate-middle-x bg-white rounded shadow-lg d-none"
|
||||
style="bottom: 125px; z-index: 1050; width: 90%; max-width: 420px; max-height: 45vh; overflow-y: auto;">
|
||||
<div class="p-2" id="cartListBody">
|
||||
<!-- diisi JS -->
|
||||
</div>
|
||||
<div class="d-flex gap-1 p-2 border-top">
|
||||
<a class="btn btn-sm btn-success flex-fill" href="/checkout">Pesan Sekarang</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Cart -->
|
||||
<div id="floatingCartButton"
|
||||
class="position-fixed start-50 translate-middle-x bg-success text-white
|
||||
rounded-pill shadow-lg d-none d-flex align-items-center
|
||||
justify-content-between px-3 py-2"
|
||||
onclick="checkout()"
|
||||
style="bottom: 15px; z-index: 1050; width: 90%; max-width: 420px; font-size: .8rem;">
|
||||
<div>
|
||||
<strong><span id="floatingCartCount">0</span> item</strong><br>
|
||||
<small id="floatingCartDesc">Lihat keranjang</small>
|
||||
</div>
|
||||
<div class="btn btn-light btn-sm rounded-circle">
|
||||
<i class="fa-solid fa-cart-shopping text-success"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="alert alert-info py-3 px-4 small border-start border-4 border-primary mt-3" role="alert">
|
||||
@ -173,5 +200,6 @@
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user