bam
/
my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor Cart UI to Enhance Responsiveness and User Experience 

- Replaced CartSheet and CartSidebar components with a new CartResponsive component that adapts to screen size, providing a unified cart experience.
- Implemented responsive animations for the cart, allowing it to slide in from the right on desktop and from the bottom on mobile.
- Updated styles and layout in tailwind.css to support new animation effects for the cart component.
main
Bastian Masanek 1 month ago
parent
1349f42f41
commit
808b62645f
6 changed files with 184 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      app/app.vue
  2. 14
      app/components/Cart/CartResponsive.vue
  3. 66
      app/components/Cart/CartSheet.vue
  4. 3
      app/components/Cart/index.ts
  5. 13
      app/layouts/default.vue
  6. 164
      assets/css/tailwind.css

10
app/app.vue
View File

@ -9,9 +9,7 @@
// 15px, which shifted the entire page content 15px to the left. This prop prevents
// that unwanted padding injection and layout shift.
import { ConfigProvider } from 'reka-ui'
// Import cart UI components
const { isMobile } = useCartUI()
import CartResponsive from '~/components/Cart/CartResponsive.vue'
</script>
<template>
@ -19,10 +17,8 @@ const { isMobile } = useCartUI()
<div>
<NuxtPage />
<!-- Cart UI: Render appropriate component based on screen size -->
<!-- Mobile: Bottom sheet, Desktop: Right sidebar -->
<CartSheet v-if="isMobile" />
<CartSidebar v-else />
<!-- Responsive Cart: Slides from right on desktop, bottom on mobile -->
<CartResponsive />
</div>
</ConfigProvider>
</template>

