fixed some cart style

This commit is contained in:
Jelaletdin12
2025-12-24 13:25:21 +05:00
parent 9d95438ab2
commit a143c2e18b
3 changed files with 50 additions and 5 deletions

37
src/app/api/useCart.js Normal file
View File

@@ -0,0 +1,37 @@
// hooks/useCart.js - YENİ DOSYA
import { useMemo } from 'react';
import { useGetCartQuery } from './cartApi';
export const useCart = () => {
const { data: cartData, ...rest } = useGetCartQuery(undefined, {
pollingInterval: 0,
refetchOnMountOrArgChange: false,
refetchOnFocus: false,
refetchOnReconnect: false,
});
const cartItems = useMemo(() => {
if (!cartData?.data || typeof cartData.data !== 'object') return [];
return Object.values(cartData.data).flat();
}, [cartData]);
const cartCount = useMemo(() => {
return cartItems.reduce((total, item) => {
return total + (parseInt(item.product_quantity, 10) || 0);
}, 0);
}, [cartItems]);
const getCartItem = (productId) => {
return cartItems.find(
item => item.product?.id === productId || item.product_id === productId
);
};
return {
cartData,
cartItems,
cartCount,
getCartItem,
...rest
};
};

View File

@@ -52,8 +52,10 @@
display: flex;
border-radius: 10px;
gap: 16px;
justify-content: space-between;
width: 100%;
@media screen and (max-width: 768px) {
@media screen and (max-width: 1023px) {
flex-direction: column;
}
}
@@ -118,11 +120,17 @@
flex-direction: column;
position: relative;
}
h1{
font-size: 1.2rem;
@media screen and (max-width: 720px) {
font-size: 16px;
}
}
h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
@media screen and (max-width: 720px) {
font-size: 18px;
font-size: 14px;
}
}

View File

@@ -323,9 +323,9 @@ const CartPage = () => {
const handleEmptyCartConfirm = async () => {
try {
await cleanCart().unwrap();
// ✅ RTK Query otomatik cache'i güncelleyecek
// ✅ Local state'i temizle
setLocalQuantities({});
setPendingQuantities({});
setCheckoutStores({});
@@ -409,7 +409,7 @@ const CartPage = () => {
}}
/>
) : (
<div style={{background:"white"}}>
<div style={{background:"white", width: "100%"}}>
<div className={styles.storeHeader}>
<h3>{store.name}</h3>
</div>