nurmuhammet/mm.com.tm-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding new styles

Browse Source
This commit is contained in:
Jelaletdin12
2026-03-29 21:28:37 +05:00
parent 7c75205077
commit 3156e25068
12 changed files with 510 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ProductCard/ProductCard.module.scss
View File

@@ -5,14 +5,14 @@
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
transition: all 0.3s ease;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
@media screen and (max-width: 426px) {

6
src/components/ProductCard/imageCarousel/ImageCarousel.module.scss
View File

@@ -5,7 +5,6 @@
overflow: hidden;
touch-action: pan-y;
}
.productImage {
width: 99%;
height: auto;
@@ -31,6 +30,11 @@
max-width: 100%;
margin: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.hovered {
transform: scale(1.05);
}
/* Style for images inside detail view */

6
src/components/ProductCard/imageCarousel/index.jsx
View File

@@ -6,6 +6,7 @@ const ImageCarousel = ({
altText,
showThumbnails = false,
isDetailView = false,
isHovered = false,
}) => {
const [currentIndex, setCurrentIndex] = useState(0);
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -220,7 +221,8 @@ const ImageCarousel = ({
isDetailView ? styles.detailImage : styles.cardImage
}`}
onClick={isDetailView ? openModal : undefined}
style={{ cursor: isDetailView ? "pointer" : "default" }}
style={{ cursor: isDetailView ? "pointer" : "default" , transform: isHovered ? "scale(1.05)" : "none" }}
/>
{isDetailView && renderModal()}
</div>
@@ -450,7 +452,7 @@ const ImageCarousel = ({
alt={altText || "Product image"}
className={`${styles.productImage} ${
isDetailView ? styles.detailImage : styles.cardImage
}`}
} ${isHovered ? styles.hovered : ''}`}
/>
</div>

13
src/components/ProductCard/index.jsx
View File

@@ -53,7 +53,7 @@ const ProductCard = ({
const [localIsFavorite, setLocalIsFavorite] = useState(
favoriteProducts.some((fav) => fav.product?.id === product.id),
);
// const [isHovered, setIsHovered] = useState(false);
const truncatedDesc = truncateDescription(
product.description,
descriptionMaxLength,
@@ -221,11 +221,18 @@ const ProductCard = ({
navigate(`/product/${product.id}`);
};
const [isHovered, setIsHovered] = useState(false);
const { name, price_amount, old_price_amount, media = [], reviews } = product;
return (
<>
<div className={styles.productCard} onClick={handleCardClick}>
<div
className={styles.productCard}
onClick={handleCardClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<div className={styles.imageContainer}>
{product.discount && (
<span className={styles.discountBadge}>-{product.discount}%</span>
@@ -236,7 +243,7 @@ const ProductCard = ({
</span>
)}
<ImageCarousel images={media} altText={name} />
<ImageCarousel images={media} altText={name} isHovered={isHovered}/>
</div>
<div className={styles.productInfo}>
<h3 className={styles.productName}>{name}</h3>

2
src/i18n/locales/en.js
View File

@@ -177,6 +177,8 @@ export default {
productCode: "Product code",
barCode: "Barcode",
similarProducts: "Similar Products",
description: "Product description",
price: "Price",
},
wishtList: {
likedProducts: "Favorites",

2
src/i18n/locales/ru.js
View File

@@ -174,6 +174,8 @@ export default {
productCode: "Код товара",
barCode: "Штрих-код",
similarProducts: "Похожие товары",
description: "Описание товара",
price: "Цена",
},
wishtList: {
likedProducts: "Избранные",

2
src/i18n/locales/tm.js
View File

@@ -177,6 +177,8 @@ export default {
productCode: "Haryt kody",
barCode: "Çyzgyç kod",
similarProducts: "Meňzeş harytlar",
description: "Haryt barada düşündiriş",
price: "Bahasy",
},
wishtList: {
likedProducts: "Halanlarym",

20
src/pages/Category/CategoryPage.module.scss
View File

@@ -67,6 +67,16 @@
color: #000000;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease-in-out;
padding: 4px 8px;
border-radius: 6px;
&:hover {
background-color: #f3f4f6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transform: translateX(4px);
color: #d32824;
}
}
label {
@@ -282,10 +292,18 @@
}
}
.productGrid::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.productsContainer {
flex: 1;
.productGrid {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
overflow: hidden !important;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
gap: 20px;

2
src/pages/Category/hooks/useCategoryProducts.js
View File

@@ -50,7 +50,7 @@ const useCategoryProducts = ({
const fetchParams = useMemo(
() => ({
page: currentPage,
limit: 6,
limit: 24,
brands: selectedFilterBrand || undefined,
min_price: minPrice || undefined,
max_price: maxPrice || undefined,

20
src/pages/Category/index.jsx
View File

@@ -48,7 +48,7 @@ const CategoryPage = () => {
const routeKey = useMemo(
() => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}`,
[categoryId, collectionId, brandId]
[categoryId, collectionId, brandId],
);
const prevRouteRef = useRef(routeKey);
@@ -56,7 +56,7 @@ const CategoryPage = () => {
const searchResults = useMemo(
() => location.state?.searchData?.data || [],
[location.state?.searchData?.data]
[location.state?.searchData?.data],
);
const searchQuery = location.state?.searchQuery || null;
@@ -161,7 +161,7 @@ const CategoryPage = () => {
if (filterState.selectedFilterCategory) {
const cat = findCategoryById(
categoriesData?.data,
filterState.selectedFilterCategory
filterState.selectedFilterCategory,
);
return cat?.name || "Category";
}
@@ -376,8 +376,10 @@ const CategoryPage = () => {
/>
<main className={styles.productsContainer}>
{categoryId === "1136" && (
<Carconfigurator /> )}
{(Number(categoryId) === 1136 ||
Number(filterState.selectedFilterCategory) === 1136) && (
<Carconfigurator />
)}
{isInitialLoad ? (
<div className={styles.loaderContainer}>
<Loader />
@@ -388,8 +390,12 @@ const CategoryPage = () => {
next={loadMoreData}
hasMore={hasMore}
scrollThreshold={0.8}
scrollableTarget={null}
style={{ overflow: "hidden" }}
loader={
<div className={styles.loaderContainer}>
<div
className={`${styles.loaderContainer} `}
>
<Loader />
</div>
}
@@ -412,7 +418,7 @@ const CategoryPage = () => {
showFavoriteButton
showAddToCart
/>
)
),
)}
</InfiniteScroll>
) : (

490
src/pages/ProductDetail/ProductPage.module.scss
View File

@@ -7,6 +7,7 @@
box-sizing: border-box;
}
// ─── Breadcrumb ───────────────────────────────────────────────────
.breadcrumb {
margin-bottom: 15px;
color: #666;
@@ -19,70 +20,255 @@
}
}
// ─── Product section: 3 kolon ─────────────────────────────────────
// desktop: [image 35%] | [info+description flex:1] | [purchase 260px]
// tablet: [image 45%] [info 55%] / [purchase full-width]
// mobile: tek kolon
.productSection {
display: flex;
gap: 24px;
background-color: rgb(255, 255, 255);
align-items: flex-start;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 1.25rem;
box-sizing: border-box;
@media screen and (max-width: 900px) {
flex-wrap: wrap;
}
@media screen and (max-width: 639px) {
flex-direction: column;
padding: 0.75rem;
}
}
// ─── Sol: resim kolonu ────────────────────────────────────────────
.productImage {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 40%;
width: 35%;
flex-shrink: 0;
@media screen and (max-width: 900px) {
width: 45%;
padding: 5px;
}
@media screen and (max-width: 639px) {
width: 100%;
padding: 0;
}
img {
width: 99%;
height: auto;
object-fit: contain;
// border: 1px solid #eee;
@media screen and (max-width: 900px) {
height: 100%;
}
}
}
// ─── Orta: isim + meta + description kolonu ───────────────────────
.productInfo {
width: 60%;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
@media screen and (max-width: 900px) {
// tablet: image(45%) + info yan yana, purchase wrap ile alta iner
width: calc(55% - 24px);
flex: none;
}
@media screen and (max-width: 639px) {
width: 100%;
}
@media screen and (max-width: 520px) {
// mobile'da purchase card orta kolona taşınır (sticky bar var)
border-bottom: 1px solid #e5e7eb;
}
.productTitle {
font-size: 30px;
font-weight: 600;
margin-bottom: 12px;
color: #000000;
}
.productDescription {
font-size: 14px;
.productTitle {
font-size: 24px;
font-weight: 600;
margin: 0 0 4px;
color: #000;
margin-bottom: 24px;
line-height: 1.3;
}
}
.productMeta {
background: #f5f5f5;
// padding: 16px;
// ─── Sağ: satın alma kartı kolonu ────────────────────────────────
.purchaseCol {
width: 260px;
flex-shrink: 0;
@media screen and (max-width: 900px) {
width: 100%;
}
@media screen and (max-width: 639px) {
display: none; // mobile'da sticky bar devreye girer
}
}
.purchaseCard {
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 24px;
padding: 16px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
// ─── Fiyat satırı ─────────────────────────────────────────────────
.priceRow {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.priceLabel {
font-size: 15px;
color: #666;
}
.priceRight {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.price {
font-size: 28px;
font-weight: 700;
color: #000;
}
.oldPrice {
font-size: 14px;
color: #d32824;
text-decoration: line-through;
font-weight: 500;
}
// ─── Aksiyon butonları satırı ─────────────────────────────────────
.Btn {
display: flex;
gap: 8px;
align-items: center;
}
.addToCartButton {
flex: 1;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 6px;
border: none;
background-color: #d32824;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 150ms ease;
white-space: nowrap;
svg {
fill: #fff;
width: 18px;
height: 18px;
flex-shrink: 0;
}
&:hover {
background-color: #e86064;
}
}
.favoriteButton {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
background-color: #fff;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: border-color 150ms ease;
svg {
fill: #888;
height: 20px;
width: 20px;
}
&:hover {
border-color: #d32824;
svg {
fill: #d32824;
}
}
}
// ─── Quantity controls ────────────────────────────────────────────
.quantityControls {
flex: 1;
height: 42px;
display: flex;
align-items: center;
background-color: #d32824;
border-radius: 6px;
overflow: hidden;
span {
color: #fff;
font-weight: 700;
font-size: 16px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.quantityBtn {
width: 42px;
height: 42px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
svg {
fill: #fff;
width: 18px;
height: 18px;
}
&:hover {
background: #e86064;
}
}
}
// ─── Meta tablo ───────────────────────────────────────────────────
.productMeta {
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
.metaItem {
display: flex;
@@ -105,105 +291,103 @@
font-weight: 500;
}
}
.Btn {
display: flex;
gap: 10px;
@media screen and (max-width: 639px) {
width: 65%;
}
// ─── Description card ─────────────────────────────────────────────
.descriptionCard {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px 20px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.priceContainer {
.descriptionHeader {
display: flex;
align-items: baseline;
gap: 10px;
@media screen and (max-width: 639px) {
flex-direction: column;
gap: 5px;
width: 35%;
align-items: center;
gap: 10px;
margin-bottom: 12px;
.descriptionIcon {
width: 32px;
height: 32px;
border-radius: 6px;
background: #1a1a2e;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
svg {
width: 16px;
height: 16px;
stroke: #fff;
fill: none;
}
}
.descriptionTitle {
font-size: 16px;
font-weight: 700;
color: #000;
margin: 0;
}
}
.productActions {
.productDescription {
font-size: 14px;
color: #000;
line-height: 1.7;
}
// ─── Mobile sticky bar ────────────────────────────────────────────
.productActionsMobile {
display: none;
@media screen and (max-width: 639px) {
display: none !important;
}
}
.productActionsMobile {
@media screen and (min-width: 639px) {
background-color: #fff;
display: none !important;
position: sticky !important;
bottom: 60px !important;
}
}
.productActions,
.productActionsMobile {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
position: sticky;
bottom: 59px;
z-index: 50;
background: #fff;
border-top: 1px solid #e5e7eb;
background-color: #fff;
padding: 15px 16px;
@media screen and (max-width: 520px) {
border-bottom: none;
border-top: none;
padding: 0;
border-bottom: 1px solid #e5e7eb;
padding: 10px 16px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
gap: 12px;
}
}
.mobilePriceContainer {
display: flex;
flex-direction: column;
gap: 2px;
width: 35%;
.price {
font-size: 24px;
font-size: 20px;
font-weight: 700;
color: #000;
@media screen and (max-width: 520px) {
font-size: 20px;
}
}
.oldPrice {
font-size: 16px;
font-size: 13px;
color: #d32824;
text-decoration: line-through;
font-weight: 600;
@media screen and (max-width: 520px) {
font-size: 14px;
}
font-weight: 500;
}
}
.favoriteButton {
height: 36px;
.mobileBtnContainer {
display: flex;
// margin-right: 0.5rem;
justify-content: center;
align-items: center;
border-radius: 0.375rem;
background-color: rgb(255 255 255);
border: 1px solid rgb(237 228 255);
svg {
fill: #888888;
height: 20px;
width: 20px;
}
}
.wishlistButton {
background: #fff;
border: 1px solid #ddd;
&:hover {
background: #f5f5f5;
}
}
@media (max-width: 768px) {
.productGrid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
gap: 8px;
width: 65%;
}
// ─── Similar products ─────────────────────────────────────────────
.similarProducts {
margin-top: 48px;
margin-top: 40px;
.sectionTitle {
font-size: 20px;
@@ -216,117 +400,27 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
@media screen and (max-width: 1230px) {
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
}
@media screen and (max-width: 1023px) {
grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
@media screen and (max-width: 768px) {
grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
gap: 10px;
}
@media screen and (max-width: 767px) {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media screen and (max-width: 510px) {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
@media (max-width: 768px) {
.productSection {
grid-template-columns: 1fr;
}
}
.addToCartButton {
// height: 40px;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
border-width: 1px;
width: 100%;
min-width: 158px;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-duration: 150ms;
background-color: #d32824;
border: none;
@media screen and (max-width: 639px) {
min-width: auto;
}
svg {
fill: #fff;
width: 20px;
height: 20px;
}
&:hover {
background-color: #e86064;
cursor: pointer;
}
}
.quantityControls {
min-width: 158px;
display: flex;
align-items: center;
gap: 2.5rem;
background-color: #d32824;
// width: 10rem;
// justify-content: center;
border-radius: 5px;
width: 100%;
@media screen and (max-width: 520px) {
min-width: auto;
gap: 0;
}
span {
color: #fff;
font-weight: 700;
font-size: 16px;
display: flex;
width: 100%;
justify-content: center;
}
.quantityBtn {
width: 100%;
height: 100%;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
svg {
fill: #fff;
width: 20px;
height: 20px;
}
&:hover {
background: #e86064;
}
}
}
.outOfStock {
background-color: #ff4d4f;
}
.disabled {
opacity: 0.5;
cursor: not-allowed;
}
// ─── Misc ─────────────────────────────────────────────────────────
.modalButton {
// Style for modal buttons
padding: 6px 15px;
background-color: #1890ff;
color: white;
@@ -334,3 +428,21 @@
border-radius: 8px;
cursor: pointer;
}
.wishlistButton {
background: #fff;
border: 1px solid #ddd;
&:hover {
background: #f5f5f5;
}
}
.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.outOfStock {
background-color: #ff4d4f;
}

258
src/pages/ProductDetail/index.jsx
View File

@@ -38,18 +38,22 @@ const ProductPage = ({
const navigate = useNavigate();
const { productId } = useParams();
const { t } = useTranslation();
const {
data: productResponse,
error: productError,
isLoading: productLoading,
} = useGetProductByIdQuery(productId);
const {
data: similarProductsResponse,
error: similarProductsError,
isLoading: similarProductsLoading,
} = useGetRelatedProductsQuery(productId);
const product = productResponse?.data;
const similarProducts = similarProductsResponse?.data;
const [stockErrorModalVisible, setStockErrorModalVisible] = useState(false);
const [addFavorite] = useAddFavoriteMutation();
const [removeFavorite] = useRemoveFavoriteMutation();
@@ -183,7 +187,6 @@ const ProductPage = ({
10
);
// Sadece miktar değiştiyse ve 0'dan büyükse güncelle (0 ise Remove triggerlanır)
if (pendingQuantity === serverQty || pendingQuantity <= 0) {
return;
}
@@ -197,7 +200,6 @@ const ProductPage = ({
}).unwrap();
} catch (error) {
console.error("Failed to update cart item:", error);
// Hata durumunda geri al
setLocalQuantity(serverQty);
setPendingQuantity(serverQty);
} finally {
@@ -225,12 +227,74 @@ const ProductPage = ({
if (!product) return <div>Can not find product</div>;
const imageUrl = product.media?.[0]?.thumbnail || "";
const categoryName = product.categories?.[0]?.name || "Category";
const categoryId = product.categories?.[0]?.id;
const handleCategoryClick = (categoryId) => {
navigate(`/category/${categoryId}`);
};
// ── Cart + favorite butonları (desktop purchase card + mobile bar'da ortak) ──
const CartButtons = () => (
<div className={styles.Btn}>
{showFavoriteButton && (
<button
className={styles.favoriteButton}
onClick={handleToggleFavorite}
>
{localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
</button>
)}
{showAddToCart && (
<>
{localQuantity > 0 ? (
<div className={styles.quantityControls}>
<button
onClick={handleQuantityDecrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
fill="white"
/>
</svg>
</button>
<span>{localQuantity}</span>
<button
onClick={handleQuantityIncrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
fill="white"
/>
</svg>
</button>
</div>
) : (
<button
className={styles.addToCartButton}
onClick={handleAddToCart}
>
<FaShoppingCart />
</button>
)}
</>
)}
</div>
);
return (
<div className={styles.container}>
{/* Breadcrumb */}
@@ -242,8 +306,10 @@ const ProductPage = ({
<span>{product?.name || "Product"}</span>
</div>
{/* Product Details */}
{/* ── 3 kolon ana section ── */}
<div className={styles.productSection}>
{/* KOLON 1: Resim */}
<div className={styles.productImage}>
<ImageCarousel
images={product.media}
@@ -252,13 +318,12 @@ const ProductPage = ({
isDetailView={true}
/>
</div>
{/* KOLON 2: İsim + Meta + Description */}
<div className={styles.productInfo}>
<h1 className={styles.productTitle}>{product.name}</h1>
<p
className={styles.productDescription}
dangerouslySetInnerHTML={{ __html: product.description }}
></p>
{/* Meta tablo */}
<div className={styles.productMeta}>
<div className={styles.metaItem}>
<span className={styles.metaLabel}>
@@ -266,12 +331,14 @@ const ProductPage = ({
</span>
<span className={styles.metaValue}>{product.id}</span>
</div>
{product.barcode && (
<div className={styles.metaItem}>
<span className={styles.metaLabel}>{t("product.barCode")}</span>
<span className={styles.metaValue}>{product.barcode}</span>
</div>
)}
{product.brand?.name && (
<div className={styles.metaItem}>
<span className={styles.metaLabel}>{t("order.brand")}</span>
@@ -288,145 +355,73 @@ const ProductPage = ({
</div>
)}
</div>
<div className={styles.productActions}>
<div className={styles.priceContainer}>
<span className={styles.price}>{product.price_amount} m.</span>
{/* Description card */}
{product.description && (
<div className={styles.descriptionCard}>
<div className={styles.descriptionHeader}>
<div className={styles.descriptionIcon}>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<p className={styles.descriptionTitle}>
{t("product.description")}
</p>
</div>
<div
className={styles.productDescription}
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</div>
)}
</div>
{/* KOLON 3: Satın alma kartı (sadece desktop/tablet) */}
<div className={styles.purchaseCol}>
<div className={styles.purchaseCard}>
{/* Fiyat */}
<div className={styles.priceRow}>
<span className={styles.priceLabel}>{t("product.price")}:</span>
<div className={styles.priceRight}>
<span className={styles.price}>
{product.price_amount} m.
</span>
{product.old_price_amount && (
<span className={styles.oldPrice}>
{product.old_price_amount} m.
</span>
)}
</div>
<div className={styles.Btn}>
{showFavoriteButton && (
<button
className={styles.favoriteButton}
onClick={handleToggleFavorite}
>
{localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
</button>
)}
</div>
{showAddToCart && (
<>
{localQuantity > 0 ? (
<div className={styles.quantityControls}>
<button
onClick={handleQuantityDecrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
fill="white"
></path>
</svg>
</button>
<span>{localQuantity}</span>
<button
onClick={handleQuantityIncrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
fill="white"
></path>
</svg>
</button>
</div>
) : (
<button
className={styles.addToCartButton}
onClick={handleAddToCart}
>
<FaShoppingCart />
</button>
)}
</>
)}
{/* Butonlar */}
<CartButtons />
</div>
</div>
<div
className={styles.productActionsMobile}
style={{ position: "sticky", bottom: "59px" }}
>
<div className={styles.priceContainer}>
{" "}
</div>
{/* ── Mobile sticky bar ── */}
<div className={styles.productActionsMobile}>
<div className={styles.mobilePriceContainer}>
<span className={styles.price}>{product.price_amount} m.</span>
{product.old_price_amount && (
<span className={styles.oldPrice}>
{product.old_price_amount} m.
</span>
</div>
<div className={styles.Btn}>
{showFavoriteButton && (
<button
className={styles.favoriteButton}
onClick={handleToggleFavorite}
>
{localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
</button>
)}
</div>
<div className={styles.mobileBtnContainer}>
<CartButtons />
</div>
</div>
{showAddToCart && (
<>
{localQuantity > 0 ? (
<div className={styles.quantityControls}>
<button
onClick={handleQuantityDecrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
fill="white"
></path>
</svg>
</button>
<span>{localQuantity}</span>
<button
onClick={handleQuantityIncrease}
className={styles.quantityBtn}
>
<svg
viewBox="0 0 9 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
fill="white"
></path>
</svg>
</button>
</div>
) : (
<button
className={styles.addToCartButton}
onClick={handleAddToCart}
>
<FaShoppingCart />
</button>
)}
</>
)}
</div>
</div>
</div>
</div>
{/* Reviews */}
<ReviewSection
productId={productId}
existingReviews={product.reviews_resources}
@@ -452,6 +447,7 @@ const ProductPage = ({
</div>
</div>
{/* Stock modal */}
<Modal
title={t("common.warning")}
open={stockErrorModalVisible}