203 lines
10 KiB
PHP
203 lines
10 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
|
||
require_once __DIR__ . '/store.php';
|
||
|
||
$categories = store_categories();
|
||
$selectedCategory = (string)($_GET['category'] ?? 'all');
|
||
if (!isset($categories[$selectedCategory])) {
|
||
$selectedCategory = 'all';
|
||
}
|
||
|
||
$products = store_filtered_products($selectedCategory);
|
||
$summary = store_cart_summary();
|
||
$cartLines = array_slice($summary['lines'], 0, 3);
|
||
|
||
store_page_start(
|
||
'Toko Online Bakery',
|
||
'Pilih cake, roti, dan pastry favorit, simpan ke keranjang, checkout, lalu pantau status pesanan dari satu halaman.'
|
||
);
|
||
?>
|
||
<section class="hero-panel mb-4 mb-lg-5">
|
||
<div class="row g-4 align-items-center">
|
||
<div class="col-lg-7">
|
||
<span class="eyebrow">Initial MVP slice</span>
|
||
<h1 class="display-title">Belanja bakery tanpa alur yang berantakan.</h1>
|
||
<p class="lead-copy">
|
||
Katalog, keranjang, checkout, dan halaman status pesanan sekarang terhubung dalam satu alur yang rapi.
|
||
Cocok untuk validasi toko online berbasis PHP + MySQL sebelum lanjut ke admin panel penuh.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-2 mt-4">
|
||
<a class="btn btn-dark btn-lg" href="#catalog">Belanja sekarang</a>
|
||
<a class="btn btn-outline-secondary btn-lg" href="order_status.php">Cek status pesanan</a>
|
||
</div>
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value"><?= h((string)count(store_products())) ?></div>
|
||
<div class="metric-label">produk demo siap dijual</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value">1 tabel</div>
|
||
<div class="metric-label">pesanan tersimpan di MySQL</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="metric-card">
|
||
<div class="metric-value">4 status</div>
|
||
<div class="metric-label">progress order yang mudah dipahami</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<aside class="summary-card h-100">
|
||
<div class="card-kicker">Workflow pelanggan</div>
|
||
<h2 class="summary-title">Dari pilih produk sampai tracking status.</h2>
|
||
<ul class="list-clean compact-list mb-4">
|
||
<li><span class="list-index">1</span><span>Pelanggan pilih produk dari katalog atau halaman detail.</span></li>
|
||
<li><span class="list-index">2</span><span>Keranjang menyimpan item, quantity, subtotal, dan ongkir.</span></li>
|
||
<li><span class="list-index">3</span><span>Checkout membuat order number dan menyimpan data di sistem.</span></li>
|
||
<li><span class="list-index">4</span><span>Halaman status menampilkan detail pesanan dan instruksi pembayaran.</span></li>
|
||
</ul>
|
||
|
||
<div class="receipt-card">
|
||
<div class="receipt-card__head">
|
||
<span>Ringkasan keranjang</span>
|
||
<strong><?= h((string)store_cart_count()) ?> item</strong>
|
||
</div>
|
||
<?php if ($cartLines): ?>
|
||
<?php foreach ($cartLines as $line): ?>
|
||
<div class="receipt-line">
|
||
<span><?= h($line['product']['name']) ?> × <?= h((string)$line['quantity']) ?></span>
|
||
<strong><?= h(store_money((float)$line['line_total'])) ?></strong>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<div class="receipt-line receipt-line--total">
|
||
<span>Total sementara</span>
|
||
<strong><?= h(store_money((float)$summary['grand_total'])) ?></strong>
|
||
</div>
|
||
<a class="btn btn-dark w-100 mt-3" href="cart.php">Lanjutkan checkout</a>
|
||
<?php else: ?>
|
||
<p class="text-muted mb-3">Keranjang masih kosong. Tambahkan produk di bawah untuk mencoba alur checkout.</p>
|
||
<a class="btn btn-outline-secondary w-100" href="#catalog">Mulai dari katalog</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mb-4">
|
||
<div class="row g-3">
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Katalog yang langsung bisa dijual</div>
|
||
<p class="feature-card__copy">Ada kategori, harga, deskripsi singkat, dan halaman detail produk untuk tiap item.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Checkout tersimpan di sistem</div>
|
||
<p class="feature-card__copy">Order number dibuat otomatis, item pesanan disimpan di MySQL, dan status awal langsung tercatat.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="feature-card h-100">
|
||
<div class="feature-card__title">Status pesanan mandiri</div>
|
||
<p class="feature-card__copy">Pelanggan cukup masukkan kode pesanan dan email untuk melihat progress dan instruksi pembayaran.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="section-block">
|
||
<div class="section-heading d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3 mb-4">
|
||
<div>
|
||
<span class="eyebrow">Katalog Produk</span>
|
||
<h2 class="section-title">Pilihan cake, bread, dan pastry untuk toko demo.</h2>
|
||
<p class="section-copy mb-0">Gunakan katalog ini sebagai starting point sebelum menambahkan admin, stok, kupon, dan pembayaran real.</p>
|
||
</div>
|
||
<div class="d-flex flex-wrap gap-2 filter-pills" data-filter-bar>
|
||
<?php foreach ($categories as $key => $category): ?>
|
||
<?php $isActive = $key === $selectedCategory; ?>
|
||
<a class="filter-pill<?= $isActive ? ' is-active' : '' ?>" href="index.php?category=<?= h($key) ?>#catalog">
|
||
<?= h($category['label']) ?>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<?php foreach ($products as $product): ?>
|
||
<div class="col-sm-6 col-xl-4">
|
||
<article class="product-card h-100">
|
||
<div class="product-visual product-visual--<?= h($product['tone']) ?>">
|
||
<span class="product-visual__meta"><?= h($product['category_label']) ?></span>
|
||
<strong class="product-visual__code"><?= h($product['visual_code']) ?></strong>
|
||
<span class="product-visual__name"><?= h($product['name']) ?></span>
|
||
</div>
|
||
<div class="product-card__body">
|
||
<div class="d-flex align-items-start justify-content-between gap-3 mb-2">
|
||
<div>
|
||
<h3 class="product-card__title"><?= h($product['name']) ?></h3>
|
||
<p class="text-muted small mb-0"><?= h($product['lead_time']) ?></p>
|
||
</div>
|
||
<span class="price-tag"><?= h(store_money((float)$product['price'])) ?></span>
|
||
</div>
|
||
<p class="product-card__copy"><?= h($product['short_description']) ?></p>
|
||
<div class="detail-chip-group mb-3">
|
||
<?php foreach ($product['highlights'] as $highlight): ?>
|
||
<span class="detail-chip"><?= h($highlight) ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="d-flex flex-column gap-2 mt-auto">
|
||
<a class="btn btn-outline-secondary w-100" href="product.php?slug=<?= h($product['slug']) ?>">Lihat detail</a>
|
||
<form action="cart_action.php" method="post" class="d-grid" data-auto-disable>
|
||
<input type="hidden" name="action" value="add">
|
||
<input type="hidden" name="slug" value="<?= h($product['slug']) ?>">
|
||
<input type="hidden" name="quantity" value="1">
|
||
<input type="hidden" name="redirect_to" value="<?= h($_SERVER['REQUEST_URI'] ?? 'index.php') ?>">
|
||
<button class="btn btn-dark" type="submit">Tambah ke keranjang</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-block pt-0">
|
||
<div class="section-heading mb-4">
|
||
<span class="eyebrow">Cara Order</span>
|
||
<h2 class="section-title">Alur sederhana yang siap dipakai sebagai base toko online.</h2>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">01</div>
|
||
<h3>Pilih item</h3>
|
||
<p>Pelanggan lihat katalog, buka detail produk, lalu tambahkan item ke keranjang.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">02</div>
|
||
<h3>Checkout</h3>
|
||
<p>Isi nama, email, telepon, alamat, dan metode pembayaran. Order number dibuat otomatis.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="step-card h-100">
|
||
<div class="step-card__number">03</div>
|
||
<h3>Lacak status</h3>
|
||
<p>Gunakan order number dan email untuk melihat status pesanan dan instruksi pembayaran kapan saja.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php store_page_end(); ?>
|