Content Renderer

The content renderer component can be used to render content from the new content admin.

Props

Copy

Copied

  /**
   * An array of ContentItems available on data.page.data.items
   */
  items: ContentItem[]
  /**
   * An object where the key corresponds to the ContentItem.type in Uppercase
   */
  components: {
  [key: string]: React.FC<any>;
}

Usage

The content renderer can be used anywhere the new content admin api is used. The components will be rendered based on the their type and the properties will be spread across the components. Here is an example of how to use it on a category page:

Copy

Copied

import { ContentRenderer } from "@jetshop/ui/ContentRenderer";

const components = {
  HERO: Hero,
  CATEGORIES: Categories,
  CAMPAIGN: Campaign,
  PRODUCTGRID: ProductGrid,
  CATEGORYITEM: CategoryItem,
};

function Category({ category, result }) {
  const content = category?.data;

  const items: ContentItem[] = content?.items;

  return (
    <>
      <ContentRenderer items={items} components={components} />
      <ProductGrid
        products={category.products.result}
        listName={category.name}
        categoryPath={category.isDynamic ? null : result?.data?.route}
        loading={result.loading}
        imageSizes={[1 / 2, 1 / 2, 1 / 3, 1 / 4]}
      />
    </>
  );
}

Be sure to include a query for the content in your GraphQL queries:

Copy

Copied

fragment ContentItemFragment on ContentItem {
  type
  properties {
    name
    type
    value {
      ... on Product {
        ...ProductFragment
      }
      ... on Category {
        ...CategoryFragment
      }
      ... on StringValue {
        value
      }
      ... on BoolValue {
        value
      }
    }
  }
}

fragment ContentFragment on Content {
  id
  items {
    ...ContentItemFragment
    children {
      ...ContentItemFragment
    }
  }
}

fragment CategoryPage on Category {
  data {
    ...ContentFragment
  }
  id
  name
  content
  isDynamic
  images {
    width
    url
  }
  products(
    first: $first
    offset: $offset
    filters: $filters
    orderBy: $orderBy
    orderByDirection: $orderByDirection
  ) {
    result {
      ...ProductGrid
    }
  }
}