catalogPage

Queryin Content

Fetch a catalog page (a product listing plus its surrounding content) by path.

Arguments

Argument	Type	Description
`version`	`ContentVersionType`
`path`	`String!`
`previewId`	`String`

Returns

Field	Type	Description
`id`	`ID!`
`productListingConfig`	`ProductListingConfig!`	The listing the page shows: the source's category, else the page's categoryId, with the source's sort as the default order.
`name`	`String!`	Name of the product listing page.
`heading`	`String!`	Text of the page's one top-level heading, which the page renders itself.
`path`	`String!`	URL path of the product listing page.
`translatedPaths`	`[TranslatedPath!]`	List of translated paths for different locales.
`breadcrumbs`	`[Breadcrumb!]`	Breadcrumb trail for the product listing page.
`meta`	`PageMeta`	Page metadata for SEO and other purposes.
`intro`	`String`	The text below the heading, clamped to two lines.
`topContent`	`[Block!]`	Top content of the product listing page, composed of various block types.
`bottomContent`	`[Block!]`	Bottom content of the product listing page, composed of various block types.
`categoryId`	`String`	Identifier of the category associated with this product listing. Owned here: the commerce subgraph extends CatalogPage and marks this `@external`, so some subgraph has to define it or composition fails.Deprecated: Read source.
`source`	`ProductSource`	The products the listing shows: the page's category, narrowed by its filters, in its sort order. Null where the page sets none of them.
`layout`	`CatalogPageLayoutType!`	How the page presents its category: a listing, or a landing page.
`promos`	`[Promo!]!`	At most two promo cards inside the product grid: the first at position 4, the second at position 12, on the first page of an unfiltered listing only.
`facetFilters`	`[CatalogPageFacetFilter!]!`	The facet selections that make this page a curated collection of its category, such as one colour of the category's products, to apply to the listing. Empty for the category's own page.Deprecated: Read source.filters.

Example

query CatalogPage(
  $version: ContentVersionType
  $path: String!
  $previewId: String
) {
  catalogPage(version: $version, path: $path, previewId: $previewId) {
    id
    productListingConfig {
      categoryId
      defaultOrder
    }
    name
    heading
    path
    translatedPaths {
      locale
      path
    }
    breadcrumbs {
      name
      path
      type
    }
    meta {
      title
      description
    }
    intro
    topContent {
      __typename
      ... on RichText {
        id
        document
      }
      ... on ArticleList {
        id
        anchor
        audience
        title
      }
      ... on BrandList {
        id
        anchor
        audience
        title
      }
    }
    bottomContent {
      __typename
      ... on RichText {
        id
        document
      }
      ... on ArticleList {
        id
        anchor
        audience
        title
      }
      ... on BrandList {
        id
        anchor
        audience
        title
      }
    }
    source {
      sort
    }
    layout
    promos {
      id
      title
      text
    }
  }
}

{
  "version": "DRAFT",
  "path": "/example",
  "previewId": "Example"
}

{
  "data": {
    "catalogPage": {
      "id": "id-1",
      "productListingConfig": {
        "categoryId": "Example",
        "defaultOrder": "RELEVANCE"
      },
      "name": "Example",
      "heading": "Example",
      "path": "/example",
      "translatedPaths": [
        {
          "locale": "Example",
          "path": "/example"
        }
      ],
      "breadcrumbs": [
        {
          "name": "Example",
          "path": "/example",
          "type": "CATEGORY"
        }
      ],
      "meta": {
        "title": "Example",
        "description": "Example"
      },
      "intro": "Example",
      "topContent": [
        {
          "__typename": "RichText",
          "id": "id-1",
          "document": {}
        }
      ],
      "bottomContent": [
        {
          "__typename": "RichText",
          "id": "id-1",
          "document": {}
        }
      ],
      "source": {
        "sort": "RELEVANCE"
      },
      "layout": "LISTING",
      "promos": [
        {
          "id": "id-1",
          "title": "Example",
          "text": "Example"
        }
      ]
    }
  }
}

The query selects the return type's fields two levels deep; pick the ones you need. The response shows its shape with placeholder values.

Used by

The storefront packages that send it, in these GraphQL documents:

@evolve-storefront/feature-product: CatalogPageLanding