260 lines
14 KiB
PHP
260 lines
14 KiB
PHP
@php
|
|
$cartItems = [
|
|
[
|
|
'id' => 1,
|
|
'name' => 'Oud Royal Premium',
|
|
'category' => 'Luxury Collection',
|
|
'size' => '50ml',
|
|
'price' => 1200000,
|
|
'image' => 'https://placehold.co/200x200/png?text=Oud+Royal',
|
|
'quantity' => 1,
|
|
],
|
|
[
|
|
'name' => 'Rose Velvet',
|
|
'category' => 'Floral Series',
|
|
'size' => '30ml',
|
|
'price' => 450000,
|
|
'image' => 'https://placehold.co/200x200/png?text=Rose+Velvet',
|
|
'quantity' => 2,
|
|
],
|
|
[
|
|
'name' => 'Ocean Breeze',
|
|
'category' => 'Fresh Collection',
|
|
'size' => '100ml',
|
|
'price' => 320000,
|
|
'image' => 'https://placehold.co/200x200/png?text=Ocean+Breeze',
|
|
'quantity' => 1,
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<div class="flex flex-col min-h-screen bg-white font-sans text-home-foreground">
|
|
|
|
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-32">
|
|
|
|
<div class="flex items-center justify-center mb-16">
|
|
<div class="flex items-center">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-home-primary text-white flex items-center justify-center font-bold shadow-lg shadow-home-primary/30">
|
|
1</div>
|
|
<span class="text-sm font-bold text-home-primary">Keranjang</span>
|
|
</div>
|
|
<div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
|
|
<div class="flex flex-col items-center gap-2 opacity-50">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
|
|
2</div>
|
|
<span class="text-sm font-medium">Pengiriman</span>
|
|
</div>
|
|
<div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
|
|
<div class="flex flex-col items-center gap-2 opacity-50">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
|
|
3</div>
|
|
<span class="text-sm font-medium">Pembayaran</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-bold text-home-primary mb-8">Keranjang Belanja <span
|
|
class="text-lg font-normal text-home-foreground/50 ml-2">(3 Item)</span></h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
|
|
|
<section class="lg:col-span-8 space-y-6">
|
|
|
|
<div
|
|
class="bg-home-foreground/5 rounded-xl p-4 flex items-center gap-3 text-sm text-home-foreground/80 border border-home-foreground/10">
|
|
<svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p>Pembelian di atas <strong>Rp 500.000</strong> berhak mendapatkan <span
|
|
class="font-bold text-home-primary">Gratis Ongkir</span>.</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
@foreach ($cartItems as $index => $item)
|
|
<article
|
|
class="cart-item bg-white rounded-2xl border border-home-foreground/10 p-6 flex flex-col sm:flex-row gap-6 hover:shadow-lg transition-shadow duration-300"
|
|
data-price="{{ $item['price'] }}">
|
|
<div class="w-full sm:w-32 h-32 bg-home-primary/5 rounded-xl overflow-hidden flex-shrink-0">
|
|
<img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col justify-between">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-bold text-home-primary uppercase tracking-wider mb-1">
|
|
{{ $item['category'] }}</p>
|
|
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $item['name'] }}</h3>
|
|
<p class="text-sm text-home-foreground/50">Ukuran: {{ $item['size'] }}</p>
|
|
</div>
|
|
<button class="text-home-foreground/40 hover:text-red-500 transition-colors p-2"
|
|
aria-label="Hapus item">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4 mt-4">
|
|
<div class="flex items-center border border-home-foreground/20 rounded-lg">
|
|
<button
|
|
class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
|
data-action="decrease">-</button>
|
|
<input type="text" value="{{ $item['quantity'] }}" readonly
|
|
class="qty-input w-10 text-center text-sm font-bold border-none focus:ring-0 text-home-foreground p-0">
|
|
<button
|
|
class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
|
data-action="increase">+</button>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-lg font-bold text-home-primary item-total">Rp
|
|
{{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-8 pt-8 border-t border-home-foreground/10">
|
|
<h3 class="text-xl font-bold text-home-foreground mb-6">Mungkin Anda Suka</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
@for ($i = 1; $i <= 4; $i++)
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-[4/5] bg-home-primary/5 rounded-xl overflow-hidden mb-3 relative">
|
|
<img src="https://placehold.co/300x400/png?text=Produk+{{ $i }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
<button
|
|
class="absolute bottom-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm text-home-primary hover:bg-home-primary hover:text-white transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<h4 class="font-bold text-sm text-home-foreground line-clamp-1">Parfum Rekomendasi
|
|
{{ $i }}</h4>
|
|
<p class="text-xs text-home-primary font-bold">Rp 299.000</p>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="lg:col-span-4 relative">
|
|
<div
|
|
class="sticky top-32 bg-white rounded-3xl border border-home-foreground/10 p-8 shadow-xl shadow-home-foreground/5">
|
|
<h2 class="text-xl font-bold text-home-foreground mb-6">Ringkasan Pesanan</h2>
|
|
|
|
<div class="space-y-4 mb-6">
|
|
<div class="flex justify-between text-home-foreground/70">
|
|
<span>Subtotal</span>
|
|
<span id="summary-subtotal" class="font-medium text-home-foreground">Rp 0</span>
|
|
</div>
|
|
<div class="flex justify-between text-home-foreground/70">
|
|
<span>Estimasi Pajak (11%)</span>
|
|
<span id="summary-tax" class="font-medium text-home-foreground">Rp 0</span>
|
|
</div>
|
|
<div class="flex justify-between text-green-600">
|
|
<span>Diskon</span>
|
|
<span class="font-medium">- Rp 0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label
|
|
class="block text-xs font-bold text-home-foreground/50 uppercase tracking-wider mb-2">Kode
|
|
Voucher</label>
|
|
<div class="flex gap-2">
|
|
<input type="text" placeholder="Masukkan kode"
|
|
class="flex-1 px-4 py-2 rounded-lg border border-home-foreground/20 text-sm focus:outline-none focus:border-home-primary transition-colors">
|
|
<button
|
|
class="bg-home-foreground text-white px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 transition-opacity">Gunakan</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-home-foreground/10 pt-4 mb-8">
|
|
<div class="flex justify-between items-end">
|
|
<span class="text-lg font-bold text-home-foreground">Total</span>
|
|
<span id="summary-total" class="text-2xl font-bold text-home-primary">Rp 0</span>
|
|
</div>
|
|
<p class="text-xs text-home-foreground/40 mt-1 text-right">Belum termasuk ongkos kirim</p>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-home-primary text-white font-bold py-4 rounded-xl hover:bg-home-secondary hover:text-home-primary transition-all duration-300 shadow-lg shadow-home-primary/20 flex items-center justify-center gap-2 group">
|
|
Checkout Sekarang
|
|
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cartItems = document.querySelectorAll('.cart-item');
|
|
const subtotalEl = document.getElementById('summary-subtotal');
|
|
const taxEl = document.getElementById('summary-tax');
|
|
const totalEl = document.getElementById('summary-total');
|
|
|
|
const formatRupiah = (number) => {
|
|
return 'Rp ' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
};
|
|
|
|
const updateSummary = () => {
|
|
let subtotal = 0;
|
|
document.querySelectorAll('.cart-item').forEach(item => {
|
|
const price = parseFloat(item.dataset.price);
|
|
const qty = parseInt(item.querySelector('.qty-input').value);
|
|
subtotal += price * qty;
|
|
});
|
|
|
|
const tax = subtotal * 0.11;
|
|
const total = subtotal + tax;
|
|
|
|
if (subtotalEl) subtotalEl.textContent = formatRupiah(subtotal);
|
|
if (taxEl) taxEl.textContent = formatRupiah(Math.round(tax));
|
|
if (totalEl) totalEl.textContent = formatRupiah(Math.round(total));
|
|
};
|
|
|
|
cartItems.forEach(item => {
|
|
const price = parseFloat(item.dataset.price);
|
|
const input = item.querySelector('.qty-input');
|
|
const totalDisplay = item.querySelector('.item-total');
|
|
const btns = item.querySelectorAll('.qty-btn');
|
|
|
|
btns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
let val = parseInt(input.value);
|
|
if (btn.dataset.action === 'increase') {
|
|
val++;
|
|
} else if (btn.dataset.action === 'decrease' && val > 1) {
|
|
val--;
|
|
}
|
|
input.value = val;
|
|
totalDisplay.textContent = formatRupiah(price * val);
|
|
updateSummary();
|
|
});
|
|
});
|
|
});
|
|
|
|
updateSummary();
|
|
});
|
|
</script>
|