David/Wfdash-OnlineShop
1
0
Fork 0
mirror of https://gitlab.com/davidels1986/ore-cart-checkout.git synced 2026-10-30 02:59:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve mobile cart navigation

Browse source 
Updated CartDrawer to be mobile-friendly: added router navigation, kept cart accessible with a close button, and added Home/Products quick actions inside the cart drawer for easier back navigation when open. Also wired open-cart event listener and ensured consistency with mobile bottom nav.

X-Lovable-Edit-ID: edt-b497871b-79ee-4bec-9d5a-3fa2aa8b2e3f
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 22:02:37 +00:00
commit 28b26b3a8c
1 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/CartDrawer.tsx
View file

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { X, Minus, Plus, Trash2, Send, MessageSquare } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@ -16,14 +17,9 @@ import { useCart } from '@/context/CartContext';
import { useToast } from '@/hooks/use-toast';
export function CartDrawer() {
// Listen for custom event from mobile nav
useEffect(() => {
const handleOpenCart = () => setIsCartOpen(true);
window.addEventListener('open-cart', handleOpenCart);
return () => window.removeEventListener('open-cart', handleOpenCart);
}, []);
const { items, isCartOpen, setIsCartOpen, removeItem, updateQuantity, updateNotes, clearCart } = useCart();
const { toast } = useToast();
const navigate = useNavigate();
const [quoteMessage, setQuoteMessage] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [showQuoteForm, setShowQuoteForm] = useState(false);
@ -34,6 +30,18 @@ export function CartDrawer() {
company: '',
});
// Listen for custom event from mobile nav
useEffect(() => {
const handleOpenCart = () => setIsCartOpen(true);
window.addEventListener('open-cart', handleOpenCart);
return () => window.removeEventListener('open-cart', handleOpenCart);
}, [setIsCartOpen]);
const goTo = (to: string) => {
setIsCartOpen(false);
navigate(to);
};
const handleRequestQuote = () => {
if (items.length === 0) {
toast({
@ -106,10 +114,23 @@ export function CartDrawer() {
<Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
<SheetContent className="w-full sm:max-w-lg flex flex-col pb-20 md:pb-6">
<SheetHeader className="border-b pb-4">
<SheetTitle className="font-display text-xl">Quote Request Cart</SheetTitle>
<p className="text-sm text-muted-foreground">
Add items and request a personalized quote
</p>
<div className="flex items-start justify-between gap-3">
<div>
<SheetTitle className="font-display text-xl">Quote Request Cart</SheetTitle>
<p className="text-sm text-muted-foreground">
Add items and request a personalized quote
</p>
</div>
<Button variant="ghost" size="icon" onClick={() => setIsCartOpen(false)} aria-label="Close cart">
<X className="h-4 w-4" />
</Button>
</div>
<div className="mt-3 flex gap-2 md:hidden">
<Button variant="secondary" size="sm" className="flex-1" onClick={() => goTo('/')}>Home</Button>
<Button variant="secondary" size="sm" className="flex-1" onClick={() => goTo('/products')}>Products</Button>
</div>
</SheetHeader>
{items.length === 0 ? (