Unknown Component

Received request from Uniform to render a component with the public ID: pdp.

<UniformComposition /> does not have pdp mapped to a React component yet.

To teach your app how to render this component:

• Create a React component and register it with Uniform, for example

  function Pdp({ slug }) {
    return (
      <div>
        Pdp!
        <UniformSlot name="content" />
      </div>
    )
  }
  
  registerUniformComponent({ type: "pdp", component: Pdp })

  Props that your React component will receive

  {
    "slug": "hardie-architectural-panel-siding",
    "component": {
      "type": "pdp",
      "_pattern": "46b771f9-cb9d-47a1-a8d8-65f160d6948e",
      "parameters": {
        "slug": {
          "type": "text",
          "value": "hardie-architectural-panel-siding"
        }
      },
      "slots": {
        "content": [
          {
            "type": "headlineLocation",
            "parameters": {
              "theme": {
                "type": "select",
                "value": "secondary"
              },
              "title": {
                "type": "text",
                "value": "Hardie® Architectural Panel Siding"
              },
              "isHeader": {
                "type": "checkbox",
                "value": true
              },
              "subtitle": {
                "type": "text",
                "value": "Offering contemporary design solutions to fit any style, elevate your exterior with Hardie® Architectural Panel siding."
              },
              "hasLocation": {
                "type": "checkbox",
                "value": true
              },
              "headerDirection": {
                "type": "select",
                "value": "row"
              }
            }
          },
          {
            "type": "productDetail",
            "parameters": {
              "ctaUrl": {
                "type": "link",
                "value": {
                  "path": "/hover-design-visualization",
                  "type": "url"
                }
              },
              "ctaTitle": {
                "type": "text",
                "value": "Visualize with Hover®"
              },
              "colorTitle": {
                "type": "text",
                "value": "Select a color"
              },
              "notFoundText": {
                "type": "json",
                "value": {
                  "nodeType": "paragraph",
                  "data": {},
                  "content": [
                    {
                      "nodeType": "text",
                      "value": "No colors found.",
                      "marks": [],
                      "data": {}
                    }
                  ]
                }
              },
              "familiesTitle": {
                "type": "text",
                "value": "Select color"
              },
              "variantsTitle": {
                "type": "text",
                "value": "Select your siding texture"
              },
              "freeSampleText": {
                "type": "text",
                "value": "Free"
              },
              "inputHelperText": {
                "type": "text",
                "value": "Search by color name. E.g. \"Linden Green"
              },
              "collectionsTitle": {
                "type": "text",
                "value": "Select your color collection"
              },
              "colorsDisclaimer": {
                "type": "json",
                "value": {
                  "nodeType": "paragraph",
                  "data": {},
                  "content": [
                    {
                      "nodeType": "text",
                      "value": "Made specifically for you, products may incur additional cost and production time.",
                      "marks": [],
                      "data": {}
                    }
                  ]
                }
              },
              "inputPlaceholder": {
                "type": "text",
                "value": "Find colors by name"
              },
              "addToCartCtaTitle": {
                "type": "text",
                "value": "Add sample to cart |"
              },
              "clearFilterLabelText": {
                "type": "text",
                "value": "Clear color filter"
              }
            }
          },
          {
            "type": "valuePropositionsContainer",
            "slots": {
              "content": [
                {
                  "type": "valuePropositionsCard",
                  "parameters": {
                    "body": {
                      "type": "json",
                      "value": {
                        "nodeType": "document",
                        "data": {},
                        "content": [
                          {
                            "nodeType": "heading-3",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Superior durability",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Hardie® siding is noncombustible—it will not burn.* It resists damage from moisture and holds no appeal for pests like woodpeckers or termites. ",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "durable"
                    },
                    "name": {
                      "type": "text",
                      "value": "Superior durability"
                    }
                  }
                },
                {
                  "type": "valuePropositionsCard",
                  "parameters": {
                    "body": {
                      "type": "json",
                      "value": {
                        "nodeType": "document",
                        "data": {},
                        "content": [
                          {
                            "nodeType": "heading-3",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Engineered for Climate®",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Our fiber cement siding and trim products are formulated to offer superior performance based on your region's unique climate needs, and help protect against damage from weather extremes, hurricanes, winter storms and more. ",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "weather-umbrella"
                    },
                    "name": {
                      "type": "text",
                      "value": "Engineered for Climate®"
                    }
                  }
                },
                {
                  "type": "valuePropositionsCard",
                  "parameters": {
                    "body": {
                      "type": "json",
                      "value": {
                        "nodeType": "document",
                        "data": {},
                        "content": [
                          {
                            "nodeType": "heading-3",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Lasting value",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Enjoy a low-maintenance exterior with a 30-year non-prorated limited, transferrable substrate warranty for lasting peace of mind and quality you can trust. ",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "house-heart"
                    },
                    "name": {
                      "type": "text",
                      "value": "Lasting value"
                    }
                  }
                }
              ],
              "sectionHeader": [
                {
                  "type": "sectionHeader",
                  "variant": "thin",
                  "parameters": {
                    "body": {
                      "type": "text",
                      "value": "Add a fresh look that fits any style home with siding that's built to stand the test of time."
                    },
                    "theme": {
                      "type": "select",
                      "value": "transparent"
                    },
                    "title": {
                      "type": "text",
                      "value": "Why Choose Hardie® Architectural Panel siding? "
                    }
                  }
                }
              ]
            },
            "parameters": {
              "theme": {
                "type": "select",
                "value": "neutral"
              }
            }
          },
          {
            "type": "textImage",
            "slots": {
              "items": [
                {
                  "type": "textImageItem",
                  "parameters": {
                    "image": {
                      "type": "image",
                      "value": "//images.ctfassets.net/dzi2asncd44t/7b69HVx41obXblpHAuPKXt/51b09e59a74e1890fae52b5a65dde057/detail-hardie-architectural-panel-smooth-sand-gray-16-9.jpg"
                    },
                    "bodyCopy": {
                      "type": "text",
                      "value": "Going beyond wood-look designs, the clean lines of the Hardie® Architectural Panel can help achieve a range of styles from traditional to more modern looks. Create a truly unique design that speaks to your aesthetic."
                    },
                    "headline": {
                      "type": "text",
                      "value": "Elevate your exterior with a gorgeous, fresh perspective"
                    }
                  }
                }
              ]
            },
            "parameters": {
              "ctasText": {
                "type": "text",
                "value": " "
              },
              "startPosition": {
                "type": "select",
                "value": "right"
              }
            }
          },
          {
            "type": "productSpecs",
            "parameters": {
              "cta2Link": {
                "type": "link",
                "value": {
                  "path": "/installation-instructions-technical-docs",
                  "type": "projectMapNode",
                  "nodeId": "fe1fde08-dcbd-4304-aff6-649137fd6efe",
                  "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
                }
              },
              "cta2Text": {
                "type": "text",
                "value": "Download tech docs"
              },
              "headline": {
                "type": "text",
                "value": "Tech specs and documents"
              },
              "supporting": {
                "type": "text",
                "value": "Learn everything you need to know about installing and maintaining Hardie® Architectural Panel siding. "
              }
            }
          },
          {
            "type": "carousel",
            "slots": {
              "containerInner": [
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/ZDPuEgi2xOQPXnoasj83G/2ae130588ae85201d00c79b5ac92fc31/detail-hardie-artisan-vgroove-siding-white.jpg"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "title": {
                      "type": "text",
                      "value": "Hardie® Artisan Siding"
                    },
                    "ctaLink": {
                      "type": "link",
                      "value": {
                        "path": "/product-catalog/exterior-siding-products/hardie-artisan-siding",
                        "type": "url"
                      }
                    }
                  }
                },
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/4mxLwpfMVpTFTXKjy1J7O5/aca5e8f583618d2be72b802f4721bac9/detail-hardie-architectural-trim.jpg"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "title": {
                      "type": "text",
                      "value": "Hardie™ Architectural Trim"
                    },
                    "ctaLink": {
                      "type": "link",
                      "value": {
                        "path": "/product-catalog/trim-products/hardie-architectural-trim",
                        "type": "url"
                      }
                    }
                  }
                },
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/6NXuKLWjKIUy3hcw8je6k0/20fc9da840368b1ba54b559f0f82c19a/product-detail-magnolia-hardie-plank-wandering-green.jpg"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "title": {
                      "type": "text",
                      "value": "Hardie® Plank"
                    },
                    "ctaLink": {
                      "type": "link",
                      "value": {
                        "path": "/product-catalog/exterior-siding-products/hardie-plank-lap-siding",
                        "type": "url"
                      }
                    }
                  }
                }
              ]
            },
            "variant": "highlights",
            "parameters": {
              "body": {
                "type": "text",
                "value": "See how Hardie® products can help your home look beautiful for years to come.  "
              },
              "headline": {
                "type": "text",
                "value": "Explore more products"
              }
            }
          },
          {
            "type": "container",
            "slots": {
              "container-inner": [
                {
                  "type": "conversion",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/1MRmRjpjKa60BuCi9AKSi9/154190ebde2eae7d0edb8818006b3861/house-with-couple-hardie-plank-deep-ocean.jpg"
                          },
                          "width": {
                            "type": "number",
                            "value": 2126
                          },
                          "height": {
                            "type": "number",
                            "value": 800
                          },
                          "altText": {
                            "type": "text",
                            "value": "house with couple in hardie plank in deep ocean"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "text": {
                      "type": "text",
                      "value": "Ready to take the next step? Find a local pro to help you execute your design vision with Hardie® siding."
                    },
                    "title": {
                      "type": "text",
                      "value": "Start your renovation"
                    },
                    "cta1Link": {
                      "type": "link",
                      "value": {
                        "path": "/request-siding-quote",
                        "type": "projectMapNode",
                        "nodeId": "f89173e2-fea4-4a83-a5bd-49b5f7bf3e0e",
                        "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
                      }
                    },
                    "cta1Text": {
                      "type": "text",
                      "value": "Find a local contractor"
                    },
                    "hasImage": {
                      "type": "checkbox",
                      "value": true
                    }
                  }
                }
              ]
            },
            "parameters": {
              "title": {
                "type": "text",
                "value": "Conversion Container"
              },
              "paddingTop": {
                "type": "select",
                "value": "Small"
              },
              "paddingBottom": {
                "type": "select",
                "value": "Small"
              },
              "backgroundType": {
                "type": "select",
                "value": "Transparent"
              }
            }
          },
          {
            "type": "disclaimerText",
            "parameters": {
              "text": {
                "type": "text",
                "value": "Hardie® siding complies with ASTM E136 as a noncombustible cladding and is recognized by fire departments across the U.S. including Marietta, GA, Flagstaff, AZ and Orange County, CA. Fiber cement fire resistance does not extend to applied paints or coatings, which may be damaged or char when exposed to flames."
              },
              "theme": {
                "type": "select",
                "value": "dark"
              }
            }
          }
        ]
      }
    }
  }

• Import the component into the file where <UniformComposition /> is defined, for example

  import "../components/Pdp.tsx"

Need more help? Check out the documentation.