mkfashion-sdk 2.4.5 → 2.4.6
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 +2 -2
- package/package.json +1 -1
- package/src/mkfashion.js +5 -0
- package/test-exit-confirmation.html +0 -157
package/index.html
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
|
|
15
15
|
<script>
|
|
16
16
|
(function () {
|
|
17
|
-
var projectid = '
|
|
18
|
-
var identifier = '
|
|
17
|
+
var projectid = '69f09de7fe3120f54c06e0d6';
|
|
18
|
+
var identifier = 'demo-002';
|
|
19
19
|
|
|
20
20
|
function initMkFashion() {
|
|
21
21
|
mkfashion.addToCart(function (payload) {
|
package/package.json
CHANGED
package/src/mkfashion.js
CHANGED
|
@@ -128,6 +128,11 @@ const mkfashion = {
|
|
|
128
128
|
return
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
+
// Avisa o iframe pra limpar a UI de confirmacao de saida antes de esconder.
|
|
132
|
+
// Sem isso, o modal de "Tem certeza?" fica aberto e reaparece na proxima abertura
|
|
133
|
+
// (porque o iframe nao eh destruido entre open/close — apenas escondido).
|
|
134
|
+
this._postToIframe('dismiss_exit_confirmation')
|
|
135
|
+
|
|
131
136
|
this._hideModal()
|
|
132
137
|
this._triggerCallback('onClose')
|
|
133
138
|
this._isOpen = false
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="pt-BR">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>[TEMP] Teste — Confirmação de saída</title>
|
|
8
|
-
<script src="./src/mkfashion.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body {
|
|
11
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
-
max-width: 720px;
|
|
13
|
-
margin: 40px auto;
|
|
14
|
-
padding: 0 16px;
|
|
15
|
-
color: #1c1d1d;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
h1 {
|
|
19
|
-
margin: 0 0 8px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
p {
|
|
23
|
-
color: #555;
|
|
24
|
-
line-height: 1.5;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
code {
|
|
28
|
-
background: #f3f3f3;
|
|
29
|
-
padding: 2px 6px;
|
|
30
|
-
border-radius: 4px;
|
|
31
|
-
font-size: 0.9em;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.row {
|
|
35
|
-
display: flex;
|
|
36
|
-
gap: 12px;
|
|
37
|
-
flex-wrap: wrap;
|
|
38
|
-
margin: 24px 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
button {
|
|
42
|
-
padding: 12px 20px;
|
|
43
|
-
border: none;
|
|
44
|
-
border-radius: 999px;
|
|
45
|
-
background: #1c1d1d;
|
|
46
|
-
color: #fff;
|
|
47
|
-
font-size: 14px;
|
|
48
|
-
font-weight: bold;
|
|
49
|
-
cursor: pointer;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
button.secondary {
|
|
53
|
-
background: #fff;
|
|
54
|
-
color: #1c1d1d;
|
|
55
|
-
border: 1px solid #1c1d1d;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
pre {
|
|
59
|
-
background: #0f0f0f;
|
|
60
|
-
color: #b6f7c1;
|
|
61
|
-
padding: 12px;
|
|
62
|
-
border-radius: 8px;
|
|
63
|
-
max-height: 240px;
|
|
64
|
-
overflow: auto;
|
|
65
|
-
font-size: 12px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
ul {
|
|
69
|
-
line-height: 1.7;
|
|
70
|
-
}
|
|
71
|
-
</style>
|
|
72
|
-
</head>
|
|
73
|
-
|
|
74
|
-
<body>
|
|
75
|
-
|
|
76
|
-
<h1>Teste — Confirmação de saída</h1>
|
|
77
|
-
<p>
|
|
78
|
-
SDK local apontando para <code>http://localhost:5173/visualizer/</code>.
|
|
79
|
-
API em produção (<code>mkfashion-new-api.mk3dlabs.com</code>).
|
|
80
|
-
</p>
|
|
81
|
-
<p><strong>O que testar:</strong></p>
|
|
82
|
-
<ul>
|
|
83
|
-
<li>Clicar no <strong>X</strong> dentro do iframe → modal "Tem certeza...?" aparece. <em>Voltar</em> cancela; <em>Sair</em> fecha o SDK.</li>
|
|
84
|
-
<li>Clicar <strong>fora do iframe</strong> (backdrop preto) → modal aparece. Um <strong>segundo clique</strong> no backdrop fecha direto.</li>
|
|
85
|
-
<li>Pressionar <strong>ESC</strong> → mesma lógica do backdrop.</li>
|
|
86
|
-
<li>Clicar em <em>Voltar</em>, depois clicar no backdrop de novo → modal reabre normalmente (flag resetou).</li>
|
|
87
|
-
<li><code>mkfashion.close()</code> programático fecha sem confirmação.</li>
|
|
88
|
-
</ul>
|
|
89
|
-
|
|
90
|
-
<div class="row">
|
|
91
|
-
<button id="btn-open">Abrir provador</button>
|
|
92
|
-
<button id="btn-close-prog" class="secondary">mkfashion.close() programático</button>
|
|
93
|
-
<button id="btn-clear-log" class="secondary">Limpar log</button>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<h3>Log de eventos do SDK</h3>
|
|
97
|
-
<pre id="log">aguardando...</pre>
|
|
98
|
-
|
|
99
|
-
<script>
|
|
100
|
-
(function () {
|
|
101
|
-
var projectId = '69c56d5373ecdf64df48e330';
|
|
102
|
-
var identifier = '000862452107';
|
|
103
|
-
|
|
104
|
-
var logEl = document.getElementById('log');
|
|
105
|
-
function log(label, data) {
|
|
106
|
-
var line = '[' + new Date().toLocaleTimeString() + '] ' + label;
|
|
107
|
-
if (data !== undefined) line += ' ' + JSON.stringify(data);
|
|
108
|
-
logEl.textContent = (logEl.textContent === 'aguardando...' ? '' : logEl.textContent) + line + '\n';
|
|
109
|
-
logEl.scrollTop = logEl.scrollHeight;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
function init() {
|
|
113
|
-
// Aponta o iframe para o dev server local do Visualizer
|
|
114
|
-
mkfashion.appUrl = 'http://localhost:5173/visualizer';
|
|
115
|
-
mkfashion.debug = true;
|
|
116
|
-
|
|
117
|
-
mkfashion.onReady(function (data) { log('onReady', data); });
|
|
118
|
-
mkfashion.onClose(function () { log('onClose'); });
|
|
119
|
-
mkfashion.onError(function (err) { log('onError', err); });
|
|
120
|
-
mkfashion.onProductLoaded(function (p) { log('onProductLoaded', { name: p && p.product && p.product.name }); });
|
|
121
|
-
mkfashion.onGenerationComplete(function () { log('onGenerationComplete'); });
|
|
122
|
-
mkfashion.onInteraction(function (d) { log('interaction', { category: d.category, action: d.action }); });
|
|
123
|
-
|
|
124
|
-
document.getElementById('btn-open').onclick = function () {
|
|
125
|
-
log('open()', { projectId: projectId, identifier: identifier });
|
|
126
|
-
mkfashion.open({ projectId: projectId, identifier: identifier });
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
document.getElementById('btn-close-prog').onclick = function () {
|
|
130
|
-
log('mkfashion.close() programatico');
|
|
131
|
-
mkfashion.close();
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
document.getElementById('btn-clear-log').onclick = function () {
|
|
135
|
-
logEl.textContent = 'aguardando...';
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function waitForSdk() {
|
|
140
|
-
if (typeof mkfashion !== 'undefined') {
|
|
141
|
-
init();
|
|
142
|
-
} else {
|
|
143
|
-
setTimeout(waitForSdk, 100);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
if (document.readyState === 'loading') {
|
|
148
|
-
document.addEventListener('DOMContentLoaded', waitForSdk);
|
|
149
|
-
} else {
|
|
150
|
-
waitForSdk();
|
|
151
|
-
}
|
|
152
|
-
})();
|
|
153
|
-
</script>
|
|
154
|
-
|
|
155
|
-
</body>
|
|
156
|
-
|
|
157
|
-
</html>
|