Skip to content

Latest commit

 

History

History

metaobjects

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
 
 
docs
docs
 
 
README.md
README.md
 
 
env.d.ts
env.d.ts
 
 
package.json
package.json
 
 
storefrontapi.generated.d.ts
storefrontapi.generated.d.ts
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Hydrogen example: Metaobjects Content

This folder contains an example implementation of using metaobjects as a thin Content Management System (CMS) for Hydrogen.

More specifically, this example focuses on how to render and manage custom content at a route and section level.

Install

Setup a new project with this example:

npm create @shopify/hydrogen@latest -- --template metaobjects

Requirements

  • Basic understanding of metaobjects. Creating metaobject definitions, creating metaobject entries. For more info, please refer to this tutorial
  • Must use the "mock.shop" store because it has the required definitions and entries to make this example work.

Note

(Optional) If you prefer to use your own store instead, please follow the instructions to configure the same content architecture.

Key files

This folder contains the minimal set of files needed to showcase the implementation. Files that aren’t included by default with Hydrogen and that you’ll need to create are labeled with 🆕.

File Description
🆕 app/sections/RouteContent.tsx A component that renders a route's content sections and an Edit button
🆕 app/sections/Sections.tsx A component that renders an array of content sections
🆕 app/sections/SectionHero.tsx A component that renders the SectionHero definition and entries
🆕 app/sections/SectionFeaturedProducts.tsx A component that renders the SectionFeaturedProducts definition and entries
🆕 app/sections/SectionStoreProfile.tsx A component that renders the SectionStoreProfile definition and entries
🆕 app/sections/SectionStores.tsx A component that renders the SectionStores definition and entries
🆕 app/components/EditRoute.tsx A component that overlays an Edit Route button in routes with metaobjects for easy access to the metaobject entry in the admin dashboard
🆕 app/utils/parseSection.ts A utility that parses and cleans up SFAPI metaobject responses for easier consumption
🆕 app/routes/stores._index.tsx A route that displays a collection of custom store entries
🆕 app/routes/stores.$name.tsx A dynamic route that displays custom store metaobject profiles
app/routes/_index.tsx Modified home route to display metaobjects route content / sections

Dependencies

Module Description
🆕 slate A customizable framework for building rich text editors
🆕 slate-react Slate react components

Instructions

1. Link the mock.shop store or test shop with metaobjects

This example uses mock.shop store by default.

Note

(Optional) If you prefer to use your own store instead, please follow the instructions to configure the same content architecture.

2. Copy over the 🆕 files

  • utils/
  • sections/
  • components/
  • routes/

3. Return the PUBLIC_SHOPIFY_STORE_DOMAIN from the root layout

To enable the Edit Route button return the env variable as publicStoreSubdomain like so

export async function loader({context}: LoaderFunctionArgs) {
  // other code ...
  const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;

  return defer(
    {
      // other code ...
      publicStoreSubdomain: context.env.PUBLIC_SHOPIFY_STORE_DOMAIN,
    },
    {headers},
  );
}

4. Modify the homepage route

Import the RouteContent component and query

import {ROUTE_CONTENT_QUERY, RouteContent} from '~/sections/RouteContent';

Adjust the loader to query for the route metaobject content

export async function loader({context}: LoaderFunctionArgs) {
  const {storefront} = context;

  const {route} = await storefront.query(ROUTE_CONTENT_QUERY, {
    variables: {handle: 'route-home'},
    cache: storefront.CacheNone(),
  });

  return json({route});
}

Render the route's content sections with RouteContent

export default function Homepage() {
  const {route} = useLoaderData<typeof loader>();

  return (
    <div className="home">
      <RouteContent route={route} />
    </div>
  );
}

Note

You can repeat this same process in any other route that should be capable of rendering route content entries.

View the complete component file to see these updates in context.