checkout + moved cart to only show on product relevant pages
This commit is contained in:
parent
bc75aef3c6
commit
a362c9a7ce
6 changed files with 229 additions and 139 deletions
213
src/lib/components/checkout.svelte
Normal file
213
src/lib/components/checkout.svelte
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<script lang="ts">
|
||||
import { cart } from '$lib/stores/cart';
|
||||
|
||||
let formData = {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
country: '',
|
||||
phoneNumber: '',
|
||||
district: '',
|
||||
block: '',
|
||||
street: '',
|
||||
avenue: '',
|
||||
buildingNumber: ''
|
||||
};
|
||||
|
||||
function handleSubmit() {
|
||||
// Here you'll integrate payment processing later
|
||||
console.log('Form submitted:', formData);
|
||||
console.log('Cart items:', $cart);
|
||||
}
|
||||
|
||||
function calculateTotal(items: any[]) {
|
||||
return items.reduce((sum, item) =>
|
||||
sum + (item.variant.calculated_price.calculated_amount * item.quantity), 0
|
||||
).toFixed(2);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Order Summary -->
|
||||
<div class="lg:col-span-1 h-fit bg-base-200 rounded-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-4">Order Summary</h2>
|
||||
<div class="space-y-3 mb-4">
|
||||
{#each $cart as item}
|
||||
<div class="flex justify-between items-start text-sm border-b border-base-300 pb-2">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">{item.product.title}</p>
|
||||
<p class="text-xs text-base-content/70">
|
||||
{item.variant.title} × {item.quantity}
|
||||
</p>
|
||||
</div>
|
||||
<p class="font-medium ml-4">{(item.variant.calculated_price.calculated_amount * item.quantity).toFixed(2)} €</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center pt-4">
|
||||
<span class="text-lg font-bold">Total:</span>
|
||||
<span class="text-lg font-bold">{calculateTotal($cart)} €</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Details Form -->
|
||||
<form class="lg:col-span-2 space-y-6 bg-base-200 rounded-lg p-6" on:submit|preventDefault={handleSubmit}>
|
||||
<h2 class="text-xl font-bold">Shipping Details</h2>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="firstName">
|
||||
<span class="label-text">First Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.firstName}
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="lastName">
|
||||
<span class="label-text">Last Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.lastName}
|
||||
placeholder="Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.email}
|
||||
placeholder="john.doe@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="country">
|
||||
<span class="label-text">Country</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.country}
|
||||
placeholder="Kuwait"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="phoneNumber">
|
||||
<span class="label-text">Phone Number</span>
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phoneNumber"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.phoneNumber}
|
||||
placeholder="+96596596596"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="district">
|
||||
<span class="label-text">District</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="district"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.district}
|
||||
placeholder="Al-Rai"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="block">
|
||||
<span class="label-text">Block</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="block"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.block}
|
||||
placeholder="2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="street">
|
||||
<span class="label-text">Street</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="street"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.street}
|
||||
placeholder="203"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="avenue">
|
||||
<span class="label-text">Avenue (optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="avenue"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.avenue}
|
||||
placeholder="31"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="buildingNumber">
|
||||
<span class="label-text">Building Number</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="buildingNumber"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.buildingNumber}
|
||||
placeholder="12"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full">
|
||||
Continue to Payment
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,7 @@ function createCartStore() {
|
|||
autoCloseTimeout = window.setTimeout(() => {
|
||||
isOpenStore.set(false);
|
||||
autoCloseTimeout = undefined;
|
||||
}, 2000);
|
||||
}, 800);
|
||||
},
|
||||
updateQuantity: (index: number, quantity: number) => {
|
||||
update(items => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import Header from '$lib/components/Header.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import MiniCart from '$lib/components/mini-cart.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -18,9 +17,6 @@
|
|||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
<!-- Mini Cart -->
|
||||
<MiniCart />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,136 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { cart } from '$lib/stores/cart';
|
||||
import Checkout from '$lib/components/checkout.svelte';
|
||||
|
||||
let formData = {
|
||||
name: '',
|
||||
email: '',
|
||||
country: '',
|
||||
address: '',
|
||||
city: '',
|
||||
postalCode: ''
|
||||
};
|
||||
|
||||
function handleSubmit() {
|
||||
// Here you'll integrate payment processing later
|
||||
console.log('Form submitted:', formData);
|
||||
console.log('Cart items:', $cart);
|
||||
}
|
||||
|
||||
function calculateTotal(items: any[]) {
|
||||
return items.reduce((sum, item) =>
|
||||
sum + (item.variant.calculated_price.calculated_amount * item.quantity), 0
|
||||
).toFixed(2);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Order Summary -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Order Summary</h2>
|
||||
{#each $cart as item}
|
||||
<div class="flex justify-between items-center p-4 bg-base-200 rounded-lg">
|
||||
<div>
|
||||
<h3 class="font-bold">{item.product.title}</h3>
|
||||
<p class="text-sm">{item.variant.title}</p>
|
||||
<p class="text-sm">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
<p class="font-bold">{(item.variant.calculated_price.calculated_amount * item.quantity).toFixed(2)} €</p>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="flex justify-between items-center p-4 bg-base-300 rounded-lg">
|
||||
<span class="font-bold">Total:</span>
|
||||
<span class="font-bold">{calculateTotal($cart)} €</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Details Form -->
|
||||
<form class="space-y-4" on:submit|preventDefault={handleSubmit}>
|
||||
<h2 class="text-2xl font-bold">Shipping Details</h2>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
<span class="label-text">Full Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.name}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.email}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="country">
|
||||
<span class="label-text">Country</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.country}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="address">
|
||||
<span class="label-text">Address</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="address"
|
||||
class="textarea textarea-bordered"
|
||||
bind:value={formData.address}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="city">
|
||||
<span class="label-text">City</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.city}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="postalCode">
|
||||
<span class="label-text">Postal Code</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="postalCode"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.postalCode}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full">
|
||||
Continue to Payment
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<Checkout />
|
||||
</div>
|
||||
|
|
|
|||
10
src/routes/products/+layout.svelte
Normal file
10
src/routes/products/+layout.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script lang="ts">
|
||||
import MiniCart from '$lib/components/mini-cart.svelte';
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<slot />
|
||||
|
||||
<!-- Mini Cart - only shows on products pages -->
|
||||
<MiniCart />
|
||||
</div>
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import SingleProduct from '$lib/components/single-product.svelte';
|
||||
import type { MedusaResponse } from '$lib/types/medusa';
|
||||
|
||||
export let data: PageData;
|
||||
export let data: MedusaResponse;
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
|
|
|
|||
Loading…
Reference in a new issue