Criar configurações dinâmica
Através de um arquivo estruturado em .json é possível que você crie opções de configurações ao lojista para ele configurar o seu tema, ou seja, você cria campos onde o lojista preenche com seus respectivos valores para que você possa utilizar no front da loja. Confira mais abaixo como configurar e usar as variáveis.
Atualmente é possível adicionar dois tipos de campos, texto e file para upload de imagens.
Veja abaixo um exemplo de arquivo .json de configuração do seu tema.
config.json:
1
{
2
"image": "images/magazine.png",
3
"theme": "magazine",
4
"name": "Tema Default",
5
"description": "Configurações do tema magazine.",
6
"author": "Uilia",
7
"price": 0.0,
8
"data": {
9
"tabs": [
10
{
11
"name": "Tab 1",
12
"message": {
13
"type": "success",
14
"title": "Title Message",
15
"message": "Body Message"
16
},
17
"groups": [
18
{
19
"title": "Título 1",
20
"inputs": [
21
{
22
"name": "input_one",
23
"title": "Input File",
24
"type": "file",
25
"value": ""
26
},
27
{
28
"name": "input_two",
29
"title": "Input File Two",
30
"subtitle": "Descrição de ajuda",
31
"type": "file",
32
"value": ""
33
}
34
]
35
},
36
{
37
"title": "Título 2",
38
"inputs": [
39
{
40
"name": "input_tree",
41
"title": "Input Text",
42
"type": "text",
43
"value": "Value default"
44
},
45
{
46
"name": "input_four",
47
"title": "Input Text Two",
48
"type": "text",
49
"value": ""
50
}
51
]
52
}
53
]
54
},
55
{
56
"name": "Tab 2",
57
"groups": [
58
{
59
"title": "Title 1",
60
"inputs": [
61
{
62
"name": "input_five",
63
"title": "Input Text",
64
"type": "text",
65
"value": ""
66
},
67
{
68
"name": "input_six",
69
"title": "Input Text",
70
"type": "text",
71
"value": ""
72
}
73
]
74
}
75
]
76
}
77
]
78
}
79
}
Copied!
Confira abaixo a página que o .json acima gerou.

Importante

Você pode duplicar os inputs, as tabs, basta respeitar a arquitetura do arquivo .json e replicar o que desejar dentro dos arrays.
É importante que cada 'name' seja único, nunca pode ser igual, caso contratrário não irá funcionar corretamente ao usar as variáveis no front-end.
Todo 'input' e 'file' que você criou e desejar usar no front-end da loja você acessa da seguinte forma:
1
{{ config.NAME }}
Copied!
Altere o NAME para recuperar o valor(value) salvo pelo lojista no input.
Last modified 4mo ago
Copy link
Contents
Importante