{/* 3. Render the route's content sections */}
);
}
```
***
## Step 6: Add metaobjects to homepage
Integrate the `RouteContent` component to render metaobject sections on the homepage.
#### File: [\_index.tsx](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/templates/skeleton/app/routes/_index.tsx) ([patch](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/patches/_index.tsx.243e26.patch))
## File
```diff
@@ -1,19 +1,11 @@
-import {
- Await,
- useLoaderData,
- Link,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
import type {Route} from './+types/_index';
-import {Suspense} from 'react';
-import {Image} from '@shopify/hydrogen';
-import type {
- FeaturedCollectionFragment,
- RecommendedProductsQuery,
-} from 'storefrontapi.generated';
-import {ProductItem} from '~/components/ProductItem';
+
+// @description Add metaobject content imports
+import {ROUTE_CONTENT_QUERY, RouteContent} from '~/sections/RouteContent';
export const meta: Route.MetaFunction = () => {
- return [{title: 'Hydrogen | Home'}];
+ return [{title: 'Hydrogen Metaobject | Home'}];
};
export async function loader(args: Route.LoaderArgs) {
@@ -31,14 +23,18 @@ export async function loader(args: Route.LoaderArgs) {
* needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
*/
async function loadCriticalData({context}: Route.LoaderArgs) {
- const [{collections}] = await Promise.all([
- context.storefront.query(FEATURED_COLLECTION_QUERY),
+ const {storefront} = context;
+
+ // @description Query the home route metaobject
+ const [{route}] = await Promise.all([
+ storefront.query(ROUTE_CONTENT_QUERY, {
+ variables: {handle: 'route-home'},
+ cache: storefront.CacheNone(),
+ }),
// Add other queries here, so that they are loaded in parallel
]);
- return {
- featuredCollection: collections.nodes[0],
- };
+ return {route};
}
/**
@@ -47,125 +43,17 @@ async function loadCriticalData({context}: Route.LoaderArgs) {
* Make sure to not throw any errors here, as it will cause the page to 500.
*/
function loadDeferredData({context}: Route.LoaderArgs) {
- const recommendedProducts = context.storefront
- .query(RECOMMENDED_PRODUCTS_QUERY)
- .catch((error: Error) => {
- // Log query errors, but don't throw them so the page can still render
- console.error(error);
- return null;
- });
-
- return {
- recommendedProducts,
- };
+ // No deferred data for this route
+ return {};
}
export default function Homepage() {
- const data = useLoaderData
-
);
}
-
-function FeaturedCollection({
- collection,
-}: {
- collection: FeaturedCollectionFragment;
-}) {
- if (!collection) return null;
- const image = collection?.image;
- return (
-
- {image && (
-
-
- )}
- {collection.title}
- - ); -} - -function RecommendedProducts({ - products, -}: { - products: Promise
- Loading...
}>
- Recommended Products
-
- {response
- ? response.products.nodes.map((product) => (
-
- )}
- - - ); -} - -const FEATURED_COLLECTION_QUERY = `#graphql - fragment FeaturedCollection on Collection { - id - title - image { - id - url - altText - width - height - } - handle - } - query FeaturedCollection($country: CountryCode, $language: LanguageCode) - @inContext(country: $country, language: $language) { - collections(first: 1, sortKey: UPDATED_AT, reverse: true) { - nodes { - ...FeaturedCollection - } - } - } -` as const; - -const RECOMMENDED_PRODUCTS_QUERY = `#graphql - fragment RecommendedProduct on Product { - id - title - handle - priceRange { - minVariantPrice { - amount - currencyCode - } - } - featuredImage { - id - url - altText - width - height - } - } - query RecommendedProducts ($country: CountryCode, $language: LanguageCode) - @inContext(country: $country, language: $language) { - products(first: 4, sortKey: UPDATED_AT, reverse: true) { - nodes { - ...RecommendedProduct - } - } - } -` as const; ``` *** ## Step 7: Display all stores Add a store listing page that shows all stores from metaobjects with a grid layout. #### File: [stores.\_index.tsx](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/ingredients/templates/skeleton/app/routes/stores._index.tsx) ## File ```tsx import {useLoaderData} from 'react-router'; import type {Route} from './+types/stores._index'; // 1. Add metaobject content imports import {ROUTE_CONTENT_QUERY, RouteContent} from '~/sections/RouteContent'; export const meta: Route.MetaFunction = () => { return [{title: 'Hydrogen | Home'}]; }; export async function loader(args: Route.LoaderArgs) { // Start fetching non-critical data without blocking time to first byte const deferredData = loadDeferredData(args); // Await the critical data required to render initial state of the page const criticalData = await loadCriticalData(args); return {...deferredData, ...criticalData}; } /** * Load data necessary for rendering content above the fold. This is the critical data * needed to render the page. If it's unavailable, the whole page should 400 or 500 error. */ async function loadCriticalData({context}: Route.LoaderArgs) { const {storefront} = context; // 2. Query for the route's content metaobject const [{route}] = await Promise.all([ storefront.query(ROUTE_CONTENT_QUERY, { variables: {handle: 'route-stores'}, cache: storefront.CacheNone(), }), // Add other queries here, so that they are loaded in parallel ]); return {route}; } /** * Load data for rendering content below the fold. This data is deferred and will be * fetched after the initial page load. If it's unavailable, the page should still 200. * Make sure to not throw any errors here, as it will cause the page to 500. */ function loadDeferredData({context}: Route.LoaderArgs) { // No deferred data for this route return {}; } export default function Stores() { const {route} = useLoaderData
{/* 3. Render the route's content sections */}
);
}
```
***
## Step 8: Install rich text dependencies
Add Slate dependencies for rich text editing in metaobject sections.
#### File: [package.json](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/templates/skeleton/package.json) ([patch](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/patches/package.json.f30b0a.patch))
```diff
@@ -21,7 +21,9 @@
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router": "7.9.2",
- "react-router-dom": "7.9.2"
+ "react-router-dom": "7.9.2",
+ "slate": "^0.101.4",
+ "slate-react": "^0.101.3"
},
"devDependencies": {
"@eslint/compat": "^1.2.5",
```
***
## Step 9: Create route content component
Add the main component for fetching and rendering metaobject-based route content.
#### File: [RouteContent.tsx](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/ingredients/templates/skeleton/app/sections/RouteContent.tsx)
## File
```tsx
import {SECTIONS_FRAGMENT, Sections} from '~/sections/Sections';
import {EditRoute} from '~/components/EditRoute';
import type {RouteContentQuery} from 'storefrontapi.generated';
export function RouteContent({route}: {route: RouteContentQuery['route']}) {
if (!route?.sections) {
return No route content sections
; } return (
{route?.id &&
);
}
export const ROUTE_CONTENT_QUERY = `#graphql
query RouteContent($handle: String!) {
route: metaobject(handle: {type: "route", handle: $handle}) {
type
id
title: field(key: "title") {
key
value
}
sections: field(key: "sections") {
...Sections
}
}
}
${SECTIONS_FRAGMENT}
`;
```
***
## Step 10: Build featured collections section
Add a section component for displaying featured product collections from metaobjects.
#### File: [SectionFeaturedCollections.tsx](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/ingredients/templates/skeleton/app/sections/SectionFeaturedCollections.tsx)
## File
```tsx
import type {
SectionFeaturedCollectionsFragment,
FeaturedCollectionImageFragment,
} from 'storefrontapi.generated';
import {parseSection} from '~/utils/parseSection';
import type {ParsedMetafields} from '@shopify/hydrogen';
import {Image} from '@shopify/hydrogen';
export function SectionFeaturedCollections(
props: SectionFeaturedCollectionsFragment,
) {
const section = parseSection<
SectionFeaturedCollectionsFragment,
{
heading?: ParsedMetafields['single_line_text_field'];
}
>(props);
const {id, heading, collections} = section;
return (
{heading.parsedValue}
} {collections?.nodes && (-
{collections.nodes.map((collection) => (
-
{collection.title}
))}
{heading.value}
} {body &&{body.value}
} {products?.references?.nodes && (
{products.references.nodes.map((product) => {
const {variants, priceRange, title} = product;
const variant = variants?.nodes?.[0];
return (
{variant.image && (
)}
{title}
{withProductPrices && ( From
{heading &&
{heading.parsedValue}
} {subheading &&{subheading.value}
} {link?.href?.value && ( {link?.text?.value} )}{image?.image?.url && (
)}
{heading.value}
} {description &&{description.value}
}Address
{address && {address.value}}Opening Hours
{hours.parsedValue.map((day: string) => ({day}
))}{heading.value}
}
{stores &&
stores.nodes.map((store) => {
if (!store) {
return null;
}
const {image, heading, address} = store;
return (
{image?.image?.url && (
)}
{heading && (
)}
{heading && (
{heading.value}
)} {address && {address?.value}} ); })}
{sections?.references?.nodes.map((section) => {
switch (section.type) {
case 'section_hero':
return
);
}
export const SECTIONS_FRAGMENT = `#graphql
fragment Sections on MetaobjectField {
... on MetaobjectField {
references(first: 10) {
nodes {
... on Metaobject {
id
type
...SectionHero
...SectionFeaturedProducts
...SectionFeaturedCollections
...SectionStores
...SectionStoreProfile
}
}
}
}
}
# All section fragments
${SECTION_HERO_FRAGMENT}
${SECTION_FEATURED_PRODUCTS_FRAGMENT}
${SECTION_FEATURED_COLLECTIONS_FRAGMENT}
${SECTION_STORES_FRAGMENT}
${SECTION_STORE_PROFILE_FRAGMENT}
`;
```
***
## Step 16: Add section parsing utility
Add a utility function for parsing and transforming metaobject field data.
#### File: [parseSection.ts](https://github.com/Shopify/hydrogen/blob/12374c8f03f82c6800000cf08e327c4db4c287bb/cookbook/recipes/metaobjects/ingredients/templates/skeleton/app/utils/parseSection.ts)
## File
```ts
import type {ParsedMetafields} from '@shopify/hydrogen';
import {parseMetafield} from '@shopify/hydrogen';
/**
* Recursively parse metafields (objects containing a type, value and key)
* into a more usable format. Removes nested reference and references keys.
*/
export function parseSection