{/* 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, {
```
***
## 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