Skip to content

Commit

Permalink
...
Browse files Browse the repository at this point in the history
  • Loading branch information
@DotNetTitan
DotNetTitan committed Sep 5, 2024
1 parent e2c286d commit 370bff3
Showing 1 changed file with 30 additions and 28 deletions.
58 changes: 30 additions & 28 deletions src/views/CartView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,60 @@
<template>
<div class="cart min-h-screen p-4 sm:p-8 bg-gray-900 text-white">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold mb-8">Your Cart</h1>
<h1 class="text-3xl sm:text-4xl font-bold mb-6 sm:mb-8">Your Cart</h1>
<div v-if="cartStore.cartItems.length > 0">
<ul class="space-y-4">
<li v-for="item in cartStore.cartItems" :key="item.id" class="bg-gray-800 p-6 rounded-lg shadow-md">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<img :src="item.thumbnail" :alt="item.title" class="w-20 h-20 object-cover rounded-md">
<li v-for="item in cartStore.cartItems" :key="item.id" class="bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
<div class="flex items-center space-x-4 mb-4 sm:mb-0">
<img :src="item.thumbnail" :alt="item.title" class="w-16 h-16 sm:w-20 sm:h-20 object-cover rounded-md">
<div>
<h3 class="text-xl font-semibold">{{ item.title }}</h3>
<div class="flex items-baseline space-x-2 mt-1">
<span class="text-lg font-semibold text-green-400">${{ item.discountedPrice.toFixed(2) }}</span>
<h3 class="text-lg sm:text-xl font-semibold">{{ item.title }}</h3>
<div class="flex flex-wrap items-baseline space-x-2 mt-1">
<span class="text-base sm:text-lg font-semibold text-green-400">${{ item.discountedPrice.toFixed(2) }}</span>
<span class="text-sm text-gray-500 line-through">${{ item.price.toFixed(2) }}</span>
<span class="text-sm text-green-400">
{{ ((item.price - item.discountedPrice) / item.price * 100).toFixed(0) }}% off
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<button @click="decreaseQuantity(item.id)" class="bg-gray-700 text-white px-3 py-1 rounded-md hover:bg-gray-600 transition duration-300">-</button>
<span class="text-xl font-semibold px-2">{{ item.quantity }}</span>
<button @click="increaseQuantity(item.id)" class="bg-gray-700 text-white px-3 py-1 rounded-md hover:bg-gray-600 transition duration-300">+</button>
<div class="flex items-center justify-between sm:justify-end sm:space-x-4">
<div class="flex items-center space-x-2">
<button @click="decreaseQuantity(item.id)" class="bg-gray-700 text-white px-2 py-1 rounded-md hover:bg-gray-600 transition duration-300">-</button>
<span class="text-lg font-semibold px-2">{{ item.quantity }}</span>
<button @click="increaseQuantity(item.id)" class="bg-gray-700 text-white px-2 py-1 rounded-md hover:bg-gray-600 transition duration-300">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-400 hover:text-red-300 transition duration-300 ml-4">
Remove
</button>
</div>
</div>
<div class="mt-4 text-right">
<p class="text-sm text-gray-400">Total: ${{ (item.price * item.quantity).toFixed(2) }}</p>
<p class="text-sm text-green-400">
<div class="mt-4 text-right text-sm">
<p class="text-gray-400">Total: ${{ (item.price * item.quantity).toFixed(2) }}</p>
<p class="text-green-400">
Savings: ${{ ((item.price - item.discountedPrice) * item.quantity).toFixed(2) }}
</p>
<p class="text-sm text-white">Discounted Total: ${{ (item.discountedPrice * item.quantity).toFixed(2) }}</p>
<p class="text-white">Discounted Total: ${{ (item.discountedPrice * item.quantity).toFixed(2) }}</p>
</div>
</li>
</ul>
<div class="mt-8 bg-gray-800 p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<span class="text-xl">Subtotal</span>
<span class="text-xl font-semibold">${{ cartStore.subtotal.toFixed(2) }}</span>
<div class="mt-6 sm:mt-8 bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-3 sm:mb-4">
<span class="text-lg sm:text-xl">Subtotal</span>
<span class="text-lg sm:text-xl font-semibold">${{ cartStore.subtotal.toFixed(2) }}</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-xl">Discounted Subtotal</span>
<span class="text-xl font-semibold text-white">${{ cartStore.discountedSubtotal.toFixed(2) }}</span>
<div class="flex justify-between items-center mb-3 sm:mb-4">
<span class="text-lg sm:text-xl">Discounted Subtotal</span>
<span class="text-lg sm:text-xl font-semibold text-white">${{ cartStore.discountedSubtotal.toFixed(2) }}</span>
</div>
<div class="flex justify-between items-center mb-6 text-green-400 font-semibold">
<span class="text-xl">Total Savings</span>
<span class="text-xl">${{ cartStore.totalSavings.toFixed(2) }}</span>
<div class="flex justify-between items-center mb-5 sm:mb-6 text-green-400 font-semibold">
<span class="text-lg sm:text-xl">Total Savings</span>
<span class="text-lg sm:text-xl">${{ cartStore.totalSavings.toFixed(2) }}</span>
</div>
<button class="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
<span class="text-lg font-semibold">Proceed to Checkout</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<span class="text-base sm:text-lg font-semibold">Proceed to Checkout</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
Expand Down

0 comments on commit 370bff3

Please sign in to comment.