feat: اضافه کردن قابلیت کلیک روی تصاویر carousel و banners برای هدایت به لینک مربوطه

This commit is contained in:
hamid zarghami
2025-10-16 10:05:12 +03:30
parent 80b7c761a9
commit 0a3b819a7e
4 changed files with 36 additions and 13 deletions
+4 -4
View File
@@ -10,14 +10,14 @@ const Banners3: FC = () => {
return (
<div className='flex gap-4'>
<div className='flex flex-col gap-2 h-full flex-1'>
<div className='flex-1 h-full'>
<Image src={data?.results?.banners?.[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
<div className='flex-1 h-full cursor-pointer' onClick={() => data?.results?.banners?.[1]?.linkUrl && window.open(data.results.banners[1].linkUrl, '_blank')}>
<Image src={data?.results?.banners?.[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[1]?.altText as string} />
</div>
<div className='flex-1 h-full'>
<div className='flex-1 h-full cursor-pointer' onClick={() => data?.results?.banners?.[2]?.linkUrl && window.open(data.results.banners[2].linkUrl, '_blank')}>
<Image src={data?.results?.banners?.[2]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[2]?.altText as string} />
</div>
</div>
<div className='flex-1 h-full'>
<div className='flex-1 h-full cursor-pointer' onClick={() => data?.results?.banners?.[0]?.linkUrl && window.open(data.results.banners[0].linkUrl, '_blank')}>
<Image src={data?.results?.banners?.[0]?.imageUrl as string} height={1000} width={1000} className='flex-1 rounded-lg h-full object-cover' alt={data?.results?.banners?.[0]?.altText as string} />
</div>
</div>
+4 -1
View File
@@ -32,7 +32,10 @@ const Carousel: FC = () => {
<Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
{sliders.map((slider) => (
<SwiperSlide key={slider._id}>
<div className='h-[200px] sm:h-[300px] md:h-[400px] relative'>
<div
className='h-[200px] sm:h-[300px] md:h-[400px] relative cursor-pointer'
onClick={() => slider.linkUrl && window.open(slider.linkUrl, '_blank')}
>
<Image
src={slider.imageUrl}
alt={slider.altText}
+23 -4
View File
@@ -84,14 +84,33 @@ const ProductCard: FC<Props> = ({ item }) => {
}
</div> */}
<div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
{NumberFormat(item.default_variant.price.selling_price)} تومان
<div className='flex items-center justify-between mt-4 sm:mt-5'>
<div className='flex flex-col gap-1'>
<div className='text-xs sm:text-sm font-bold'>
{item.default_variant.price.selling_price && item.default_variant.price.selling_price > 0
? `${NumberFormat(item.default_variant.price.selling_price)} تومان`
: 'بدون قیمت'
}
</div>
<div className='mt-1 text-xs sm:text-sm text-[#7F7F7F] line-through'>
{((item.default_variant.price.discount_percent > 0 && item.default_variant.price.selling_price > 0) ||
(item.default_variant.price.is_specialSale && item.default_variant.price.selling_price > 0)) && (
<div className='text-xs sm:text-sm text-[#7F7F7F] line-through'>
{NumberFormat(item.default_variant.price.retailPrice)}
</div>
)}
</div>
{((item.default_variant.price.discount_percent > 0 && item.default_variant.price.selling_price > 0) ||
(item.default_variant.price.is_specialSale && item.default_variant.price.selling_price > 0)) && (
<div className='bg-red-500 text-white text-xs px-2 py-1 rounded-full'>
{item.default_variant.price.discount_percent > 0
? `${item.default_variant.price.discount_percent}%`
: 'فروش ویژه'
}
</div>
)}
</div>
<div className='flex justify-end'>
<div className='flex justify-end mt-3'>
<Heart onClick={handleWish} variant={isWished ? 'Bold' : 'Outline'} size={20} color='#000' />
</div>
</Link>
+3 -2
View File
@@ -10,6 +10,7 @@ import { getToken } from '@/config/func'
import Account from './components/Account'
import Cart from './components/Cart'
import Image from 'next/image'
import Link from 'next/link'
const Header: FC = () => {
@@ -42,7 +43,7 @@ const Header: FC = () => {
</div>
<div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
<div>
<Link href='/'>
<Image
src='/images/logo.png'
alt='logo'
@@ -50,7 +51,7 @@ const Header: FC = () => {
height={100}
className='max-w-[100px] w-[100px] max-h-[40px] object-contain'
/>
</div>
</Link>
<Input
className='hidden md:block w-[300px] lg:w-[500px]'
variant='search'