Creating a native form for your store users

Store Framework Using components Creating a native form for your store users

In traditional brick-and-mortar stores, the sales team plays a crucial role in establishing relationships with customers, fostering trust, and providing personalized support. However, online stores lack the in-person interactions that often help reassure customers and create a direct channel for feedback and inquiries.

To bridge this gap, ecommerce stores can leverage forms as essential tools for promoting clear and direct communication with customers. Forms not only enable customers to ask questions and share suggestions but also allow businesses to gather valuable insights into customer satisfaction.

With Store Framework, your store can integrate a native form component with Master Data v2, facilitating data collection and storage.

Instructions

Step 1 - Creating the JSON Schema in Master Data v2

To begin, you must create a JSON schema in Master Data v2 that defines the fields your form will include and the expected input types. This schema acts as a blueprint for your form, specifying both required data fields and storage structure.

Make a request to the Save Schema by name endpoint to define your schema. Include the JSON example below as the default request body, modifying it to suit your store’s needs:

Schema example


_78{
_78  "title": "Person",
_78  "type": "object",
_78  "properties": {
_78    "firstName": {
_78      "type": "string",
_78      "title": "First Name",
_78      "description": "The person's first name."
_78    },
_78    "lastName": {
_78      "type": "string",
_78      "title": "Last Name",
_78      "description": "The person's last name."
_78    },
_78    "age": {
_78      "description": "Age in years which must be equal to or greater than zero.",
_78      "title": "Age",
_78      "type": "integer",
_78      "minimum": 0,
_78      "maximum": 120
_78    },
_78    "height": {
_78      "type": "number",
_78      "minimum": 0.3,
_78      "maximum": 2.9,
_78      "title": "Your height in meters",
_78      "multipleOf": 0.01
_78    },
_78    "emailAddress": {
_78      "type": "string",
_78      "format": "email",
_78      "title": "Email address"
_78    },
_78    "address": {
_78      "title": "Address",
_78      "type": "object",
_78      "properties": {
_78        "streetType": {
_78          "type": "string",
_78          "title": "Street Type",
_78          "enum": [
_78            "street",
_78            "road",
_78            "avenue",
_78            "boulevard"
_78          ]
_78        },
_78        "streetAddress": {
_78          "type": "string",
_78          "title": "Address"
_78        },
_78        "streetNumber": {
_78          "type": "integer",
_78          "title": "Street Number"
_78        }
_78      },
_78      "required": [
_78        "streetType", "streetAddress", "streetNumber"
_78      ]
_78    },
_78    "agreement": {
_78      "type": "boolean",
_78      "title": "Do you agree with the terms?"
_78    }
_78  },
_78  "required": [
_78    "firstName",
_78    "lastName",
_78    "agreement"
_78  ],
_78  "v-security": {
_78    "publicJsonSchema": true,
_78    "allowGetAll": false,
_78    "publicRead": [ "fieldExample" ],
_78    "publicWrite": [ "fieldExample" ],
_78    "publicFilter": [ "fieldExample" ]
_78  }
_78}

Bear in mind that the schema's language will define the form's default language.

When making the request to create the JSON Schema, remember to:

Replace the dataEntityName value with the data entity name in which you want to save the user data fetched from the form.
Replace the schemaName value with a name of your choosing. The value defined will be the form's JSON Schema name.

Once the request is executed successfully, the JSON Schema is ready and you can create the form in your store's theme.

Master Data v2 doesn't have an interface, so all actions regarding the user form must be done through the Master Data API v2.

Step 2 - Configuring the Store Form app

Lastly, you must configure the Store Form app and the blocks it exports to make your store render the native Store Framework form component.

Access the Store Form app documentation and follow the step-by-step instructions to complete its configuration.

Once the form is configured in your store's theme, users will be able to share their information using the component. Your store will receive this information and automatically save it in Master Data v2, so you can interact with it using the Master Data API v2.