crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 05:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add faqs section

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-06-14 16:50:46 +07:00
parent a27b02f953
commit c5af5b3069
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
8 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/globals.css
View File

@ -13,3 +13,16 @@ input,
button { button {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900; @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
} }
@layer utilities {
/* Hide scrollbar for WebKit browsers */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
}

2
app/layout.tsx
View File

@ -35,7 +35,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" className={GeistSans.variable}> <html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="bg-white text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<header> <header>
<Banner /> <Banner />
<Navbar /> <Navbar />

2
app/page.tsx
View File

@ -34,7 +34,7 @@ export default async function HomePage() {
<WhyChoose /> <WhyChoose />
</Suspense> </Suspense>
<Suspense> <Suspense>
<FAQ /> <FAQ handle="home-page-faqs" />
</Suspense> </Suspense>
<Suspense> <Suspense>
<Manufacturers /> <Manufacturers />

67
app/search/[collection]/page.tsx
View File

@ -59,7 +59,7 @@ async function CategoryPage({
<MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} /> <MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
<SortingMenu /> <SortingMenu />
</div> </div>
<Grid className="grid-cols-1 sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3"> <Grid className="hide-scrollbar max-h-[1000px] grid-cols-1 overflow-y-auto sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
{products.length === 0 ? ( {products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p> <p className="py-3 text-lg">{`No products found in this collection`}</p>
) : ( ) : (
@ -81,38 +81,43 @@ export default async function CategorySearchPage(props: {
searchParams?: { [key: string]: string | string[] | undefined }; searchParams?: { [key: string]: string | string[] | undefined };
}) { }) {
return ( return (
<div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4"> <>
<aside className="hidden lg:block"> <div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
<div className="mb-5"> <aside className="hidden lg:block">
<Suspense fallback={<YMMFiltersPlaceholder />}> <div className="mb-5">
<YMMFilters /> <Suspense fallback={<YMMFiltersPlaceholder />}>
<YMMFilters />
</Suspense>
</div>
<SubMenu collection={props.params.collection} />
<h3 className="sr-only">Filters</h3>
<Suspense
fallback={<FiltersListPlaceholder />}
key={`filters-${props.params.collection}`}
>
<FiltersContainer searchParams={props.searchParams} />
<HelpfulLinks collection={props.params.collection} />
</Suspense>
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
<Breadcrumb type="collection" handle={props.params.collection} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
</Suspense>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<CategoryPage {...props} />
</Suspense> </Suspense>
</div> </div>
<SubMenu collection={props.params.collection} />
<h3 className="sr-only">Filters</h3>
<Suspense fallback={<FiltersListPlaceholder />} key={`filters-${props.params.collection}`}>
<FiltersContainer searchParams={props.searchParams} />
<HelpfulLinks collection={props.params.collection} />
</Suspense>
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
<Breadcrumb type="collection" handle={props.params.collection} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
</Suspense>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<CategoryPage {...props} />
</Suspense>
</div> </div>
</div> </>
); );
} }

5
app/search/layout.tsx
View File

@ -1,12 +1,15 @@
import FAQ from 'components/faq';
import Footer from 'components/layout/footer'; import Footer from 'components/layout/footer';
import { Suspense } from 'react'; import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<> <>
<div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]"> <div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-10 lg:min-h-[800px]">
<Suspense>{children}</Suspense> <Suspense>{children}</Suspense>
</div> </div>
<FAQ handle="plp-faqs" />
<Footer /> <Footer />
</> </>
); );

7
components/faq.tsx
View File

@ -1,16 +1,13 @@
import { PhoneIcon } from '@heroicons/react/24/outline'; import { PhoneIcon } from '@heroicons/react/24/outline';
import { getMetaobject } from 'lib/shopify'; import { getMetaobject } from 'lib/shopify';
import kebabCase from 'lodash.kebabcase';
import Image from 'next/image'; import Image from 'next/image';
import { Suspense } from 'react'; import { Suspense } from 'react';
import AccordionBlock from './page/accordion-block'; import AccordionBlock from './page/accordion-block';
import Tag from './tag'; import Tag from './tag';
const { SITE_NAME } = process.env; const FAQ = async ({ handle }: { handle: string }) => {
const FAQ = async () => {
const faqs = await getMetaobject({ const faqs = await getMetaobject({
handle: { handle: `${kebabCase(SITE_NAME)}-faqs`, type: 'accordion' } handle: { handle, type: 'accordion' }
}); });
if (!faqs) return null; if (!faqs) return null;

4
components/home-page/about.tsx
View File

@ -1,15 +1,13 @@
import DisplayTabs from 'components/display-tabs'; import DisplayTabs from 'components/display-tabs';
import RichTextDisplay from 'components/page/rich-text-display'; import RichTextDisplay from 'components/page/rich-text-display';
import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify'; import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify';
import kebabCase from 'lodash.kebabcase';
import Image from 'next/image'; import Image from 'next/image';
import Tag from '../tag'; import Tag from '../tag';
import ButtonLink from './button-link'; import ButtonLink from './button-link';
const { SITE_NAME } = process.env;
const About = async () => { const About = async () => {
const aboutUs = await getMetaobject({ const aboutUs = await getMetaobject({
handle: { type: 'about_us', handle: `${kebabCase(SITE_NAME)}-about` } handle: { type: 'about_us', handle: 'about-us' }
}); });
if (!aboutUs) return null; if (!aboutUs) return null;

3
components/home-page/why-choose.tsx
View File

@ -1,14 +1,13 @@
import ImageDisplay from 'components/page/image-display'; import ImageDisplay from 'components/page/image-display';
import RichTextDisplay from 'components/page/rich-text-display'; import RichTextDisplay from 'components/page/rich-text-display';
import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify'; import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify';
import kebabCase from 'lodash.kebabcase';
import { Suspense } from 'react'; import { Suspense } from 'react';
import Tag from '../tag'; import Tag from '../tag';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
const WhyChoose = async () => { const WhyChoose = async () => {
const whyChooseContent = await getMetaobject({ const whyChooseContent = await getMetaobject({
handle: { type: 'why_choose', handle: `${kebabCase(SITE_NAME)}-why-choose` } handle: { type: 'why_choose', handle: 'why-choose' }
}); });
if (!whyChooseContent || !whyChooseContent.items) return null; if (!whyChooseContent || !whyChooseContent.items) return null;