Saltearse al contenido

Formularios nativos VTEX

Este documento proporciona una guía paso a paso para configurar y crear un formulario utilizando el componente nativo store-form en VTEX IO.

Configuración Master Data para el componente `store-form`

Para configurar el componente store-form en tu tienda, necesitas configurar los siguientes pasos en Master Data:

Crea una nueva entidad en Master Data con todos los campos que necesites.
Crea un nuevo Formulario en Master Data correspondiente a la entidad que creaste en el paso anterior.
Crea y manda el schema correspondiente a la entidad creada previamente. Schema PUT

Configuración para la store utilizando el componente `store-form`

Para comenzar, necesitas instalar el componente store-form en tu tienda VTEX. Esto se hace agregando la dependencia a tu manifest.json.

Abre el archivo manifest.json en el directorio raíz de tu tienda.
Añade la siguiente línea en la sección de dependencies:

1
  "dependencies": {
2
    "vtex.store-form": "0.x"
3
}

Agrega el bloque en tu archivo correspondiente. Ejemplo con todas las props:

1
  "form": {
2
    "props": {
3
      "entity": "clients",
4
      "schema": "person"
5
    },
6
    "children": [
7
      "rich-text#formTitle",
8
      "form-input.text#firstName",
9
      "form-input.text#lastName",
10
      "form-field-group#address",
11
      "form-input.checkbox#agreement",
12
      "form-submit"
13
    ],
14
    "blocks": ["form-success"]
15
  },
16
  "form-success": {
17
    "children": [
18
      "rich-text#successSubmit"
19
    ]
20
  },
21
  "rich-text#successSubmit": {
22
    "props": {
23
      "text": "Succesfully submitted the data!",
24
      "textAlignment": "CENTER",
25
      "textPosition": "CENTER"
26
    }
27
  },
28
  "form-input.text#firstName": {
29
    "props": {
30
      "pointer": "#/properties/firstName"
31
    }
32
  },
33
  "form-input.text#lastName": {
34
    "props": {
35
      "pointer": "#/properties/lastName"
36
    }
37
  },
38
  "form-input.checkbox#agreement": {
39
    "props": {
40
      "pointer": "#/properties/agreement",
41
      "label": "Do you agree that this is the best form component in the whole wide world?"
42
    }
43
  },
44
  "form-field-group#address": {
45
    "props": {
46
      "pointer": "#/properties/address"
47
    }
48
  },
49
  "form-submit": {
50
    "props": {
51
      "label": "Submit"
52
    }
53
  }

Recursos adicionales