From d09c98bba2ee83fb51b17494354a42b6c38446ab Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Tue, 7 Jan 2025 14:22:42 +0100 Subject: [PATCH] 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'