mkfashion-sdk 2.7.4 → 2.7.7

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.
Files changed (7) hide show
  1. package/deploy-test/index.html +139 -0
  2. package/deploy-test/mkfashion.js +1304 -0
  3. package/docs/2026-05-22-sdk-v3-ecommerce-tracking-design.md +311 -311
  4. package/gtm-snippet.js +116 -116
  5. package/package.json +1 -1
  6. package/src/mkfashion.js +122 -1
  7. package/test-orientation.html +138 -0
package/deploy-test/index.html ADDED
@@ -0,0 +1,139 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
+ <title>mKFashion SDK — Teste de Orientação (Móveis)</title>
7
+ <!-- SDK na mesma pasta (deploy-ready). Para a Hostinger: suba este index.html + mkfashion.js juntos. -->
8
+ <script src="./mkfashion.js"></script>
9
+ <style>
10
+ :root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
11
+ * { box-sizing: border-box; }
12
+ body { margin: 0; padding: 20px; max-width: 720px; margin-inline: auto; color: #1c1d1d; }
13
+ h1 { font-size: 18px; margin: 0 0 4px; }
14
+ p.sub { margin: 0 0 20px; color: #6c6c6c; font-size: 13px; }
15
+ .card { background: #f5f5f5; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
16
+ .card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; color: #4a4a4a; }
17
+ label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
18
+ input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
19
+ .row { display: flex; gap: 8px; flex-wrap: wrap; }
20
+ button { cursor: pointer; border: none; border-radius: 40px; font-weight: 700; font-size: 14px; padding: 12px 20px; transition: opacity .2s; }
21
+ button:hover { opacity: .85; }
22
+ .btn-primary { background: #1c1d1d; color: #fff; width: 100%; }
23
+ .env-btn { background: #fff; border: 1px solid #ccc; color: #1c1d1d; font-weight: 500; padding: 8px 14px; border-radius: 8px; }
24
+ .env-btn.active { background: #1c1d1d; color: #fff; border-color: #1c1d1d; }
25
+ .kv { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eaeaea; }
26
+ .kv span:first-child { color: #6c6c6c; }
27
+ .kv span:last-child { font-weight: 600; font-family: ui-monospace, monospace; }
28
+ .hint { font-size: 12px; color: #4a4a4a; line-height: 1.5; }
29
+ .hint b { color: #1c1d1d; }
30
+ #log { font-family: ui-monospace, monospace; font-size: 11px; background: #1c1d1d; color: #b8e8b0; padding: 12px; border-radius: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
31
+ .pill { display: inline-block; background: #e8e8e8; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <h1>Teste de Orientação — Fluxo de Móveis</h1>
36
+ <p class="sub">Abre o provador <b>via SDK (iframe)</b> pra testar o botão "Ver na horizontal" no contexto real de uma PDP.</p>
37
+
38
+ <div class="card">
39
+ <h2>1. Ambiente do visualizer</h2>
40
+ <p class="hint" style="margin-top:0">O fluxo de móveis + orientação precisa estar deployado no visualizer do ambiente escolhido (branch <code>eric-dev-21</code>). Testar contra um ambiente sem o fluxo novo mostra a versão antiga.</p>
41
+ <div class="row" style="margin-top:8px">
42
+ <button class="env-btn active" data-env="prod">Produção</button>
43
+ <button class="env-btn" data-env="staging">Staging</button>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="card">
48
+ <h2>2. Produto</h2>
49
+ <label>Project ID</label>
50
+ <input id="projectId" value="6a1062ee638ec5a994b9b4bf" />
51
+ <label>Identifier (SKU)</label>
52
+ <input id="identifier" value="DEMO-10" />
53
+ <button class="btn-primary" id="openBtn">Abrir Provador</button>
54
+ </div>
55
+
56
+ <div class="card">
57
+ <h2>3. Plataforma detectada</h2>
58
+ <div class="kv"><span>Tipo</span><span id="pf-type">—</span></div>
59
+ <div class="kv"><span>iOS</span><span id="pf-ios">—</span></div>
60
+ <div class="kv"><span>screen.orientation.lock</span><span id="pf-lock">—</span></div>
61
+ <div class="kv"><span>HTTPS (necessário p/ girar no Android)</span><span id="pf-https">—</span></div>
62
+ <div class="kv"><span>Caminho esperado p/ "Ver na horizontal"</span><span id="pf-path">—</span></div>
63
+ <p class="hint" style="margin-top:12px">
64
+ <b>Desktop</b>: SDK redimensiona o iframe pra widescreen.<br>
65
+ <b>Android</b>: fullscreen + trava a tela em paisagem (gira de verdade).<br>
66
+ <b>iPhone</b>: sem rotação → lightbox com a imagem ampliada.
67
+ </p>
68
+ </div>
69
+
70
+ <div class="card">
71
+ <h2>4. Eventos do SDK</h2>
72
+ <p class="hint" style="margin-top:0">Confirme aqui o <span class="pill">experience_clicked</span> (dispara no clique de "Abrir Provador") e demais interações.</p>
73
+ <div id="log">aguardando…</div>
74
+ </div>
75
+
76
+ <script>
77
+ const ENVS = {
78
+ prod: { appUrl: 'https://mkfashion.mk3dlabs.com/visualizer', apiUrl: 'https://mkfashion-new-api.mk3dlabs.com' },
79
+ staging: { appUrl: 'https://mkfashion.metakosmoslab.com/visualizer', apiUrl: 'https://mkfashion-api.metakosmoslab.com' },
80
+ }
81
+ let currentEnv = 'prod'
82
+
83
+ const logEl = document.getElementById('log')
84
+ let logLines = []
85
+ function log(msg) {
86
+ const t = new Date().toLocaleTimeString()
87
+ logLines.unshift(`[${t}] ${msg}`)
88
+ logEl.textContent = logLines.slice(0, 50).join('\n')
89
+ }
90
+
91
+ // --- Detecção de plataforma (espelha a lógica do useOrientation no visualizer) ---
92
+ const isIos = /iPad|iPhone|iPod/i.test(navigator.userAgent) ||
93
+ (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
94
+ const isMobile = !window.matchMedia('(hover: hover) and (pointer: fine)').matches
95
+ const hasLock = !!(window.screen && window.screen.orientation && typeof window.screen.orientation.lock === 'function')
96
+ const isHttps = window.location.protocol === 'https:'
97
+
98
+ document.getElementById('pf-type').textContent = isMobile ? 'Mobile' : 'Desktop'
99
+ document.getElementById('pf-ios').textContent = isIos ? 'Sim' : 'Não'
100
+ document.getElementById('pf-lock').textContent = hasLock ? 'disponível' : 'indisponível'
101
+ document.getElementById('pf-https').textContent = isHttps ? 'Sim ✓' : 'NÃO — Android não vai girar'
102
+ document.getElementById('pf-path').textContent =
103
+ !isMobile ? 'Resize do iframe (desktop)'
104
+ : isIos ? 'Lightbox (iOS)'
105
+ : hasLock ? 'Fullscreen + lock (Android)'
106
+ : 'Lightbox (fallback)'
107
+
108
+ // --- Seletor de ambiente ---
109
+ document.querySelectorAll('.env-btn').forEach(btn => {
110
+ btn.addEventListener('click', () => {
111
+ document.querySelectorAll('.env-btn').forEach(b => b.classList.remove('active'))
112
+ btn.classList.add('active')
113
+ currentEnv = btn.dataset.env
114
+ log(`Ambiente: ${currentEnv} (${ENVS[currentEnv].appUrl})`)
115
+ })
116
+ })
117
+
118
+ // --- Callbacks do SDK (debug visível) ---
119
+ mkfashion.debug = true
120
+ mkfashion.onReady(() => log('onReady — provador carregado (experience_started deve ter disparado no iframe)'))
121
+ mkfashion.onInteraction(d => log(`onInteraction — ${d.category}/${d.action}`))
122
+ mkfashion.addToCart(p => log('addToCart — ' + JSON.stringify(p?.name || p?.mainIdentifier || p)))
123
+ mkfashion.onClose(() => log('onClose — provador fechado'))
124
+
125
+ // --- Abrir ---
126
+ document.getElementById('openBtn').addEventListener('click', () => {
127
+ const env = ENVS[currentEnv]
128
+ mkfashion.appUrl = env.appUrl
129
+ mkfashion.apiUrl = env.apiUrl
130
+ const projectId = document.getElementById('projectId').value.trim()
131
+ const identifier = document.getElementById('identifier').value.trim()
132
+ log(`open() → ${projectId} / ${identifier} @ ${currentEnv}`)
133
+ mkfashion.open({ projectId, identifier })
134
+ })
135
+
136
+ log('pronto — escolha o ambiente e clique em Abrir Provador')
137
+ </script>
138
+ </body>
139
+ </html>