fix bug when don't exsist variant
This commit is contained in:
hamid zarghami
@@ -75,170 +75,56 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
|
||||
</div>
|
||||
|
||||
{/* نمایش variant ها */}
|
||||
{product.variants.length > 0 && (
|
||||
<div className='mt-4 sm:mt-6'>
|
||||
{/* بررسی وجود فیلدهای خاص در variant ها */}
|
||||
{(() => {
|
||||
const hasMeterage = product.variants.some(v => v.meterage)
|
||||
const hasColor = product.variants.some(v => v.color)
|
||||
const hasSize = product.variants.some(v => v.size)
|
||||
const hasThemeValue = product.variants.some(v => v.themeValue)
|
||||
{(() => {
|
||||
if (product.variants.length === 0) return null
|
||||
|
||||
// اگر هیچ فیلد خاصی وجود نداشت، نمایش عمومی
|
||||
if (!hasMeterage && !hasColor && !hasSize && !hasThemeValue) {
|
||||
const hasMeterage = product.variants.some(v => v.meterage)
|
||||
const hasColor = product.variants.some(v => v.color)
|
||||
const hasSize = product.variants.some(v => v.size)
|
||||
const hasThemeValue = product.variants.some(v => v.themeValue)
|
||||
const hasAnySpecificField = hasMeterage || hasColor || hasSize || hasThemeValue
|
||||
|
||||
// اگر فقط یک variant وجود دارد و هیچ فیلد خاصی ندارد، نمایش نده
|
||||
if (product.variants.length === 1 && !hasAnySpecificField) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4 sm:mt-6'>
|
||||
{/* بررسی وجود فیلدهای خاص در variant ها */}
|
||||
{(() => {
|
||||
// اگر هیچ فیلد خاصی وجود نداشت، نمایش عمومی
|
||||
if (!hasAnySpecificField) {
|
||||
return (
|
||||
<div className='flex flex-wrap items-center gap-1.5'>
|
||||
{product.variants.map((variant, index) => {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
گزینه {index + 1}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// نمایش فیلدهای خاص
|
||||
return (
|
||||
<div className='flex flex-wrap items-center gap-1.5'>
|
||||
{product.variants.map((variant, index) => {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
گزینه {index + 1}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// نمایش فیلدهای خاص
|
||||
return (
|
||||
<>
|
||||
{/* متراژ */}
|
||||
{hasMeterage && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.meterage) {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
{variant.meterage.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* رنگ ها */}
|
||||
{hasColor && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.color) {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={clx(
|
||||
'size-10 rounded-full flex justify-center items-center',
|
||||
variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
|
||||
)}
|
||||
style={{ backgroundColor: variant.color.hexColor }}
|
||||
>
|
||||
{isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
|
||||
'size-5',
|
||||
variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
|
||||
)} />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* سایزها */}
|
||||
{hasSize && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.size) {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
{variant.size.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* themeValue ها - نمایش داینامیک */}
|
||||
{hasThemeValue && (() => {
|
||||
// گروهبندی variantها بر اساس theme
|
||||
const themeGroups = new Map<string, typeof product.variants>()
|
||||
|
||||
product.variants.forEach(variant => {
|
||||
if (variant.themeValue) {
|
||||
const theme = variant.themeValue.theme
|
||||
if (!themeGroups.has(theme)) {
|
||||
themeGroups.set(theme, [])
|
||||
}
|
||||
themeGroups.get(theme)!.push(variant)
|
||||
}
|
||||
})
|
||||
|
||||
// تابع برای بررسی hex بودن value
|
||||
const isHexColor = (value: string | number): boolean => {
|
||||
if (typeof value !== 'string') return false
|
||||
const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
|
||||
return hexPattern.test(value)
|
||||
}
|
||||
|
||||
return Array.from(themeGroups.entries()).map(([theme, variants]) => (
|
||||
<div key={theme} className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{variants.map((variant) => {
|
||||
if (variant.themeValue) {
|
||||
<>
|
||||
{/* متراژ */}
|
||||
{hasMeterage && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.meterage) {
|
||||
const isSelected = variantId === variant._id
|
||||
const value = typeof variant.themeValue.value === 'string'
|
||||
? variant.themeValue.value
|
||||
: String(variant.themeValue.value)
|
||||
const isHex = isHexColor(value)
|
||||
|
||||
// اگر hex بود، دایره رنگی نمایش بده
|
||||
if (isHex) {
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={clx(
|
||||
'size-10 rounded-full flex justify-center items-center',
|
||||
value === '#FFFFFF' ? 'border border-border' : ''
|
||||
)}
|
||||
style={{ backgroundColor: value }}
|
||||
>
|
||||
{isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
|
||||
'size-5',
|
||||
value === '#FFFFFF' ? 'filterBlack' : ''
|
||||
)} />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// اگر hex نبود، name را نمایش بده
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
@@ -248,20 +134,144 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
{variant.themeValue.name}
|
||||
{variant.meterage.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
})()}
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* رنگ ها */}
|
||||
{hasColor && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.color) {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={clx(
|
||||
'size-10 rounded-full flex justify-center items-center',
|
||||
variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
|
||||
)}
|
||||
style={{ backgroundColor: variant.color.hexColor }}
|
||||
>
|
||||
{isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
|
||||
'size-5',
|
||||
variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
|
||||
)} />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* سایزها */}
|
||||
{hasSize && (
|
||||
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{product.variants.map((variant) => {
|
||||
if (variant.size) {
|
||||
const isSelected = variantId === variant._id
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
{variant.size.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* themeValue ها - نمایش داینامیک */}
|
||||
{hasThemeValue && (() => {
|
||||
// گروهبندی variantها بر اساس theme
|
||||
const themeGroups = new Map<string, typeof product.variants>()
|
||||
|
||||
product.variants.forEach(variant => {
|
||||
if (variant.themeValue) {
|
||||
const theme = variant.themeValue.theme
|
||||
if (!themeGroups.has(theme)) {
|
||||
themeGroups.set(theme, [])
|
||||
}
|
||||
themeGroups.get(theme)!.push(variant)
|
||||
}
|
||||
})
|
||||
|
||||
// تابع برای بررسی hex بودن value
|
||||
const isHexColor = (value: string | number): boolean => {
|
||||
if (typeof value !== 'string') return false
|
||||
const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
|
||||
return hexPattern.test(value)
|
||||
}
|
||||
|
||||
return Array.from(themeGroups.entries()).map(([theme, variants]) => (
|
||||
<div key={theme} className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||
{variants.map((variant) => {
|
||||
if (variant.themeValue) {
|
||||
const isSelected = variantId === variant._id
|
||||
const value = typeof variant.themeValue.value === 'string'
|
||||
? variant.themeValue.value
|
||||
: String(variant.themeValue.value)
|
||||
const isHex = isHexColor(value)
|
||||
|
||||
// اگر hex بود، دایره رنگی نمایش بده
|
||||
if (isHex) {
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={clx(
|
||||
'size-10 rounded-full flex justify-center items-center',
|
||||
value === '#FFFFFF' ? 'border border-border' : ''
|
||||
)}
|
||||
style={{ backgroundColor: value }}
|
||||
>
|
||||
{isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
|
||||
'size-5',
|
||||
value === '#FFFFFF' ? 'filterBlack' : ''
|
||||
)} />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// اگر hex نبود، name را نمایش بده
|
||||
return (
|
||||
<button
|
||||
key={variant._id}
|
||||
onClick={() => handleVariantSelect(variant._id)}
|
||||
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
{variant.themeValue.name}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
})()}
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{
|
||||
product.specifications.length > 0 ?
|
||||
|
||||
Reference in New Issue
Block a user