Examples Product Form Inputs

February 14, 2023 at 10:38 AM

Once you have the product you are ready to display product details and required inputs to complete the purchase.

For example the following request get all required inputs for specific product in order to build the product form:

query ($id: ID!) {
  node(id: $id) {
    ... on Product {
      inputs {
        name
        type
        required
        label
        html {
          type
          maxlength
          minlength
          min
          max
          pattern
        }
      }
    }
  }
}

{
  "id": "RWa1ZUVkVK21=="
}

{
  "data": {
    "node": {
      "inputs": [
        {
          "name": "amount",
          "type": "float",
          "required": true,
          "label": "Amount",
          "html": {
            "type": "number",
            "maxlength": null,
            "minlength": null,
            "min": 1,
            "max": 100,
            "pattern": null
          }
        },
        {
          "name": "accountNumber",
          "type": "phone",
          "required": true,
          "label": "Phone Number",
          "html": {
            "type": "tel",
            "maxlength": null,
            "minlength": null,
            "min": null,
            "max": null,
            "pattern": null
          }
        }
      ]
    }
  }
}

Product Form Example: