fixed some cart style
This commit is contained in:
37
src/app/api/useCart.js
Normal file
37
src/app/api/useCart.js
Normal 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
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -52,8 +52,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 1023px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -118,11 +120,17 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
@media screen and (max-width: 720px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@media screen and (max-width: 720px) {
|
@media screen and (max-width: 720px) {
|
||||||
font-size: 18px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -323,9 +323,9 @@ const CartPage = () => {
|
|||||||
const handleEmptyCartConfirm = async () => {
|
const handleEmptyCartConfirm = async () => {
|
||||||
try {
|
try {
|
||||||
await cleanCart().unwrap();
|
await cleanCart().unwrap();
|
||||||
// ✅ RTK Query otomatik cache'i güncelleyecek
|
|
||||||
|
|
||||||
// ✅ Local state'i temizle
|
|
||||||
|
|
||||||
setLocalQuantities({});
|
setLocalQuantities({});
|
||||||
setPendingQuantities({});
|
setPendingQuantities({});
|
||||||
setCheckoutStores({});
|
setCheckoutStores({});
|
||||||
@@ -409,7 +409,7 @@ const CartPage = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div style={{background:"white"}}>
|
<div style={{background:"white", width: "100%"}}>
|
||||||
<div className={styles.storeHeader}>
|
<div className={styles.storeHeader}>
|
||||||
<h3>{store.name}</h3>
|
<h3>{store.name}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user