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": "hydro-defense-backer-board",
    "component": {
      "type": "pdp",
      "_pattern": "46b771f9-cb9d-47a1-a8d8-65f160d6948e",
      "parameters": {
        "slug": {
          "type": "text",
          "value": "hydro-defense-backer-board"
        }
      },
      "slots": {
        "content": [
          {
            "type": "headlineLocation",
            "parameters": {
              "theme": {
                "type": "select",
                "value": "secondary"
              },
              "title": {
                "type": "text",
                "value": "Hardie® Backer Board with HydroDefense® Technology"
              },
              "isHeader": {
                "type": "checkbox",
                "value": true
              },
              "subtitle": {
                "type": "text",
                "value": "The unmatched strength, ease of use, and excellent tile adhesion you’ve come to expect from Hardie® Backer Board—with a 100% waterproof* composition throughout the board thanks to HydroDefense® Technology."
              },
              "hasLocation": {
                "type": "checkbox",
                "value": true
              },
              "headerDirection": {
                "type": "select",
                "value": "row"
              }
            }
          },
          {
            "type": "productDetail",
            "parameters": {
              "ctaUrl": {
                "type": "link",
                "value": {
                  "path": "/hardie-designer",
                  "type": "url"
                }
              },
              "ctaTitle": {
                "type": "text",
                "value": "Visualize with  Hardie™ Designer, powered by 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 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": "100% Waterproof*",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Helps protect tile installations from the damaging effects of water thanks to 100% waterproof* composition throughout the cement board.",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "durable"
                    },
                    "name": {
                      "type": "text",
                      "value": "100% Waterproof"
                    }
                  }
                },
                {
                  "type": "valuePropositionsCard",
                  "parameters": {
                    "body": {
                      "type": "json",
                      "value": {
                        "nodeType": "document",
                        "data": {},
                        "content": [
                          {
                            "nodeType": "heading-3",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Superior strength",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Hardie",
                                "marks": [],
                                "data": {}
                              },
                              {
                                "nodeType": "text",
                                "value": "®",
                                "marks": [
                                  {
                                    "type": "superscript"
                                  }
                                ],
                                "data": {}
                              },
                              {
                                "nodeType": "text",
                                "value": " Backer Board is made of fiber cement, a material stronger than foam. Resists splitting, cracking, or shifting so your tile job holds up under weight and over time. ",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "weather-umbrella"
                    },
                    "name": {
                      "type": "text",
                      "value": "Superior Strength"
                    }
                  }
                },
                {
                  "type": "valuePropositionsCard",
                  "parameters": {
                    "body": {
                      "type": "json",
                      "value": {
                        "nodeType": "document",
                        "data": {},
                        "content": [
                          {
                            "nodeType": "heading-3",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "Excellent tile adhesion",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          },
                          {
                            "nodeType": "paragraph",
                            "data": {},
                            "content": [
                              {
                                "nodeType": "text",
                                "value": "A tight hold on tile requires excellent grip. Hardie",
                                "marks": [],
                                "data": {}
                              },
                              {
                                "nodeType": "text",
                                "value": "®",
                                "marks": [
                                  {
                                    "type": "superscript"
                                  }
                                ],
                                "data": {}
                              },
                              {
                                "nodeType": "text",
                                "value": " Backer Board is engineered to perform as a rock-solid base that helps prevent tile from popping, loosening, or shifting over time. ",
                                "marks": [],
                                "data": {}
                              }
                            ]
                          }
                        ]
                      }
                    },
                    "icon": {
                      "type": "select",
                      "value": "house-heart"
                    },
                    "name": {
                      "type": "text",
                      "value": "Excellent Tile Adhesion"
                    }
                  }
                }
              ],
              "sectionHeader": [
                {
                  "type": "sectionHeader",
                  "variant": "thin",
                  "parameters": {
                    "body": {
                      "type": "text",
                      "value": "Count on exceptional performance and rock-solid waterproof* protection for your customers, your work, and your reputation."
                    },
                    "theme": {
                      "type": "select",
                      "value": "transparent"
                    },
                    "title": {
                      "type": "text",
                      "value": "Why choose Hardie® Backer Board with HydroDefense® Technology?"
                    }
                  }
                }
              ]
            },
            "parameters": {
              "theme": {
                "type": "select",
                "value": "neutral"
              }
            }
          },
          {
            "type": "textImage",
            "slots": {
              "items": [
                {
                  "type": "textImageItem",
                  "parameters": {
                    "image": {
                      "type": "image",
                      "value": "//images.ctfassets.net/dzi2asncd44t/4PKSk2cbO1NJiqEbXHqGI9/ebbdf98f02dede23979285a7757081b4/pdp-hero-hardie-backer-board-hydrodefense.jpg"
                    },
                    "headline": {
                      "type": "text",
                      "value": "Hardie Backer Board with HydroDefense Technology Image"
                    }
                  }
                }
              ]
            },
            "parameters": {
              "ctasText": {
                "type": "text",
                "value": " "
              },
              "startPosition": {
                "type": "select",
                "value": "right"
              }
            }
          },
          {
            "type": "productSpecs",
            "parameters": {
              "cta1Link": {
                "type": "link",
                "value": {
                  "path": "/installation-instructions-technical-docs",
                  "type": "projectMapNode",
                  "nodeId": "fe1fde08-dcbd-4304-aff6-649137fd6efe",
                  "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
                }
              },
              "cta1Text": {
                "type": "text",
                "value": "Download tech docs"
              },
              "headline": {
                "type": "text",
                "value": "Tech specs and documents"
              }
            }
          },
          {
            "type": "carousel",
            "slots": {
              "containerInner": [
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/3RfTQtYxVKktFFck7VE6MC/b1df57613485bbbfa1b553030c9a651d/pdp-hero-hardie-backer-board.jpg"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "title": {
                      "type": "text",
                      "value": "Hardie® Backer Board"
                    },
                    "ctaLink": {
                      "type": "link",
                      "value": {
                        "path": "/product-catalog/backer-board-products/hardie-backer-cement-board",
                        "type": "url"
                      }
                    }
                  }
                },
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/5d0eEXlnevwnD5Zt6eANii/99d78736e0c68212ffc9ace2491e0ad3/hardie-weather-barrier.jpg"
                          }
                        }
                      }
                    ]
                  },
                  "parameters": {
                    "title": {
                      "type": "text",
                      "value": "Hardie™ Weather Barrier"
                    },
                    "ctaLink": {
                      "type": "link",
                      "value": {
                        "path": "/product-catalog/moisture-management-products/weather-barrier-products",
                        "type": "url"
                      }
                    }
                  }
                },
                {
                  "type": "editorialCard",
                  "slots": {
                    "image": [
                      {
                        "type": "image",
                        "parameters": {
                          "src": {
                            "type": "image",
                            "value": "//images.ctfassets.net/dzi2asncd44t/6NXuKLWjKIUy3hcw8je6k0/b0b84a79ec8913fdd3f82fe9f7b60100/RS26489_JamesHardie_Shot05_022-scr.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"
              }
            }
          }
        ]
      }
    }
  }

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

  import "../components/Pdp.tsx"

Need more help? Check out the documentation.