danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix order banner

Browse Source
This commit is contained in:
hamid zarghami
2025-11-09 11:08:15 +03:30
parent 43d60ef163
commit f8f5e5bf0f
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/components/Banners3.tsx
+10 -9
View File
@@ -13,11 +13,8 @@ const Banners3: FC = () => {
const { desktopBanners, mobileBanners } = useMemo(() => { const { desktopBanners, mobileBanners } = useMemo(() => {
const allBanners = data?.results?.banners ?? [] const allBanners = data?.results?.banners ?? []
const sortByOrder = (items: IBanner[]) =>
[...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)
const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) => const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation)) allBanners.filter((banner) => banner.displayLocation === displayLocation)
return { return {
desktopBanners: groupByDisplayLocation('desktop'), desktopBanners: groupByDisplayLocation('desktop'),
@@ -26,9 +23,9 @@ const Banners3: FC = () => {
}, [data?.results?.banners]) }, [data?.results?.banners])
const renderLayout = (banners: IBanner[]) => { const renderLayout = (banners: IBanner[]) => {
if (banners.length < 3) return null const firstBanner = banners.find((banner) => banner.order === 1)
const secondBanner = banners.find((banner) => banner.order === 2)
const [firstBanner, secondBanner, thirdBanner] = banners const thirdBanner = banners.find((banner) => banner.order === 3)
if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null
@@ -75,8 +72,12 @@ const Banners3: FC = () => {
return ( return (
<> <>
<div className='hidden lg:block'>{renderLayout(desktopBanners)}</div> {desktopBanners.length > 0 && (
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div> <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
)}
{mobileBanners.length > 0 && (
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
)}
</> </>
) )
} }
src/app/home/components/Banners4.tsx
+13 -10
View File
@@ -12,11 +12,8 @@ const Banners4: FC = () => {
const { desktopBanners, mobileBanners } = useMemo(() => { const { desktopBanners, mobileBanners } = useMemo(() => {
const allBanners = data?.results?.banners ?? [] const allBanners = data?.results?.banners ?? []
const sortByOrder = (items: IBanner[]) =>
[...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)
const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) => const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation)) allBanners.filter((banner) => banner.displayLocation === displayLocation)
return { return {
desktopBanners: groupByDisplayLocation('desktop'), desktopBanners: groupByDisplayLocation('desktop'),
@@ -25,17 +22,19 @@ const Banners4: FC = () => {
}, [data?.results?.banners]) }, [data?.results?.banners])
const renderLayout = (banners: IBanner[]) => { const renderLayout = (banners: IBanner[]) => {
if (banners.length < 4) return null const firstBanner = banners.find((banner) => banner.order === 4)
const secondBanner = banners.find((banner) => banner.order === 5)
const [firstBanner, secondBanner, thirdBanner, fourthBanner] = banners const thirdBanner = banners.find((banner) => banner.order === 6)
const fourthBanner = banners.find((banner) => banner.order === 7)
if ( if (
!firstBanner?.imageUrl || !firstBanner?.imageUrl ||
!secondBanner?.imageUrl || !secondBanner?.imageUrl ||
!thirdBanner?.imageUrl || !thirdBanner?.imageUrl ||
!fourthBanner?.imageUrl !fourthBanner?.imageUrl
) ) {
return null return null
}
return ( return (
<div className='flex lg:flex-row flex-col gap-6'> <div className='flex lg:flex-row flex-col gap-6'>
@@ -93,8 +92,12 @@ const Banners4: FC = () => {
return ( return (
<> <>
<div className='hidden lg:block'>{renderLayout(desktopBanners)}</div> {desktopBanners.length > 0 && (
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div> <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
)}
{mobileBanners.length > 0 && (
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
)}
</> </>
) )
} }