pojok-coffee/checkout.html at main · hasbihasbullh/pojok-coffee · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required Meta Tags Always Come First -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>Checkout | PojokCoffee</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- TAILWIND CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
    <header class="flex flex-wrap lg:justify-start lg:flex-nowrap z-50 w-full py-7">
        <nav class="relative max-w-7xl w-full flex flex-wrap lg:grid lg:grid-cols-12 basis-full items-center px-4 md:px-6 lg:px-8 mx-auto">
          <div class="lg:col-span-3 flex items-center">
            <!-- Logo -->
            <a class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="index.html" aria-label="PojokCoffee">
              <img class="w-28 h-auto" src="assets/img/logo.svg" alt="PojokCoffee Logo">
            </a>
            <!-- End Logo -->
          </div>

          <!-- Button Group -->
          <div class="flex items-center gap-x-1 lg:gap-x-2 ms-auto py-1 lg:ps-6 lg:order-3 lg:col-span-3">
            <a href="bag.html" class="size-9.5 relative flex justify-center items-center rounded-xl bg-white border border-gray-200 text-black hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
              <span class="sr-only">Cart</span>
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="8" cy="21" r="1" />
                <circle cx="19" cy="21" r="1" />
                <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
              </svg>
              <!-- Tambahkan ini untuk menampilkan jumlah item -->
              <span id="cart-item-count" class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center" style="display: none;">0</span>
            </a>
            <a href="sign-in.html" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium text-nowrap rounded-xl border border-transparent bg-[#6D3D18] text-white hover:bg-[#5A3214] focus:outline-hidden focus:bg-[#5A3214] transition disabled:opacity-50 disabled:pointer-events-none">
              Sign in
            </a>

            <div class="lg:hidden">
              <button type="button" class="hs-collapse-toggle size-9.5 flex justify-center items-center text-sm font-semibold rounded-xl border border-gray-200 text-black hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none text-black border-gray-200 hover:bg-gray-100 focus:bg-gray-100" id="hs-pro-hcail-collapse" aria-expanded="false" aria-controls="hs-pro-hcail" aria-label="Toggle navigation" data-hs-collapse="#hs-pro-hcail">
                <svg class="hs-collapse-open:hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="3" x2="21" y1="6" y2="6" />
                  <line x1="3" x2="21" y1="12" y2="12" />
                  <line x1="3" x2="21" y1="18" y2="18" />
                </svg>
                <svg class="hs-collapse-open:block hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 6 6 18" />
                  <path d="m6 6 12 12" />
                </svg>
              </button>
            </div>
          </div>
          <!-- End Button Group -->

          <!-- Collapse -->
      <div id="hs-pro-hcail" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow lg:block lg:w-auto lg:basis-auto lg:order-2 lg:col-span-6" aria-labelledby="hs-pro-hcail-collapse">
        <div class="flex flex-col gap-y-4 gap-x-0 mt-5 lg:flex-row lg:justify-center lg:items-center lg:gap-y-0 lg:gap-x-7 lg:mt-0">
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="index.html">Home</a></div>
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="product.html">Product</a></div>
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="blog.html">Blog</a></div>
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="faq.html">FAQ</a></div>
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="contact.html" aria-current="page">Kontak</a></div>
          <div><a class="inline-block text-black hover:text-gray-600 focus:outline-hidden" href="about-us.html">Tentang Kami</a></div>
        </div>
      </div>
      <!-- End Collapse -->
        </nav>
    </header>

    <main id="content" class="max-w-7xl px-4 sm:px-6 lg:px-8 py-12 mx-auto">
        <h1 class="text-3xl font-bold mb-6">Checkout</h1>
        <form id="checkout-form" class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
            <!-- Kolom Kiri: Informasi Pengiriman & Pembayaran -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-gray-100 p-6 rounded-lg">
                    <h2 class="text-xl font-semibold mb-4">Informasi Pengiriman</h2>
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Nama Lengkap</label>
                        <input type="text" id="name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-[#6D3D18] focus:ring-[#6D3D18]">
                    </div>
                    <div class="mt-4"> <!-- Tambahkan margin-top untuk jarak antar div -->
                        <label for="address" class="block text-sm font-medium text-gray-700">Alamat Lengkap</label>
                        <textarea id="address" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-[#6D3D18] focus:ring-[#6D3D18]"></textarea>
                    </div>
                    <div class="mt-4"> <!-- Tambahkan margin-top untuk jarak antar div -->
                        <label for="phone" class="block text-sm font-medium text-gray-700">Nomor Telepon</label>
                        <input type="tel" id="phone" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-[#6D3D18] focus:ring-[#6D3D18]">
                    </div>
                </div>

                <div class="bg-gray-100 p-6 rounded-lg">
                    <h2 class="text-xl font-semibold mb-4">Metode Pembayaran</h2>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Pilih Metode Pembayaran</label>
                        <select id="payment-method" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-[#6D3D18] focus:ring-[#6D3D18]">
                            <option value="">Pilih Metode Pembayaran</option>
                            <option value="credit-card">Kartu Kredit (Simulasi)</option>
                            <option value="bank-transfer">Transfer Bank (Simulasi)</option>
                            <option value="e-wallet">E-Wallet (Simulasi)</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Kolom Kanan: Ringkasan Pesanan & Tombol Konfirmasi -->
            <div class="lg:col-span-1">
                <div class="bg-gray-100 p-6 rounded-lg sticky top-24"> <!-- sticky top-24 agar ringkasan ikut scroll -->
                    <h2 class="text-xl font-semibold mb-4">Ringkasan Pesanan</h2>
                    <div id="order-summary-items" class="space-y-2 border-b pb-4 mb-4">
                        <!-- Order summary items will be populated here by JavaScript -->
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between font-semibold">
                            <span>Subtotal</span>
                            <span id="checkout-subtotal">Rp 0</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Biaya Pengiriman</span>
                            <span id="checkout-shipping">Rp 0</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Pajak (10%)</span>
                            <span id="checkout-tax">Rp 0</span>
                        </div>
                        <div class="flex justify-between font-semibold text-xl mt-4 pt-4 border-t border-gray-200">
                            <span>Total</span>
                            <span id="checkout-total">Rp 0</span>
                        </div>
                    </div>
                    <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-lg font-semibold rounded-lg border border-transparent bg-[#6D3D18] text-white hover:bg-[#5A3214] mt-6">
                        Konfirmasi Pesanan
                    </button>
                </div>
            </div>
        </form>
    </main>


    <footer class="mt-auto border-t md:border-t-0 border-gray-200">
        <div class="w-full max-w-7xl py-10 md:pt-0 px-4 sm:px-6 lg:px-8 mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 items-center gap-5">
                <div class="text-center md:text-start">
                    <a class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="index.html" aria-label="PojokCoffee">
                        <img class="w-28 h-auto" src="assets/img/logo.svg" alt="PojokCoffee Logo">
                    </a>
                </div>
                <div class="text-center text-sm text-black">Copyright © 2025 PojokCoffee. All rights reserved.</div>
                <div class="text-center md:text-end space-x-2">
                    <a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-black hover:text-gray-600 disabled:opacity-50 disabled:pointer-events-none" href="#"><img src="https://img.icons8.com/?size=100&id=32309&format=png&color=6D3D18" alt="Social Media Icon" class="shrink-0 w-6 h-6"></a>
                    <a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-black hover:text-gray-600 disabled:opacity-50 disabled:pointer-events-none" href="#"><img src="https://img.icons8.com/?size=100&id=A4DsujzAX4rw&format=png&color=6D3D18" alt="Social Media Icon" class="shrink-0 w-6 h-6"></a>
                    <a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-black hover:text-gray-600 disabled:opacity-50 disabled:pointer-events-none" href="#"><img src="https://img.icons8.com/?size=100&id=37326&format=png&color=6D3D18" alt="Social Media Icon" class="shrink-0 w-6 h-6"></a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JS Implementing Plugins -->

    <!-- JS PLUGINS -->
    <!-- Required plugins -->
    <script src="https://cdn.jsdelivr.net/npm/preline/dist/index.js"></script>

    <!-- JS THIRD PARTY PLUGINS -->
    <!-- Google Analytics. Global site tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B73TDMXKF5"></script>
    <script src="assets/js/script.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Ambil data keranjang dari localStorage
            const currentCart = JSON.parse(localStorage.getItem('shoppingCart')) || [];
            const orderSummaryItems = document.getElementById('order-summary-items'); // ID diubah
            const checkoutSubtotalElement = document.getElementById('checkout-subtotal');
            const checkoutShippingElement = document.getElementById('checkout-shipping');
            const checkoutTaxElement = document.getElementById('checkout-tax');
            const checkoutTotalElement = document.getElementById('checkout-total');
            const checkoutForm = document.getElementById('checkout-form');
            const paymentMethodSelect = document.getElementById('payment-method');

            if (currentCart.length === 0) {
                orderSummaryItems.innerHTML = '<p class="text-center text-red-500">Keranjang Anda kosong. Silakan tambahkan produk sebelum checkout.</p>';
                if (checkoutForm) checkoutForm.style.display = 'none'; // Hide the form if cart is empty
                return;
            }

            let subtotal = 0;
            orderSummaryItems.innerHTML = ''; // Clear previous content
            currentCart.forEach(item => {
                const itemTotal = item.price * item.quantity;
                subtotal += itemTotal;
                orderSummaryItems.innerHTML += `
                    <div class="flex justify-between">
                        <span>${item.name} (x${item.quantity})</span>
                        <span>Rp ${itemTotal.toLocaleString("id-ID")}</span>
                    </div>
                `;
            });

            const shippingCost = 15000; // Example fixed shipping cost
            const taxRate = 0.10; // 10% tax
            const tax = subtotal * taxRate;
            const total = subtotal + shippingCost + tax;

            checkoutSubtotalElement.textContent = `Rp ${subtotal.toLocaleString("id-ID")}`;
            checkoutShippingElement.textContent = `Rp ${shippingCost.toLocaleString("id-ID")}`;
            checkoutTaxElement.textContent = `Rp ${tax.toLocaleString("id-ID")}`;
            checkoutTotalElement.textContent = `Rp ${total.toLocaleString("id-ID")}`;

            // Simpan ringkasan pesanan ke localStorage untuk ditampilkan di halaman konfirmasi
            const orderDetails = {
                items: currentCart,
                subtotal: subtotal,
                shipping: shippingCost,
                tax: tax,
                total: total,
                paymentMethod: '', // Akan diisi saat submit
                customerName: '', // Akan diisi saat submit
                customerAddress: '', // Akan diisi saat submit
                customerPhone: '', // Akan diisi saat submit
                orderDate: new Date().toLocaleString()
            };
            localStorage.setItem('lastOrderDetails', JSON.stringify(orderDetails));


            if (checkoutForm) {
                checkoutForm.addEventListener('submit', function(event) {
                    event.preventDefault();

                    // Validasi sederhana untuk metode pembayaran
                    if (paymentMethodSelect.value === "") {
                        alert("Mohon pilih metode pembayaran.");
                        return;
                    }

                    // Update orderDetails dengan info pelanggan dan metode pembayaran
                    orderDetails.paymentMethod = paymentMethodSelect.value;
                    orderDetails.customerName = document.getElementById('name').value;
                    orderDetails.customerAddress = document.getElementById('address').value;
                    orderDetails.customerPhone = document.getElementById('phone').value;
                    localStorage.setItem('lastOrderDetails', JSON.stringify(orderDetails));

                    alert('Pesanan Anda telah dikonfirmasi! Terima kasih telah berbelanja di PojokCoffee.');
                    localStorage.removeItem('shoppingCart'); // Clear cart after checkout
                    updateCartDisplay(); // Perbarui ikon keranjang di header
                    window.location.href = 'order-confirmation.html'; // Redirect to order confirmation page
                });
            }
        });
    </script>
</body>
</html>