mkfashion-sdk 1.0.3 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +89 -0
- package/package.json +2 -2
- package/src/mkfashion.js +87 -19
- package/test.html +0 -32
package/index.html
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Teste SDK mKFashion</title>
|
|
6
|
+
<script src="https://unpkg.com/mkfashion-sdk@1.1.1/src/mkfashion.js"></script>
|
|
7
|
+
<style>
|
|
8
|
+
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
9
|
+
button { padding: 10px 20px; margin: 10px; cursor: pointer; }
|
|
10
|
+
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 8px; }
|
|
11
|
+
h2 { margin-top: 0; }
|
|
12
|
+
code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; }
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<h1>Teste mKFashion SDK v1.1.0</h1>
|
|
17
|
+
|
|
18
|
+
<div class="section">
|
|
19
|
+
<h2>🛒 Modo Wake (API Dinamica)</h2>
|
|
20
|
+
<p>Busca produto diretamente da Wake Commerce pelo SKU</p>
|
|
21
|
+
<button onclick="testarWake()">Abrir Provador (Wake)</button>
|
|
22
|
+
<pre><code>mkfashion.open({
|
|
23
|
+
mode: 'wake',
|
|
24
|
+
store: 'gregory',
|
|
25
|
+
sku: '309735'
|
|
26
|
+
})</code></pre>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="section">
|
|
30
|
+
<h2>📁 Modo Local (Arquivos Estaticos)</h2>
|
|
31
|
+
<p>Usa arquivos locais do projeto (clothes.json)</p>
|
|
32
|
+
<button onclick="testarLocal()">Abrir Provador (Local)</button>
|
|
33
|
+
<pre><code>mkfashion.open({
|
|
34
|
+
mode: 'local',
|
|
35
|
+
projectid: 'Renner',
|
|
36
|
+
identifier: 'roupa-1'
|
|
37
|
+
})</code></pre>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<script>
|
|
41
|
+
|
|
42
|
+
// Callbacks
|
|
43
|
+
mkfashion.onReady(function(data) {
|
|
44
|
+
console.log('App pronta:', data);
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
mkfashion.onProductLoaded(function(data) {
|
|
48
|
+
console.log('Produto carregado:', data);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
mkfashion.addToCart(function(payload) {
|
|
52
|
+
console.log('Add to cart:', payload);
|
|
53
|
+
alert('Produto: ' + (payload.product?.nome || payload.identifier) + '\nSKU: ' + payload.sku + '\nTamanho: ' + payload.size);
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
mkfashion.onGenerationComplete(function(data) {
|
|
57
|
+
console.log('Geracao completa:', data);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
mkfashion.onError(function(data) {
|
|
61
|
+
console.error('Erro:', data);
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
// Modo Wake - API dinamica
|
|
65
|
+
function testarWake() {
|
|
66
|
+
mkfashion.open({
|
|
67
|
+
type: 'iframe',
|
|
68
|
+
mode: 'wake',
|
|
69
|
+
store: 'gregory',
|
|
70
|
+
sku: '308088',
|
|
71
|
+
width: 500,
|
|
72
|
+
height: 900
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Modo Local - arquivos estaticos
|
|
77
|
+
function testarLocal() {
|
|
78
|
+
mkfashion.open({
|
|
79
|
+
type: 'iframe',
|
|
80
|
+
mode: 'local',
|
|
81
|
+
projectid: 'Renner',
|
|
82
|
+
identifier: 'roupa-1',
|
|
83
|
+
width: 500,
|
|
84
|
+
height: 900
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
</script>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mkfashion-sdk",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "SDK para integrar o provador virtual mKFashion",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce",
|
|
5
5
|
"main": "src/mkfashion.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Abra test.html no navegador\""
|
package/src/mkfashion.js
CHANGED
|
@@ -5,11 +5,22 @@
|
|
|
5
5
|
* Instalacao:
|
|
6
6
|
* <script src="https://unpkg.com/mkfashion-sdk/src/mkfashion.js"></script>
|
|
7
7
|
*
|
|
8
|
-
* Uso:
|
|
8
|
+
* Uso (Modo Wake - dinamico via API):
|
|
9
9
|
* mkfashion.open({
|
|
10
10
|
* type: 'iframe',
|
|
11
|
-
*
|
|
12
|
-
*
|
|
11
|
+
* mode: 'wake', // Usa API Wake Commerce
|
|
12
|
+
* store: 'gregory', // Nome da loja na Wake
|
|
13
|
+
* sku: '308088', // SKU do produto na Wake
|
|
14
|
+
* width: 400,
|
|
15
|
+
* height: 700
|
|
16
|
+
* })
|
|
17
|
+
*
|
|
18
|
+
* Uso (Modo Local - arquivos estaticos):
|
|
19
|
+
* mkfashion.open({
|
|
20
|
+
* type: 'iframe',
|
|
21
|
+
* mode: 'local', // Usa arquivos locais (default)
|
|
22
|
+
* projectid: 'gregory', // Pasta do projeto
|
|
23
|
+
* identifier: 'roupa-1', // ID no clothes.json
|
|
13
24
|
* width: 400,
|
|
14
25
|
* height: 700
|
|
15
26
|
* })
|
|
@@ -22,7 +33,7 @@
|
|
|
22
33
|
const mkfashion = {
|
|
23
34
|
|
|
24
35
|
// ============ CONFIGURACAO ============
|
|
25
|
-
|
|
36
|
+
// appUrl: onde a app Vue esta hospedada (pode ser customizado via configure())
|
|
26
37
|
appUrl: 'https://metakosmoslab.com/demos/mk-fashion-plus/',
|
|
27
38
|
debug: false,
|
|
28
39
|
|
|
@@ -36,6 +47,7 @@ const mkfashion = {
|
|
|
36
47
|
onClose: null,
|
|
37
48
|
onAddToCart: null,
|
|
38
49
|
onGenerationComplete: null,
|
|
50
|
+
onProductLoaded: null,
|
|
39
51
|
onError: null
|
|
40
52
|
},
|
|
41
53
|
_escHandler: null,
|
|
@@ -47,8 +59,11 @@ const mkfashion = {
|
|
|
47
59
|
* Abre o provador virtual
|
|
48
60
|
* @param {Object} options - Configuracoes
|
|
49
61
|
* @param {string} options.type - 'iframe' (modal) ou 'embed' (default: 'iframe')
|
|
50
|
-
* @param {string} options.
|
|
51
|
-
* @param {string} options.
|
|
62
|
+
* @param {string} options.mode - 'wake' (API dinamica) ou 'local' (arquivos estaticos, default)
|
|
63
|
+
* @param {string} options.store - Nome da loja Wake (obrigatorio para mode='wake')
|
|
64
|
+
* @param {string} options.sku - SKU do produto Wake (obrigatorio para mode='wake')
|
|
65
|
+
* @param {string} options.projectid - Identificador do projeto (obrigatorio para mode='local')
|
|
66
|
+
* @param {string} options.identifier - ID do produto local (obrigatorio para mode='local')
|
|
52
67
|
* @param {string|number} options.width - Largura (ex: 800 ou '90%')
|
|
53
68
|
* @param {string|number} options.height - Altura (ex: 600 ou '95%')
|
|
54
69
|
* @param {string} options.targetId - ID do container (obrigatorio para type='embed')
|
|
@@ -59,21 +74,42 @@ const mkfashion = {
|
|
|
59
74
|
return
|
|
60
75
|
}
|
|
61
76
|
|
|
62
|
-
//
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
77
|
+
// Determina o modo (wake ou local)
|
|
78
|
+
const mode = options.mode || 'local'
|
|
79
|
+
|
|
80
|
+
// Valida opcoes de acordo com o modo
|
|
81
|
+
if (mode === 'wake') {
|
|
82
|
+
if (!options.store) {
|
|
83
|
+
console.error('[mKFashion] store e obrigatorio para mode="wake"')
|
|
84
|
+
return
|
|
85
|
+
}
|
|
86
|
+
if (!options.sku) {
|
|
87
|
+
console.error('[mKFashion] sku e obrigatorio para mode="wake"')
|
|
88
|
+
return
|
|
89
|
+
}
|
|
90
|
+
} else {
|
|
91
|
+
// Modo local - compatibilidade retroativa
|
|
92
|
+
if (!options.projectid) {
|
|
93
|
+
console.error('[mKFashion] projectid e obrigatorio para mode="local"')
|
|
94
|
+
return
|
|
95
|
+
}
|
|
96
|
+
if (!options.identifier) {
|
|
97
|
+
console.error('[mKFashion] identifier e obrigatorio para mode="local"')
|
|
98
|
+
return
|
|
99
|
+
}
|
|
70
100
|
}
|
|
71
101
|
|
|
72
102
|
// Salva configuracao
|
|
73
103
|
this._config = {
|
|
74
104
|
type: options.type || 'iframe',
|
|
75
|
-
|
|
76
|
-
|
|
105
|
+
mode: mode,
|
|
106
|
+
// Modo Wake
|
|
107
|
+
store: options.store || null,
|
|
108
|
+
sku: options.sku || null,
|
|
109
|
+
// Modo Local (compatibilidade)
|
|
110
|
+
projectid: options.projectid || options.store,
|
|
111
|
+
identifier: options.identifier || options.sku,
|
|
112
|
+
// Dimensoes
|
|
77
113
|
width: options.width || '90%',
|
|
78
114
|
height: options.height || '95%',
|
|
79
115
|
targetId: options.targetId || null
|
|
@@ -175,6 +211,17 @@ const mkfashion = {
|
|
|
175
211
|
}
|
|
176
212
|
},
|
|
177
213
|
|
|
214
|
+
/**
|
|
215
|
+
* Registra callback para quando produto for carregado (modo Wake)
|
|
216
|
+
* @param {Function} callback - Funcao que recebe dados do produto
|
|
217
|
+
*/
|
|
218
|
+
onProductLoaded(callback) {
|
|
219
|
+
if (typeof callback === 'function') {
|
|
220
|
+
this._callbacks.onProductLoaded = callback
|
|
221
|
+
this._log('Callback onProductLoaded registrado')
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
|
|
178
225
|
/**
|
|
179
226
|
* Reinicia a experiencia (volta para tela de instrucoes)
|
|
180
227
|
*/
|
|
@@ -241,9 +288,19 @@ const mkfashion = {
|
|
|
241
288
|
|
|
242
289
|
_buildUrl() {
|
|
243
290
|
const url = new URL(this.appUrl)
|
|
244
|
-
url.searchParams.set('company', this._config.projectid)
|
|
245
|
-
url.searchParams.set('sku', this._config.identifier)
|
|
246
291
|
url.searchParams.set('sdk', 'true')
|
|
292
|
+
url.searchParams.set('mode', this._config.mode)
|
|
293
|
+
|
|
294
|
+
if (this._config.mode === 'wake') {
|
|
295
|
+
// Modo Wake - usa store e sku da API
|
|
296
|
+
url.searchParams.set('store', this._config.store)
|
|
297
|
+
url.searchParams.set('sku', this._config.sku)
|
|
298
|
+
} else {
|
|
299
|
+
// Modo Local - compatibilidade
|
|
300
|
+
url.searchParams.set('company', this._config.projectid)
|
|
301
|
+
url.searchParams.set('sku', this._config.identifier)
|
|
302
|
+
}
|
|
303
|
+
|
|
247
304
|
return url.toString()
|
|
248
305
|
},
|
|
249
306
|
|
|
@@ -393,11 +450,22 @@ const mkfashion = {
|
|
|
393
450
|
this._triggerCallback('onReady', data)
|
|
394
451
|
break
|
|
395
452
|
|
|
453
|
+
case 'product_loaded':
|
|
454
|
+
this._log('Produto carregado', data)
|
|
455
|
+
this._triggerCallback('onProductLoaded', data)
|
|
456
|
+
break
|
|
457
|
+
|
|
396
458
|
case 'add_to_cart':
|
|
397
459
|
this._log('Adicionar ao carrinho', data)
|
|
398
460
|
this._triggerCallback('onAddToCart', {
|
|
399
|
-
|
|
461
|
+
// Modo Wake
|
|
462
|
+
store: this._config.store,
|
|
463
|
+
sku: this._config.sku,
|
|
464
|
+
// Modo Local (compatibilidade)
|
|
465
|
+
identifier: this._config.identifier || this._config.sku,
|
|
466
|
+
// Dados do evento
|
|
400
467
|
size: data?.size || null,
|
|
468
|
+
product: data?.product || null,
|
|
401
469
|
...data
|
|
402
470
|
})
|
|
403
471
|
break
|
package/test.html
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="pt-BR">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Teste SDK NPM</title>
|
|
6
|
-
<script src="https://unpkg.com/mkfashion-sdk@1.0.3/src/mkfashion.js"></script>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Teste mKFashion SDK (NPM)</h1>
|
|
10
|
-
<button onclick="testar()">Abrir Provador</button>
|
|
11
|
-
|
|
12
|
-
<script>
|
|
13
|
-
// Verifica se carregou
|
|
14
|
-
console.log('mkfashion:', mkfashion);
|
|
15
|
-
console.log('Status:', mkfashion.getStatus());
|
|
16
|
-
|
|
17
|
-
mkfashion.addToCart(function(payload) {
|
|
18
|
-
alert('Produto: ' + payload.identifier + '\nTamanho: ' + payload.size);
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
function testar() {
|
|
22
|
-
mkfashion.open({
|
|
23
|
-
type: 'iframe',
|
|
24
|
-
projectid: 'demo',
|
|
25
|
-
identifier: 'TESTE-001',
|
|
26
|
-
width: 400,
|
|
27
|
-
height: 700
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
</script>
|
|
31
|
-
</body>
|
|
32
|
-
</html>
|