14
app/components/Cart/CartSidebar.vue → app/components/Cart/CartResponsive.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'
import {
Sheet,
SheetContent,
@ -14,6 +15,17 @@ import CartSummary from './CartSummary.vue'
const { items, itemCount, total, loading, updateItem, removeItem } = useCart()
const { isOpen, close } = useCartUI()
// Detect mobile viewport (< 640px = Tailwind sm breakpoint)
const isMobile = useMediaQuery('(max-width: 639px)')
// Responsive side prop: bottom for mobile, right for desktop
const side = computed(() => isMobile.value ? 'bottom' : 'right')
// Responsive sizing classes
const sizeClasses = computed(() =>
isMobile.value ? 'h-[90vh]' : 'w-full sm:w-[400px]'
)
// Handle quantity update
async function handleUpdateQuantity(itemId: string, quantity: number) {
await updateItem(itemId, quantity)
@ -33,7 +45,7 @@ function handleCheckout() {
<template>
<Sheet :open="isOpen" @update:open="(open) => !open && close()">
<SheetContent side="right" class="w-full sm:w-[400px] p-0 flex flex-col">
<SheetContent :side="side" :class="[sizeClasses, 'p-0 flex flex-col']">
<!-- Header -->
<SheetHeader class="px-6 py-4 border-b">
<SheetTitle class="text-xl font-bold">

66
app/components/Cart/CartSheet.vue
View File

@ -1,66 +0,0 @@
<script setup lang="ts">
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet'
import { ScrollArea } from '@/components/ui/scroll-area'
import CartEmpty from './CartEmpty.vue'
import CartItem from './CartItem.vue'
import CartSummary from './CartSummary.vue'
// Get cart state and UI controls
const { items, itemCount, total, loading, updateItem, removeItem } = useCart()
const { isOpen, close } = useCartUI()
// Handle quantity update
async function handleUpdateQuantity(itemId: string, quantity: number) {
await updateItem(itemId, quantity)
}
// Handle item removal
async function handleRemoveItem(itemId: string) {
await removeItem(itemId)
}
// Navigate to checkout
function handleCheckout() {
close()
navigateTo('/checkout')
}
</script>
<template>
<Sheet :open="isOpen" @update:open="(open) => !open && close()">
<SheetContent side="bottom" class="h-[90vh] p-0 flex flex-col">
<!-- Header -->
<SheetHeader class="px-6 py-4 border-b">
<SheetTitle class="text-xl font-bold">
Warenkorb ({{ itemCount }})
</SheetTitle>
</SheetHeader>
<!-- Empty State -->
<div v-if="itemCount === 0" class="flex-1 flex items-center justify-center px-6">
<CartEmpty />
</div>
<!-- Cart Items + Summary -->
<template v-else>
<!-- Scrollable Items List -->
<ScrollArea class="flex-1 px-6">
<div class="space-y-4 py-4">
<CartItem v-for="item in items" :key="item.id" :item="item" :loading="loading"
@update:quantity="(qty) => handleUpdateQuantity(item.id, qty)" @remove="handleRemoveItem(item.id)" />
</div>
</ScrollArea>
<!-- Sticky Footer with Summary -->
<div class="border-t px-6 py-4 bg-background">
<CartSummary :items="items" :total="total" :loading="loading" @checkout="handleCheckout" />
</div>
</template>
</SheetContent>
</Sheet>
</template>

3
app/components/Cart/index.ts
View File

@ -2,5 +2,4 @@ export { default as CartItem } from './CartItem.vue'
export { default as CartSummary } from './CartSummary.vue'
export { default as CartEmpty } from './CartEmpty.vue'
export { default as CartFAB } from './CartFAB.vue'
export { default as CartSidebar } from './CartSidebar.vue'
export { default as CartSheet } from './CartSheet.vue'
export { default as CartResponsive } from './CartResponsive.vue'

13
app/layouts/default.vue
View File

@ -2,12 +2,8 @@
import AppHeader from '~/components/navigation/AppHeader.vue'
import BottomNav from '~/components/navigation/BottomNav.vue'
import CartFAB from '~/components/Cart/CartFAB.vue'
import CartSidebar from '~/components/Cart/CartSidebar.vue'
import CartSheet from '~/components/Cart/CartSheet.vue'
import CartResponsive from '~/components/Cart/CartResponsive.vue'
import { Toaster } from '~/components/ui/sonner'
// Determine which cart UI to show based on screen size
const { isMobile } = useCartUI()
</script>
<template>
@ -29,11 +25,8 @@ const { isMobile } = useCartUI()
<!-- Floating Action Button (FAB) for Cart on Product Pages -->
<CartFAB />
<!-- Cart Sidebar (Desktop: >= 1024px) -->
<CartSidebar v-if="!isMobile" />
<!-- Cart Sheet (Mobile: < 1024px) -->
<CartSheet v-if="isMobile" />
<!-- Responsive Cart (slides from right on desktop, bottom on mobile) -->
<CartResponsive />
<!-- Toast Notifications -->
<Toaster position="top-center" :duration="3000" rich-colors />

164
assets/css/tailwind.css
View File

@ -836,6 +836,170 @@
======================================== */
@layer utilities {
/* Animation utilities for Sheet/Dialog components */
@keyframes slideInFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideOutToRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes slideInFromBottom {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideOutToBottom {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideOutToLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideInFromTop {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideOutToTop {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Animation classes with data-state support */
[data-state="open"].animate-in,
.data-\[state\=open\]\:animate-in[data-state="open"] {
animation-duration: 0.3s;
animation-fill-mode: both;
}
[data-state="closed"].animate-out,
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
animation-duration: 0.2s;
animation-fill-mode: both;
}
[data-state="open"].fade-in-0,
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
animation-name: fadeIn;
}
[data-state="closed"].fade-out-0,
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
animation-name: fadeOut;
}
[data-state="open"].slide-in-from-right,
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
animation-name: slideInFromRight;
}
[data-state="closed"].slide-out-to-right,
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
animation-name: slideOutToRight;
}
[data-state="open"].slide-in-from-bottom,
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
animation-name: slideInFromBottom;
}
[data-state="closed"].slide-out-to-bottom,
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
animation-name: slideOutToBottom;
}
[data-state="open"].slide-in-from-left,
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
animation-name: slideInFromLeft;
}
[data-state="closed"].slide-out-to-left,
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
animation-name: slideOutToLeft;
}
[data-state="open"].slide-in-from-top,
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
animation-name: slideInFromTop;
}
[data-state="closed"].slide-out-to-top,
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
animation-name: slideOutToTop;
}
[data-state="open"].duration-500,
.data-\[state\=open\]\:duration-500[data-state="open"] {
animation-duration: 500ms;
}
[data-state="closed"].duration-300,
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
animation-duration: 300ms;
}
/* Container utilities */
.container-main {
@apply max-w-container-main mx-auto;

Write Preview
Loading…
Cancel
Save