4
0
forked from crowetic/commerce

Added links to pages in the footer

This commit is contained in:
Luis Alvarez 2020-10-15 14:00:41 -05:00
parent a0e5448210
commit a0b85bcf5b
8 changed files with 85 additions and 44 deletions

View File

@ -1,18 +1,25 @@
import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import { Logo } from '@components/ui' import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import getSlug from '@utils/get-slug'
import { Logo } from '@components/ui'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
pages?: Page[]
} }
const Footer: FC<Props> = ({ className }) => { const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
const Footer: FC<Props> = ({ className, pages }) => {
const rootClassName = cn( const rootClassName = cn(
'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto', 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
className className
) )
const { sitePages, legalPages } = getPages(pages)
return ( return (
<div className="bg-black text-white"> <div className="bg-black text-white">
<hr <hr
@ -30,29 +37,27 @@ const Footer: FC<Props> = ({ className }) => {
</Link> </Link>
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1"> <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
<li className="py-3 md:py-0 md:pb-4"> {sitePages.map((page) => (
<Link href="/about"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <Link href={page.url!}>
About <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
</a> {page.name}
</Link> </a>
</li> </Link>
</li>
))}
</ul>
<li className="py-3 md:py-0 md:pb-4"> <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
<Link href="/terms"> {legalPages.map((page) => (
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
Terms of Use <Link href={page.url!}>
</a> <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
</Link> {page.name}
</li> </a>
</Link>
<li className="py-3 md:py-0 md:pb-4"> </li>
<Link href="/privacy"> ))}
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
Privacy Policy
</a>
</Link>
</li>
</ul> </ul>
<small className="text-base"> <small className="text-base">
@ -63,4 +68,31 @@ const Footer: FC<Props> = ({ className }) => {
) )
} }
function getPages(pages?: Page[]) {
const sitePages: Page[] = []
const legalPages: Page[] = []
if (pages) {
pages.forEach((page) => {
if (page.url) {
if (LEGAL_PAGES.includes(getSlug(page.url))) {
legalPages.push(page)
} else {
sitePages.push(page)
}
}
})
}
return {
sitePages: sitePages.sort(bySortOrder),
legalPages: legalPages.sort(bySortOrder),
}
}
// Sort pages by the sort order assigned in the BC dashboard
function bySortOrder(a: Page, b: Page) {
return (a.sort_order ?? 0) - (b.sort_order ?? 0)
}
export default Footer export default Footer

View File

@ -1,22 +1,27 @@
import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
import { Navbar, Featurebar, Footer } from '@components/core' import { Navbar, Featurebar, Footer } from '@components/core'
import { Container, Sidebar } from '@components/ui' import { Container, Sidebar } from '@components/ui'
import { CartSidebarView } from '@components/cart' import { CartSidebarView } from '@components/cart'
import { UIProvider, useUI } from '@components/ui/context' import { UIProvider, useUI } from '@components/ui/context'
interface Props { interface LayoutProps {
className?: string pageProps: {
children?: any pages?: Page[]
}
} }
const CoreLayout: FC<Props> = ({ className, children }) => { interface Props {
const rootClassName = cn('h-full bg-primary', className) children?: any
pages?: Page[]
}
const CoreLayout: FC<Props> = ({ children, pages }) => {
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
return ( return (
<div className={rootClassName}> <div className="h-full bg-primary">
<Featurebar <Featurebar
title="Free Standard Shipping on orders over $99.99" title="Free Standard Shipping on orders over $99.99"
description="Due to COVID-19, some orders may experience processing and delivery delays." description="Due to COVID-19, some orders may experience processing and delivery delays."
@ -25,7 +30,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
<Navbar /> <Navbar />
</Container> </Container>
<main className="fit">{children}</main> <main className="fit">{children}</main>
<Footer /> <Footer pages={pages} />
<Sidebar show={displaySidebar} close={closeSidebar}> <Sidebar show={displaySidebar} close={closeSidebar}>
<CartSidebarView /> <CartSidebarView />
</Sidebar> </Sidebar>
@ -33,10 +38,10 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
) )
} }
const Layout: FC<Props> = (props) => ( const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
<CommerceProvider locale="en-us"> <CommerceProvider locale="en-us">
<UIProvider> <UIProvider>
<CoreLayout {...props} /> <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
</UIProvider> </UIProvider>
</CommerceProvider> </CommerceProvider>
) )

View File

@ -11,18 +11,22 @@ export type GetAllPagesResult<
async function getAllPages(opts?: { async function getAllPages(opts?: {
config?: BigcommerceConfig config?: BigcommerceConfig
preview?: boolean
}): Promise<GetAllPagesResult> }): Promise<GetAllPagesResult>
async function getAllPages<T extends { pages: any[] }, V = any>(opts: { async function getAllPages<T extends { pages: any[] }, V = any>(opts: {
url: string url: string
config?: BigcommerceConfig config?: BigcommerceConfig
preview?: boolean
}): Promise<GetAllPagesResult<T>> }): Promise<GetAllPagesResult<T>>
async function getAllPages({ async function getAllPages({
config, config,
preview,
}: { }: {
url?: string url?: string
config?: BigcommerceConfig config?: BigcommerceConfig
preview?: boolean
} = {}): Promise<GetAllPagesResult> { } = {}): Promise<GetAllPagesResult> {
config = getConfig(config) config = getConfig(config)
// RecursivePartial forces the method to check for every prop in the data, which is // RecursivePartial forces the method to check for every prop in the data, which is
@ -30,9 +34,10 @@ async function getAllPages({
const { data } = await config.storeApiFetch< const { data } = await config.storeApiFetch<
RecursivePartial<{ data: Page[] }> RecursivePartial<{ data: Page[] }>
>('/v3/content/pages') >('/v3/content/pages')
const pages = (data as RecursiveRequired<typeof data>) ?? []
return { return {
pages: (data as RecursiveRequired<typeof data>) ?? [], pages: preview ? pages : pages.filter((p) => p.is_visible),
} }
} }

View File

@ -25,7 +25,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
<ThemeProvider> <ThemeProvider>
<SSRProvider> <SSRProvider>
<OverlayProvider> <OverlayProvider>
<Layout> <Layout pageProps={pageProps}>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout> </Layout>
</OverlayProvider> </OverlayProvider>

View File

@ -17,13 +17,10 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
} }
export default function Home({ export default function Home({
pages,
products, products,
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
console.log('PAGES', pages)
return ( return (
<div className="mt-3"> <div className="mt-3">
<Grid items={products.slice(0, 3)} wrapper={ProductCard} /> <Grid items={products.slice(0, 3)} wrapper={ProductCard} />

View File

@ -7,11 +7,11 @@ import useSearch from '@lib/bigcommerce/products/use-search'
import { Layout } from '@components/core' import { Layout } from '@components/core'
import { Container, Grid, Skeleton } from '@components/ui' import { Container, Grid, Skeleton } from '@components/ui'
import { ProductCard } from '@components/product' import { ProductCard } from '@components/product'
import getSlug from '@utils/get-slug'
import { import {
filterQuery, filterQuery,
getCategoryPath, getCategoryPath,
getDesignerPath, getDesignerPath,
getSlug,
useSearchMeta, useSearchMeta,
} from '@utils/search' } from '@utils/search'
import { range } from 'lodash' import { range } from 'lodash'

5
utils/get-slug.ts Normal file
View File

@ -0,0 +1,5 @@
// Remove trailing and leading slash, usually included in nodes
// returned by the BigCommerce API
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
export default getSlug

View File

@ -34,9 +34,6 @@ export const filterQuery = (query: any) =>
return obj return obj
}, {}) }, {})
// Remove trailing and leading slash
export const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
export const getCategoryPath = (slug: string, brand?: string) => export const getCategoryPath = (slug: string, brand?: string) =>
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}` `/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`