kusowl 9000ea0052 feature: fetch cart products from api
- show total cart item count on header
- fetch and show cart items on cart modal
2026-03-09 19:04:31 +05:30

25 lines
1.1 KiB
HTML

<li class="px-2! py-4! border-b border-b-gray-200">
<div class="flex space-x-5">
<div class="w-20 h-20 bg-gray-100 p-2 rounded-xl">
<img [src]="cartItem.image" class="object-cover h-full w-full rounded-lg" />
</div>
<div class="flex-1 flex flex-col">
<p class="text-sm truncate max-w-30 mt-2">{{ cartItem.title }}</p>
<div class="mt-auto flex space-x-4 items-center text-gray-600">
<p class="text-sm">Rs. {{ cartItem.price }} x {{ cartItem.quantity }}</p>
<button class="active:scale-80" title="Remove Item">
<lucide-angular [name]="TrashIcon" class="w-3" />
</button>
</div>
</div>
<div class="flex flex-col">
<p class="mt-2 font-medium flex-1">Rs. {{ cartItem.subtotal }}</p>
<div class="flex max-h-7 text-xs text-center text-gray-700">
<button class="btn btn-ghost py-1! px-2 rounded-r-none!">-</button>
<p class="py-1 px-2 border-y border-y-gray-300">{{ cartItem.quantity }}</p>
<button class="btn py-1! btn-ghost px-2 rounded-l-none!">+</button>
</div>
</div>
</div>
</li>