From d09c98bba2ee83fb51b17494354a42b6c38446ab Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Tue, 7 Jan 2025 14:22:42 +0100 Subject: [PATCH 1/8] Added support for loading CMS Pages from Magento --- .changeset/gentle-rules-learn.md | 5 +++ .../magento-open-source/pages/[...url].tsx | 40 ++++++++++++++----- .../magento-cms/CmsPageQueryFragment.graphql | 7 ---- .../CmsPageContent}/CmsPageContent.graphql | 0 .../CmsPageContent}/CmsPageContent.tsx | 10 ++--- .../CmsPageMeta}/CmsPageMeta.graphql | 0 .../CmsPageMeta}/CmsPageMeta.tsx | 0 packages/magento-cms/graphql/CmsPage.graphql | 7 ++++ packages/magento-cms/index.ts | 7 +++- 9 files changed, 53 insertions(+), 23 deletions(-) create mode 100644 .changeset/gentle-rules-learn.md delete mode 100644 packages/magento-cms/CmsPageQueryFragment.graphql rename packages/magento-cms/{ => components/CmsPageContent}/CmsPageContent.graphql (100%) rename packages/magento-cms/{ => components/CmsPageContent}/CmsPageContent.tsx (58%) rename packages/magento-cms/{ => components/CmsPageMeta}/CmsPageMeta.graphql (100%) rename packages/magento-cms/{ => components/CmsPageMeta}/CmsPageMeta.tsx (100%) create mode 100644 packages/magento-cms/graphql/CmsPage.graphql diff --git a/.changeset/gentle-rules-learn.md b/.changeset/gentle-rules-learn.md new file mode 100644 index 0000000000..37b588f06e --- /dev/null +++ b/.changeset/gentle-rules-learn.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/magento-cms': patch +--- + +Added support for loading CMS Pages from Magento diff --git a/examples/magento-open-source/pages/[...url].tsx b/examples/magento-open-source/pages/[...url].tsx index 53e75d4c71..5cb91e5e3f 100644 --- a/examples/magento-open-source/pages/[...url].tsx +++ b/examples/magento-open-source/pages/[...url].tsx @@ -9,6 +9,8 @@ import { findParentBreadcrumbItem, getCategoryStaticPaths, } from '@graphcommerce/magento-category' +import type { CmsPageQuery } from '@graphcommerce/magento-cms' +import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms' import type { FilterTypes, ProductFiltersQuery, @@ -26,7 +28,12 @@ import { productListLink, useProductList, } from '@graphcommerce/magento-product' -import { redirectOrNotFound, redirectTo, StoreConfigDocument } from '@graphcommerce/magento-store' +import { + PageMeta, + redirectOrNotFound, + redirectTo, + StoreConfigDocument, +} from '@graphcommerce/magento-store' import type { GetStaticProps } from '@graphcommerce/next-ui' import { Container, LayoutHeader, LayoutTitle } from '@graphcommerce/next-ui' import { i18n } from '@lingui/core' @@ -43,7 +50,8 @@ import type { CategoryPageQuery } from '../graphql/CategoryPage.gql' import { CategoryPageDocument } from '../graphql/CategoryPage.gql' import { graphqlSharedClient, graphqlSsrClient } from '../lib/graphql/graphqlSsrClient' -export type CategoryProps = CategoryPageQuery & +export type CategoryProps = CmsPageQuery & + CategoryPageQuery & ProductListQuery & ProductFiltersQuery & { filterTypes?: FilterTypes; params?: ProductListParams } export type CategoryRoute = { url: string[] } @@ -52,7 +60,7 @@ type GetPageStaticPaths = GetStaticPaths type GetPageStaticProps = GetStaticProps function CategoryPage(props: CategoryProps) { - const { categories, ...rest } = props + const { categories, cmsPage, ...rest } = props const productList = useProductList({ ...rest, category: categories?.items?.[0], @@ -64,14 +72,24 @@ function CategoryPage(props: CategoryProps) { return ( - {category?.name} + {cmsPage && ( + <> + + + + )} {isCategory && isLanding && ( <> + + {import.meta.graphCommerce.breadcrumbs && ( + + {import.meta.graphCommerce.productFiltersPro && import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && ( { const staticClient = graphqlSsrClient(context) - const categoryPage = staticClient.query({ - query: CategoryPageDocument, - variables: { url }, - }) + const categoryPage = staticClient.query({ query: CategoryPageDocument, variables: { url } }) + const cmsPage = staticClient.query({ query: CmsPageDocument, variables: { url } }) + const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: cacheFirst(staticClient), @@ -197,7 +216,9 @@ export const getStaticProps: GetPageStaticProps = async (context) => { }) : undefined - if (!hasCategory) return redirectOrNotFound(staticClient, conf, params, locale) + const hasPage = (await cmsPage).data.cmsPage + + if (!hasCategory && !hasPage) return redirectOrNotFound(staticClient, conf, params, locale) if ((await products)?.errors) { const totalPages = (await filters)?.data.filters?.page_info?.total_pages ?? 0 @@ -223,6 +244,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => { ...(await products)?.data, ...(await filters)?.data, ...(await layout).data, + ...(await cmsPage).data, filterTypes: await filterTypes, params: productListParams, apolloState: await conf.then(() => client.cache.extract()), diff --git a/packages/magento-cms/CmsPageQueryFragment.graphql b/packages/magento-cms/CmsPageQueryFragment.graphql deleted file mode 100644 index f9df21a030..0000000000 --- a/packages/magento-cms/CmsPageQueryFragment.graphql +++ /dev/null @@ -1,7 +0,0 @@ -fragment CmsPageQueryFragment on Query { - cmsPage(identifier: $urlKey) { - identifier - ...CmsPageMeta - ...CmsPageContent - } -} diff --git a/packages/magento-cms/CmsPageContent.graphql b/packages/magento-cms/components/CmsPageContent/CmsPageContent.graphql similarity index 100% rename from packages/magento-cms/CmsPageContent.graphql rename to packages/magento-cms/components/CmsPageContent/CmsPageContent.graphql diff --git a/packages/magento-cms/CmsPageContent.tsx b/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx similarity index 58% rename from packages/magento-cms/CmsPageContent.tsx rename to packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx index a14623733b..cfff46e86b 100644 --- a/packages/magento-cms/CmsPageContent.tsx +++ b/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx @@ -1,19 +1,19 @@ import { Container, Typography } from '@mui/material' import type { CmsPageContentFragment } from './CmsPageContent.gql' -export type CmsPageContentProps = CmsPageContentFragment +export type CmsPageContentProps = { cmsPage: CmsPageContentFragment } export function CmsPageContent(props: CmsPageContentProps) { - const { content_heading, content } = props + const { cmsPage } = props return ( - {content_heading && ( + {cmsPage.content_heading && ( - {content_heading} + {cmsPage.content_heading} )} {/* eslint-disable-next-line react/no-danger */} - {content &&
} + {cmsPage.content &&
} ) } diff --git a/packages/magento-cms/CmsPageMeta.graphql b/packages/magento-cms/components/CmsPageMeta/CmsPageMeta.graphql similarity index 100% rename from packages/magento-cms/CmsPageMeta.graphql rename to packages/magento-cms/components/CmsPageMeta/CmsPageMeta.graphql diff --git a/packages/magento-cms/CmsPageMeta.tsx b/packages/magento-cms/components/CmsPageMeta/CmsPageMeta.tsx similarity index 100% rename from packages/magento-cms/CmsPageMeta.tsx rename to packages/magento-cms/components/CmsPageMeta/CmsPageMeta.tsx diff --git a/packages/magento-cms/graphql/CmsPage.graphql b/packages/magento-cms/graphql/CmsPage.graphql new file mode 100644 index 0000000000..e16c96f1a5 --- /dev/null +++ b/packages/magento-cms/graphql/CmsPage.graphql @@ -0,0 +1,7 @@ +query CmsPage($url: String!) { + cmsPage(identifier: $url) { + identifier + ...CmsPageMeta + ...CmsPageContent + } +} diff --git a/packages/magento-cms/index.ts b/packages/magento-cms/index.ts index b9e40d2078..88f6b6f9b3 100644 --- a/packages/magento-cms/index.ts +++ b/packages/magento-cms/index.ts @@ -1,2 +1,5 @@ -export * from './CmsPageContent' -export * from './CmsPageMeta' +export * from './components/CmsPageContent/CmsPageContent' +export * from './components/CmsPageContent/CmsPageContent.gql' +export * from './components/CmsPageMeta/CmsPageMeta' +export * from './components/CmsPageMeta/CmsPageMeta.gql' +export * from './graphql/CmsPage.gql' From 9ec5b68e9758ef28b6325aa527fe4a24e17e9c03 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Tue, 7 Jan 2025 15:56:32 +0100 Subject: [PATCH 2/8] =?UTF-8?q?Solve=20issue=20where=20the=20pagebuilder?= =?UTF-8?q?=20fields=20wouldn=E2=80=99t=20be=20send=20to=20the=20CategoryD?= =?UTF-8?q?escription=20component.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductListLayout/ProductListLayoutClassic.tsx | 2 +- .../ProductListLayout/ProductListLayoutDefault.tsx | 2 +- .../ProductListLayout/ProductListLayoutSidebar.tsx | 6 +----- .../ProductListLayout/ProductListLayoutClassic.tsx | 2 +- .../ProductListLayout/ProductListLayoutDefault.tsx | 2 +- .../ProductListLayout/ProductListLayoutSidebar.tsx | 6 +----- packages/next-ui/Container/Container.tsx | 1 + 7 files changed, 7 insertions(+), 14 deletions(-) diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx index 8e45fcfab4..92eb54db7c 100644 --- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx +++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx @@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) ({ textAlign: 'center', mb: theme.spacings.sm })} - description={category?.description} + {...category} /> ({ px: theme.page.horizontal })} - description={category?.description} + {...category} /> ({ diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx index 94c00bb2ef..8ffc656894 100644 --- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx +++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx @@ -95,11 +95,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) <> {title} - + theme.breakpoints.down('md')}> {category?.children} diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx index 9ea8232713..9b5771cc67 100644 --- a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx +++ b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx @@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) ({ textAlign: 'center', mb: theme.spacings.sm })} - description={category?.description} + {...category} /> ({ px: theme.page.horizontal })} - description={category?.description} + {...category} /> ({ diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx index 9b44bc43a7..3ddf308f3f 100644 --- a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx +++ b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx @@ -96,11 +96,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) <> {title} - + theme.breakpoints.down('md')}> {category?.children} diff --git a/packages/next-ui/Container/Container.tsx b/packages/next-ui/Container/Container.tsx index b726ce2fec..d328ef07e4 100644 --- a/packages/next-ui/Container/Container.tsx +++ b/packages/next-ui/Container/Container.tsx @@ -76,6 +76,7 @@ export const Container = React.forwardRef( className={[className, classes.root].filter((v) => !!v).join(' ')} sx={[ { + width: '100%', pl: !breakoutLeft ? padding : undefined, pr: !breakoutRight ? padding : undefined, '&.breakoutLeft': { pl: 'unset' }, From 16a3b73af173695605a0e8dfaa57777391e8b99d Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Wed, 8 Jan 2025 14:36:59 +0100 Subject: [PATCH 3/8] Solve issue where the performanceLink was only activated during production while it should have been during development. --- .changeset/red-lies-drive.md | 7 +++++++ examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts | 2 +- .../magento-open-source/lib/graphql/graphqlSsrClient.ts | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/red-lies-drive.md diff --git a/.changeset/red-lies-drive.md b/.changeset/red-lies-drive.md new file mode 100644 index 0000000000..932d9a92ac --- /dev/null +++ b/.changeset/red-lies-drive.md @@ -0,0 +1,7 @@ +--- +'@graphcommerce/magento-graphcms': patch +'@graphcommerce/magento-open-source': patch +'@graphcommerce/misc': patch +--- + +Solve issue where the performanceLink was only activated during production while it should have been during development. diff --git a/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts b/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts index 8ddb39e650..201f3d3fa3 100644 --- a/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts +++ b/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts @@ -25,7 +25,7 @@ function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-c return new ApolloClient({ link: ApolloLink.from([ - ...(process.env.NODE_ENV === 'production' ? [measurePerformanceLink] : []), + ...(process.env.NODE_ENV !== 'production' ? [measurePerformanceLink] : []), errorLink, ...config.links, new MeshApolloLink(getBuiltMesh()), diff --git a/examples/magento-open-source/lib/graphql/graphqlSsrClient.ts b/examples/magento-open-source/lib/graphql/graphqlSsrClient.ts index aee0976741..05a7f230bd 100644 --- a/examples/magento-open-source/lib/graphql/graphqlSsrClient.ts +++ b/examples/magento-open-source/lib/graphql/graphqlSsrClient.ts @@ -27,7 +27,7 @@ function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-c return new ApolloClient({ link: ApolloLink.from([ - ...(process.env.NODE_ENV === 'production' ? [measurePerformanceLink] : []), + ...(process.env.NODE_ENV !== 'production' ? [measurePerformanceLink] : []), errorLink, ...config.links, new MeshApolloLink(getBuiltMesh()), From 87df248a7154eed415da935d33f3cc6e48159ec9 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Wed, 8 Jan 2025 14:37:49 +0100 Subject: [PATCH 4/8] Solve issue where plurals weren't properly defined --- .changeset/wicked-carpets-tie.md | 6 ++++++ examples/magento-graphcms/locales/nl.po | 2 +- examples/magento-open-source/locales/it.po | 2 +- examples/magento-open-source/locales/nl.po | 2 +- packages/next-ui/utils/sxx.ts | 4 +++- 5 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 .changeset/wicked-carpets-tie.md diff --git a/.changeset/wicked-carpets-tie.md b/.changeset/wicked-carpets-tie.md new file mode 100644 index 0000000000..8c8bbea6a4 --- /dev/null +++ b/.changeset/wicked-carpets-tie.md @@ -0,0 +1,6 @@ +--- +'@graphcommerce/magento-open-source': patch +'@graphcommerce/misc': patch +--- + +Solve issue where plurals weren't properly defined diff --git a/examples/magento-graphcms/locales/nl.po b/examples/magento-graphcms/locales/nl.po index 0890f06a45..bd7e6d8718 100644 --- a/examples/magento-graphcms/locales/nl.po +++ b/examples/magento-graphcms/locales/nl.po @@ -19,7 +19,7 @@ msgstr "Dit zal al uw gegevens verwijderen, inclusief bestelgeschiedenis en opge #. js-lingui-generated-id msgid "{0, plural, one {<0>{addedItems} has been added to your shopping cart} two {<1>{addedItems} have been added to your shopping cart!} other {# products have been added to your shopping cart!}}" -msgstr "{0, plural, one {<0>{addedItems} is toegevoegd aan uw winkelwagen} two {<1>{addedItems} is toegevoegd aan uw winkelwagen!} other {# producten zijn toegevoegd aan uw winkelwagen!}}" +msgstr "{0, plural, one {<0>{addedItems} is toegevoegd aan je winkelwagen} two {<1>{addedItems} zijn toegevoegd aan je winkelwagen!} other {# producten zijn toegevoegd aan je winkelwagen!}}" #. js-lingui-generated-id msgid "I understand that my account will be deleted and this can not be undone." diff --git a/examples/magento-open-source/locales/it.po b/examples/magento-open-source/locales/it.po index ce1b894482..ac551b222a 100644 --- a/examples/magento-open-source/locales/it.po +++ b/examples/magento-open-source/locales/it.po @@ -19,7 +19,7 @@ msgstr "In tal modo verranno rimossi tutti i tuoi dati, inclusa la cronologia de #. js-lingui-generated-id msgid "{0, plural, one {<0>{addedItems} has been added to your shopping cart} two {<1>{addedItems} have been added to your shopping cart!} other {# products have been added to your shopping cart!}}" -msgstr "{0, plural, one {<0>{addedItems} è stato aggiunto al tuo carrello} two {<1>{addedItems} sono stati aggiunti al tuo carrello!} altro {# prodotti sono stati aggiunti al tuo carrello!}}" +msgstr "{0, plural, one {<0>{addedItems} è stato aggiunto al tuo carrello} two {<1>{addedItems} sono stati aggiunti al tuo carrello!} other {# prodotti sono stati aggiunti al tuo carrello!}}" #. js-lingui-generated-id msgid "I understand that my account will be deleted and this can not be undone." diff --git a/examples/magento-open-source/locales/nl.po b/examples/magento-open-source/locales/nl.po index 8aeed6b453..75d49c76aa 100644 --- a/examples/magento-open-source/locales/nl.po +++ b/examples/magento-open-source/locales/nl.po @@ -19,7 +19,7 @@ msgstr "Dit zal al uw gegevens verwijderen, inclusief bestelgeschiedenis en opge #. js-lingui-generated-id msgid "{0, plural, one {<0>{addedItems} has been added to your shopping cart} two {<1>{addedItems} have been added to your shopping cart!} other {# products have been added to your shopping cart!}}" -msgstr "{0, plural, one {<0>{addedItems} is toegevoegd aan je winkelwagen} two {<1>{addedItems} zijn toegevoegd aan je winkelwagen!} andere {# producten zijn toegevoegd aan je winkelwagen!}}" +msgstr "{0, plural, one {<0>{addedItems} is toegevoegd aan je winkelwagen} two {<1>{addedItems} zijn toegevoegd aan je winkelwagen!} other {# producten zijn toegevoegd aan je winkelwagen!}}" #. js-lingui-generated-id msgid "I understand that my account will be deleted and this can not be undone." diff --git a/packages/next-ui/utils/sxx.ts b/packages/next-ui/utils/sxx.ts index 5d272474f2..a9a120a5ce 100644 --- a/packages/next-ui/utils/sxx.ts +++ b/packages/next-ui/utils/sxx.ts @@ -9,7 +9,9 @@ import type { SxProps, Theme } from '@mui/material' * sxx({ position: 'absolute', right: 0, top: 0 }, props.sx) * ``` */ -export const sxx = (...sxPropsArray: (SxProps | undefined | false)[]): SxProps => +export const sxx = ( + ...sxPropsArray: (SxProps | undefined | null | false)[] +): SxProps => sxPropsArray .filter((v) => !!v) .map((sx) => (Array.isArray(sx) ? sx : [sx])) From 590f06460955aa6435a3a16569805f38d4b7d6d6 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Wed, 8 Jan 2025 15:16:45 +0100 Subject: [PATCH 5/8] Move the category fragment to the category prop --- .changeset/silly-tigers-scream.md | 5 +++++ .../ProductListLayoutClassic.tsx | 2 +- .../ProductListLayoutDefault.tsx | 2 +- .../ProductListLayoutSidebar.tsx | 2 +- .../ProductListLayoutClassic.tsx | 2 +- .../ProductListLayoutDefault.tsx | 2 +- .../ProductListLayoutSidebar.tsx | 2 +- .../CategoryDescription/CategoryDescription.tsx | 17 ++++++----------- 8 files changed, 17 insertions(+), 17 deletions(-) create mode 100644 .changeset/silly-tigers-scream.md diff --git a/.changeset/silly-tigers-scream.md b/.changeset/silly-tigers-scream.md new file mode 100644 index 0000000000..3c681854d0 --- /dev/null +++ b/.changeset/silly-tigers-scream.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/magento-category': patch +--- + +Move the category fragment to the category prop diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx index 92eb54db7c..046155e6e0 100644 --- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx +++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx @@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) ({ textAlign: 'center', mb: theme.spacings.sm })} - {...category} + category={category} /> ({ px: theme.page.horizontal })} - {...category} + category={category} /> ({ diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx index 8ffc656894..51a737d026 100644 --- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx +++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx @@ -95,7 +95,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) <> {title} - + theme.breakpoints.down('md')}> {category?.children} diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx index 9b5771cc67..995b147552 100644 --- a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx +++ b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx @@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) ({ textAlign: 'center', mb: theme.spacings.sm })} - {...category} + category={category} /> ({ px: theme.page.horizontal })} - {...category} + category={category} /> ({ diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx index 3ddf308f3f..0bf6cdf0c7 100644 --- a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx +++ b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx @@ -96,7 +96,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) <> {title} - + theme.breakpoints.down('md')}> {category?.children} diff --git a/packages/magento-category/components/CategoryDescription/CategoryDescription.tsx b/packages/magento-category/components/CategoryDescription/CategoryDescription.tsx index 33f8056bed..3d811962d2 100644 --- a/packages/magento-category/components/CategoryDescription/CategoryDescription.tsx +++ b/packages/magento-category/components/CategoryDescription/CategoryDescription.tsx @@ -14,19 +14,14 @@ const { withState } = extendableComponent & - StateProps & { sx?: SxProps } +export type CategoryDescriptionProps = StateProps & { + sx?: SxProps + category: Omit +} export function CategoryDescription(props: CategoryDescriptionProps) { - const { - name, - description, - display_mode, - sx = [], - textAlignSm = 'center', - textAlignMd = 'center', - ...divProps - } = props + const { category, sx = [], textAlignSm = 'center', textAlignMd = 'center', ...divProps } = props + const { description } = category const classes = withState({ textAlignSm, textAlignMd }) From 32bccbba4b000247d7e01e487f6d48b6dec07fb5 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Wed, 8 Jan 2025 16:11:48 +0100 Subject: [PATCH 6/8] Nesting multiple Containers will not increase the padding, will only be applied once. --- .changeset/hip-buckets-raise.md | 5 +++++ packages/next-ui/Container/Container.tsx | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/hip-buckets-raise.md diff --git a/.changeset/hip-buckets-raise.md b/.changeset/hip-buckets-raise.md new file mode 100644 index 0000000000..957cd26316 --- /dev/null +++ b/.changeset/hip-buckets-raise.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Nesting multiple Containers will not increase the padding, will only be applied once. diff --git a/packages/next-ui/Container/Container.tsx b/packages/next-ui/Container/Container.tsx index d328ef07e4..dfa94f56bf 100644 --- a/packages/next-ui/Container/Container.tsx +++ b/packages/next-ui/Container/Container.tsx @@ -81,6 +81,9 @@ export const Container = React.forwardRef( pr: !breakoutRight ? padding : undefined, '&.breakoutLeft': { pl: 'unset' }, '&.breakoutRight': { pr: 'unset' }, + + // Nesting containers will not have padding applied. + '.MuiContainer-root &': { pl: 0, pr: 0 }, }, ...(Array.isArray(sx) ? sx : [sx]), ]} From d85b05f4ee7a8bb6fe48f1c0bc195c78807bdabd Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Thu, 16 Jan 2025 11:37:40 +0100 Subject: [PATCH 7/8] =?UTF-8?q?Convert=20home=20to=20render=20the=20home?= =?UTF-8?q?=20CmsPage=20and=20add=20page/[=E2=80=A6url]=20route=20for=20ad?= =?UTF-8?q?ditional=20pages.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../magento-open-source/pages/[...url].tsx | 29 +----- examples/magento-open-source/pages/index.tsx | 98 +++++-------------- .../pages/page/[...url].tsx | 98 +++++++++++++++++++ .../CmsPageContent/CmsPageContent.tsx | 7 +- packages/magento-cms/graphql/CmsPage.graphql | 12 ++- .../graphql/CmsPageFragment.graphql | 5 + packages/magento-cms/index.ts | 1 + 7 files changed, 141 insertions(+), 109 deletions(-) create mode 100644 examples/magento-open-source/pages/page/[...url].tsx create mode 100644 packages/magento-cms/graphql/CmsPageFragment.graphql diff --git a/examples/magento-open-source/pages/[...url].tsx b/examples/magento-open-source/pages/[...url].tsx index 5cb91e5e3f..b747f654ca 100644 --- a/examples/magento-open-source/pages/[...url].tsx +++ b/examples/magento-open-source/pages/[...url].tsx @@ -9,8 +9,6 @@ import { findParentBreadcrumbItem, getCategoryStaticPaths, } from '@graphcommerce/magento-category' -import type { CmsPageQuery } from '@graphcommerce/magento-cms' -import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms' import type { FilterTypes, ProductFiltersQuery, @@ -28,12 +26,7 @@ import { productListLink, useProductList, } from '@graphcommerce/magento-product' -import { - PageMeta, - redirectOrNotFound, - redirectTo, - StoreConfigDocument, -} from '@graphcommerce/magento-store' +import { redirectOrNotFound, redirectTo, StoreConfigDocument } from '@graphcommerce/magento-store' import type { GetStaticProps } from '@graphcommerce/next-ui' import { Container, LayoutHeader, LayoutTitle } from '@graphcommerce/next-ui' import { i18n } from '@lingui/core' @@ -50,8 +43,7 @@ import type { CategoryPageQuery } from '../graphql/CategoryPage.gql' import { CategoryPageDocument } from '../graphql/CategoryPage.gql' import { graphqlSharedClient, graphqlSsrClient } from '../lib/graphql/graphqlSsrClient' -export type CategoryProps = CmsPageQuery & - CategoryPageQuery & +export type CategoryProps = CategoryPageQuery & ProductListQuery & ProductFiltersQuery & { filterTypes?: FilterTypes; params?: ProductListParams } export type CategoryRoute = { url: string[] } @@ -60,7 +52,7 @@ type GetPageStaticPaths = GetStaticPaths type GetPageStaticProps = GetStaticProps function CategoryPage(props: CategoryProps) { - const { categories, cmsPage, ...rest } = props + const { categories, ...rest } = props const productList = useProductList({ ...rest, category: categories?.items?.[0], @@ -77,15 +69,6 @@ function CategoryPage(props: CategoryProps) { {category?.name} - {cmsPage && ( - <> - - - - )} {isCategory && isLanding && ( <> @@ -176,7 +159,6 @@ export const getStaticProps: GetPageStaticProps = async (context) => { const staticClient = graphqlSsrClient(context) const categoryPage = staticClient.query({ query: CategoryPageDocument, variables: { url } }) - const cmsPage = staticClient.query({ query: CmsPageDocument, variables: { url } }) const layout = staticClient.query({ query: LayoutDocument, @@ -216,9 +198,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => { }) : undefined - const hasPage = (await cmsPage).data.cmsPage - - if (!hasCategory && !hasPage) return redirectOrNotFound(staticClient, conf, params, locale) + if (!hasCategory) return redirectOrNotFound(staticClient, conf, params, locale) if ((await products)?.errors) { const totalPages = (await filters)?.data.filters?.page_info?.total_pages ?? 0 @@ -244,7 +224,6 @@ export const getStaticProps: GetPageStaticProps = async (context) => { ...(await products)?.data, ...(await filters)?.data, ...(await layout).data, - ...(await cmsPage).data, filterTypes: await filterTypes, params: productListParams, apolloState: await conf.then(() => client.cache.extract()), diff --git a/examples/magento-open-source/pages/index.tsx b/examples/magento-open-source/pages/index.tsx index 7df0bd249f..3a9a85c446 100644 --- a/examples/magento-open-source/pages/index.tsx +++ b/examples/magento-open-source/pages/index.tsx @@ -1,88 +1,33 @@ import type { PageOptions } from '@graphcommerce/framer-next-pages' import { cacheFirst } from '@graphcommerce/graphql' -import { - ProductListDocument, - ProductListQuery, - ProductPageName, -} from '@graphcommerce/magento-product' +import type { CmsPageFragment } from '@graphcommerce/magento-cms' +import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms' import { StoreConfigDocument } from '@graphcommerce/magento-store' import type { GetStaticProps } from '@graphcommerce/next-ui' -import { - breakpointVal, - HeroBanner, - LayoutHeader, - LayoutTitle, - MetaRobots, - PageMeta, -} from '@graphcommerce/next-ui' -import { Button, Container, Typography } from '@mui/material' +import { Container, isTypename, LayoutHeader, PageMeta } from '@graphcommerce/next-ui' +import { i18n } from '@lingui/core' import type { LayoutNavigationProps } from '../components' import { LayoutDocument, LayoutNavigation } from '../components' import { graphqlSharedClient, graphqlSsrClient } from '../lib/graphql/graphqlSsrClient' -type Props = {} -type RouteProps = { url: string } -type GetPageStaticProps = GetStaticProps +export type CmsPageProps = { cmsPage: CmsPageFragment | null } -function CmsPage(props: Props) { - const {} = props +type GetPageStaticProps = GetStaticProps - return ( - <> - {/* */} +function CmsPage(props: CmsPageProps) { + const { cmsPage } = props - - - Home - - + if (!cmsPage) return Configure cmsPage home - + return ( + <> + + - - Shop Art - - } - videoSrc='https://media.graphassets.com/UNmtIZmWSgmnpUAWcAk0' - sx={(theme) => ({ - '& .HeroBanner-copy': { - minHeight: { xs: 'min(70vh,600px)', md: 'min(70vh,1080px)' }, - [theme.breakpoints.up('sm')]: { - padding: theme.spacings.xl, - justifyItems: 'start', - alignContent: 'center', - textAlign: 'left', - width: '50%', - }, - }, - })} - > - - A journey through creativity - - ({ - textTransform: 'uppercase', - mt: 1, - mb: theme.spacings.sm, - ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values), - '& strong': { - WebkitTextFillColor: 'transparent', - WebkitTextStroke: '1.2px #fff', - }, - })} - > - Discover beauty beyond boundaries. - - + ) } @@ -95,19 +40,24 @@ export default CmsPage export const getStaticProps: GetPageStaticProps = async (context) => { const client = graphqlSharedClient(context) + const conf = client.query({ query: StoreConfigDocument }) const staticClient = graphqlSsrClient(context) - const conf = client.query({ query: StoreConfigDocument }) + const url = (await conf).data.storeConfig?.cms_home_page ?? 'home' + const cmsPageQuery = staticClient.query({ query: CmsPageDocument, variables: { url } }) const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: cacheFirst(staticClient), }) + const cmsPage = (await cmsPageQuery).data.route - return { + const result = { props: { + cmsPage: cmsPage && isTypename(cmsPage, ['CmsPage']) ? cmsPage : null, ...(await layout).data, apolloState: await conf.then(() => client.cache.extract()), }, revalidate: 60 * 20, } + return result } diff --git a/examples/magento-open-source/pages/page/[...url].tsx b/examples/magento-open-source/pages/page/[...url].tsx new file mode 100644 index 0000000000..be47da488f --- /dev/null +++ b/examples/magento-open-source/pages/page/[...url].tsx @@ -0,0 +1,98 @@ +import type { PageOptions } from '@graphcommerce/framer-next-pages' +import { cacheFirst } from '@graphcommerce/graphql' +import { getCategoryStaticPaths } from '@graphcommerce/magento-category' +import type { CmsPageFragment, CmsPageQuery } from '@graphcommerce/magento-cms' +import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms' +import { PageMeta, redirectOrNotFound, StoreConfigDocument } from '@graphcommerce/magento-store' +import { + Container, + isTypename, + LayoutHeader, + LayoutTitle, + type GetStaticProps, +} from '@graphcommerce/next-ui' +import type { GetStaticPaths } from 'next' +import type { LayoutNavigationProps } from '../../components' +import { LayoutDocument, LayoutNavigation } from '../../components' +import { graphqlSharedClient, graphqlSsrClient } from '../../lib/graphql/graphqlSsrClient' + +export type CmsPageProps = { cmsPage: CmsPageFragment } +export type CmsRoute = { url: string[] } + +type GetPageStaticPaths = GetStaticPaths +type GetPageStaticProps = GetStaticProps + +function CmsPage(props: CmsPageProps) { + const { cmsPage } = props + + return ( + <> + + + + + {cmsPage.content_heading ?? cmsPage.title} + + + + {cmsPage.content_heading && ( + + + {cmsPage.content_heading} + + + )} + + + + ) +} + +const pageOptions: PageOptions = { + Layout: LayoutNavigation, +} +CmsPage.pageOptions = pageOptions + +export default CmsPage + +export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => { + // Disable getStaticPaths while in development mode + if (process.env.NODE_ENV === 'development') return { paths: [], fallback: 'blocking' } + + const path = (locale: string) => getCategoryStaticPaths(graphqlSsrClient({ locale }), locale) + const paths = (await Promise.all(locales.map(path))).flat(1) + return { paths, fallback: 'blocking' } +} + +export const getStaticProps: GetPageStaticProps = async (context) => { + const { params, locale } = context + const url = params?.url?.join('/') ?? '' + if (!url) return { notFound: true } + + const client = graphqlSharedClient(context) + const conf = client.query({ query: StoreConfigDocument }) + const staticClient = graphqlSsrClient(context) + + const cmsPageQuery = staticClient.query({ query: CmsPageDocument, variables: { url } }) + const layout = staticClient.query({ + query: LayoutDocument, + fetchPolicy: cacheFirst(staticClient), + }) + + const cmsPage = (await cmsPageQuery).data.route + if (!cmsPage || !isTypename(cmsPage, ['CmsPage'])) + return redirectOrNotFound(staticClient, conf, params, locale) + + const result = { + props: { + cmsPage, + ...(await layout).data, + apolloState: await conf.then(() => client.cache.extract()), + }, + revalidate: 60 * 20, + } + return result +} diff --git a/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx b/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx index cfff46e86b..02e70ab1da 100644 --- a/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx +++ b/packages/magento-cms/components/CmsPageContent/CmsPageContent.tsx @@ -1,4 +1,4 @@ -import { Container, Typography } from '@mui/material' +import { Container } from '@mui/material' import type { CmsPageContentFragment } from './CmsPageContent.gql' export type CmsPageContentProps = { cmsPage: CmsPageContentFragment } @@ -7,11 +7,6 @@ export function CmsPageContent(props: CmsPageContentProps) { const { cmsPage } = props return ( - {cmsPage.content_heading && ( - - {cmsPage.content_heading} - - )} {/* eslint-disable-next-line react/no-danger */} {cmsPage.content &&
} diff --git a/packages/magento-cms/graphql/CmsPage.graphql b/packages/magento-cms/graphql/CmsPage.graphql index e16c96f1a5..662a7e325c 100644 --- a/packages/magento-cms/graphql/CmsPage.graphql +++ b/packages/magento-cms/graphql/CmsPage.graphql @@ -1,7 +1,11 @@ query CmsPage($url: String!) { - cmsPage(identifier: $url) { - identifier - ...CmsPageMeta - ...CmsPageContent + route(url: $url) { + __typename + relative_url + redirect_code + type + ... on CmsPage { + ...CmsPageFragment + } } } diff --git a/packages/magento-cms/graphql/CmsPageFragment.graphql b/packages/magento-cms/graphql/CmsPageFragment.graphql new file mode 100644 index 0000000000..2f7d4e1ef4 --- /dev/null +++ b/packages/magento-cms/graphql/CmsPageFragment.graphql @@ -0,0 +1,5 @@ +fragment CmsPageFragment on CmsPage { + identifier + ...CmsPageMeta + ...CmsPageContent +} diff --git a/packages/magento-cms/index.ts b/packages/magento-cms/index.ts index 88f6b6f9b3..92b1c6edec 100644 --- a/packages/magento-cms/index.ts +++ b/packages/magento-cms/index.ts @@ -3,3 +3,4 @@ export * from './components/CmsPageContent/CmsPageContent.gql' export * from './components/CmsPageMeta/CmsPageMeta' export * from './components/CmsPageMeta/CmsPageMeta.gql' export * from './graphql/CmsPage.gql' +export * from './graphql/CmsPageFragment.gql' From a317221a6ef88dc037985398bf87926a73f7fa48 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Thu, 16 Jan 2025 11:50:56 +0100 Subject: [PATCH 8/8] Cleanup and release notes --- .changeset/brave-penguins-love.md | 5 +++++ examples/magento-open-source/pages/[...url].tsx | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/brave-penguins-love.md diff --git a/.changeset/brave-penguins-love.md b/.changeset/brave-penguins-love.md new file mode 100644 index 0000000000..60ec976cb4 --- /dev/null +++ b/.changeset/brave-penguins-love.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/magento-cms': patch +--- + +Convert home to render the home CmsPage and add page/[…url] route for additional pages. diff --git a/examples/magento-open-source/pages/[...url].tsx b/examples/magento-open-source/pages/[...url].tsx index b747f654ca..ea7a3b0613 100644 --- a/examples/magento-open-source/pages/[...url].tsx +++ b/examples/magento-open-source/pages/[...url].tsx @@ -64,6 +64,7 @@ function CategoryPage(props: CategoryProps) { return ( + {category?.name} @@ -71,8 +72,6 @@ function CategoryPage(props: CategoryProps) { {isCategory && isLanding && ( <> - - {import.meta.graphCommerce.breadcrumbs && ( - - {import.meta.graphCommerce.productFiltersPro && import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && ( { const staticClient = graphqlSsrClient(context) - const categoryPage = staticClient.query({ query: CategoryPageDocument, variables: { url } }) + const categoryPage = staticClient.query({ + query: CategoryPageDocument, + variables: { url }, + }) const layout = staticClient.query({ query: LayoutDocument,