Filterable product details

This product details example is used to introduce the features of the Content Delivery and GraphQL Content Delivery filter API. It's a simple product details schema with properties for SKU, title, category ID and product family, together with images and text. Several properties are configured to be filterable.

Pre-requisites
Link copied!

See the using the content type schema examples page for details of how to choose and register these schemas from the schema examples in Dynamic Content.

Note that this example uses the example-image and example-text schemas from the blog post example. You will need to register these schemas if you want to add image or text content.

How to use
Link copied!

Once you've registered the schema on this page, you will be able to follow the examples on the Content Delivery and GraphQL Content Delivery filter API pages.

Product details schema
Link copied!

This is the main product details content type schema. It includes a trait:filterable and trait:sortable as well as links to example-text and example-image. You can filter created from this schema by sku, categoryId, productFamily and whether it is hidden, as well as both productFamily and categoryId.

By default the content will be sorted in ascending order of priority.

The schema also includes GraphQL specific additions: graphql:sortname and graphql:filtername.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/pdp-content-block",
  "$comment": "Docs: https://amplience.com/docs/development/schema-examples/filter/filter-product-details.html",
  "title": "Product details",
  "description": "Product details that can be filtered and sorted",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "sku": {
      "title": "Product SKU",
      "description": "enter the exact product sku of the product where you want this to display",
      "type": "string",
      "minLength": 0,
      "maxLength": 20
    },
    "categoryId": {
      "title": "Category ID",
      "description": "Enter the ID of a product category",
      "type": "string",
      "minLength": 0,
      "maxLength": 100
    },
    "productFamily": {
      "title": "Product Family",
      "description": "Enter the name of a product category",
      "type": "string",
      "nullable": true,
      "minLength": 0,
      "maxLength": 100
    },
    "priority": {
      "title": "Priority",
      "description": "Rank the importance of this content",
      "type": "number",
      "minimum": 0,
      "maximum": 10
    },
    "hidden": {
      "title": "Hidden",
      "description": "Check to hide this content",
      "type": "boolean"
    },
    "content": {
      "title": "PDP Content",
      "description": "",
      "type": "array",
      "minItems": 1,
      "maxItems": 20,
      "items": {
        "allOf": [
          {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
          },
          {
            "properties": {
              "contentType": {
                "title": "Content",
                "enum": [
                  "https://schema-examples.com/example-image",
                  "https://schema-examples.com/example-text"
                ]
              }
            }
          }
        ]
      }
    }
  },
  "propertyOrder": [],
  "trait:sortable": {
    "sortBy": [
      {
        "key": "default",
        "paths": ["/date", "/ranking"]
      },
      {
        "key": "Priority",
        "graphql:sortname": "byPriority",
        "paths": ["/priority"]
      }
    ]
  },
  "trait:filterable": {
    "filterBy": [
      {
        "graphql:filtername": "bySku",
        "paths": ["/sku"]
      },
      {
        "graphql:filtername": "byCategory",
        "paths": ["/categoryId"]
      },
      {
        "graphql:filtername": "byProductFamily",
        "paths": ["/productFamily"]
      },
      {
        "graphql:filtername": "byHidden",
        "paths": ["/hidden"]
      },
      {
        "graphql:filtername": "byProductFamilyAndCategory",
        "paths": ["/productFamily", "/categoryId"]
      }
    ]
  }
}