Skip to content

Commit ca6aad1

Browse files
fazleyrabbyfazleyrabby
committed
feat: cart page ui update
1 parent 081479b commit ca6aad1

File tree

2 files changed

+86
-81
lines changed

2 files changed

+86
-81
lines changed

‎resources/views/frontend/pages/cart.blade.php‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,88 +8,93 @@
88
x-html="`Cart (${Object.keys($store.cart.items).length})`"></h1>
99
</header>
1010
<div class="mt-8">
11-
<ul class="space-y-4">
12-
<template x-if="Object.keys($store.cart.items).length === 0">
13-
<li class="text-gray-500 text-sm">Your cart is empty.</li>
14-
</template>
15-
<template x-for="(item, key) in $store.cart.items" :key="key">
16-
<li class="flex items-center gap-4">
17-
<img :src="item.image" alt="" class="size-16 rounded-sm object-cover" />
18-
<div>
19-
<h3 class="text-sm text-gray-900" x-text="item.title"></h3>
20-
</div>
21-
<div class="flex flex-1 items-center justify-end gap-2">
22-
<form>
23-
<label for="Line1Qty" class="sr-only"> Quantity </label>
24-
25-
<select @change="$store.cart.updateQuantity(key, +$event.target.value)"
26-
class="h-8 w-14 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600">
27-
<template x-for="qty in 10" :key="qty">
28-
<option :value="qty" x-text="qty"
29-
:selected="qty === item.quantity"></option>
30-
</template>
31-
</select>
32-
</form>
33-
34-
<button class="text-gray-600 transition hover:text-red-600 cursor-pointer"
35-
@click="$store.cart.removeItem(key)">
36-
<span class="sr-only">Remove item</span>
37-
38-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
39-
stroke-width="1.5" stroke="currentColor" class="size-4">
40-
<path stroke-linecap="round" stroke-linejoin="round"
41-
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
42-
</svg>
43-
</button>
44-
</div>
45-
</li>
46-
</template>
47-
</ul>
11+
<div class="mt-8">
12+
<div class="overflow-x-auto">
13+
<table class="table w-full">
14+
<thead>
15+
<tr>
16+
<th>Item</th>
17+
<th>Price</th>
18+
<th>Quantity</th>
19+
<th>Total</th>
20+
<th></th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<template x-if="Object.keys($store.cart.items).length === 0">
25+
<tr>
26+
<td colspan="5" class="text-center text-gray-500 text-sm">Your cart is empty.
27+
</td>
28+
</tr>
29+
</template>
30+
<template x-for="(item, key) in $store.cart.items" :key="key">
31+
<tr>
32+
<td>
33+
<div class="flex items-center gap-3">
34+
<div class="avatar">
35+
<div class="mask mask-squircle w-12 h-12">
36+
<img :src="item.image" alt="" />
37+
</div>
38+
</div>
39+
<div>
40+
<div class="font-bold" x-text="item.title"></div>
41+
</div>
42+
</div>
43+
</td>
44+
<td>
45+
<span x-text="`$${parseFloat(item.price).toFixed(2)}`"></span>
46+
</td>
47+
<td>
48+
<select @change="$store.cart.updateQuantity(key, +$event.target.value)"
49+
class="select select-bordered select-sm w-full max-w-xs">
50+
<template x-for="qty in 10" :key="qty">
51+
<option :value="qty" x-text="qty"
52+
:selected="qty === item.quantity"></option>
53+
</template>
54+
</select>
55+
</td>
56+
<td>
57+
<span
58+
x-text="`$${(parseFloat(item.price) * item.quantity).toFixed(2)}`"></span>
59+
</td>
60+
<th>
61+
<button class="btn btn-ghost btn-xs text-red-600"
62+
@click="$store.cart.removeItem(key)">
63+
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
64+
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
65+
class="size-4">
66+
<path stroke-linecap="round" stroke-linejoin="round"
67+
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
68+
</svg>
69+
</button>
70+
</th>
71+
</tr>
72+
</template>
73+
</tbody>
74+
</table>
75+
</div>
4876

49-
<div class="mt-8 flex justify-end border-t border-gray-100 pt-8">
50-
<div class="w-screen max-w-lg space-y-4">
51-
<template x-if="Object.keys($store.cart.items).length > 0">
52-
<dl class="space-y-0.5 text-sm text-gray-700">
53-
<div class="flex justify-between">
54-
<dt>Subtotal</dt>
55-
<dd x-text="$store.cart.total"></dd>
77+
<div class="mt-8 flex justify-end border-t border-gray-200 pt-8">
78+
<div class="w-full max-w-lg space-y-4">
79+
<template x-if="Object.keys($store.cart.items).length > 0">
80+
<div class="space-y-0.5 text-sm text-gray-700">
81+
<div class="flex justify-between">
82+
<div class="font-bold">Subtotal</div>
83+
<div x-text="`$${parseFloat($store.cart.total).toFixed(2)}`"></div>
84+
</div>
85+
<div class="flex justify-between !text-base font-medium">
86+
<div class="font-bold">Total</div>
87+
<div x-text="`$${parseFloat($store.cart.total).toFixed(2)}`"></div>
88+
</div>
5689
</div>
57-
58-
{{-- <div class="flex justify-between">
59-
<dt>VAT</dt>
60-
<dd>£25</dd>
61-
</div> --}}
62-
63-
{{-- <div class="flex justify-between">
64-
<dt>Discount</dt>
65-
<dd>-£20</dd>
66-
</div> --}}
67-
68-
<div class="flex justify-between !text-base font-medium">
69-
<dt>Total</dt>
70-
<dd x-text="$store.cart.total"></dd>
90+
</template>
91+
<template x-if="Object.keys($store.cart.items).length > 0">
92+
<div class="flex justify-end">
93+
<a class="btn btn-neutral"
94+
href="{{ route('frontend.checkout.index') }}">Checkout</a>
7195
</div>
72-
</dl>
73-
</template>
74-
75-
{{-- <div class="flex justify-end">
76-
<span
77-
class="inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-indigo-700">
78-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
79-
stroke-width="1.5" stroke="currentColor" class="-ms-1 me-1.5 size-4">
80-
<path stroke-linecap="round" stroke-linejoin="round"
81-
d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z" />
82-
</svg>
83-
84-
<p class="text-xs whitespace-nowrap">2 Discounts Applied</p>
85-
</span>
86-
</div> --}}
87-
88-
<template x-if="Object.keys($store.cart.items).length > 0">
89-
<div class="flex justify-end">
90-
<a class="block rounded-sm bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600" href="{{ route('frontend.checkout.index') }}">Checkout</a>
91-
</div>
92-
</template>
96+
</template>
97+
</div>
9398
</div>
9499
</div>
95100
</div>

‎resources/views/frontend/products/index.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,8 +253,8 @@ class="h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm
253253

254254
<p class="mt-1.5 text-sm text-gray-700">${{ $product->price }}</p>
255255

256-
<div x-data="cart">
257-
<button type="button" @click="addToCart({{ $product->id }})"
256+
<div x-data="cart({{ $product->id }})">
257+
<button type="button" @click="addToCart()"
258258
class="btn mt-4 block w-full btn-neutral">
259259
Add to Cart
260260
</button>

0 commit comments

Comments
 (0)