Uma linha no <head> da loja e pronto. O mK Fashion+ tem um módulo dedicado à Wake que reconhece a loja sozinho, lê o produto e os tamanhos da PDP e adiciona ao carrinho pela API nativa da plataforma. Sem app, sem plugin e sem editar o template de produto.
No <head> do template base da loja, em todas as páginas.
<script src="https://unpkg.com/mk-sdk-git@1/dist/mk-sdk.js"
data-mk-project="SEU_PROJECT_ID"
data-mk-product="mk-fashion"
async></script>Troque SEU_PROJECT_ID pelo identificador do seu projeto. O atributo async garante que a tag não bloqueia o carregamento da página, e @1 fixa a major da versão: você recebe correção sem risco de um release novo mudar a loja sem aviso.
A metaKosmos cria o projeto e envia o identificador. Ele é o único valor que muda na tag, e não é segredo: vai no HTML público da loja.
Com uma credencial de API da Wake, o catálogo é importado inteiro: produtos, variantes, preços, imagens, categorias e status de exibição. Você não cadastra produto a produto nem mantém planilha de URLs, e a re-sincronização roda em horário configurado por projeto.
No Wake Storefront, o template base do repositório Git da loja. No Fbits clássico, o campo de scripts do cabeçalho no painel. Vale em todas as páginas, não só na de produto: é assim que o funil inteiro, da visita à compra, é medido.
Lojas Wake e Fbits costumam ter Content Security Policy restritiva. O SDK já usa unpkg por padrão porque é o CDN que essas lojas normalmente liberam. Se o console acusar bloqueio, adicione https://unpkg.com ao script-src.
Com o projeto configurado, o botão de provar aparece sozinho ao lado do comprar, nos produtos que têm provador. Abra o provador, escolha um tamanho, adicione ao carrinho e confira o item no mini-cart.
O catálogo vem da API da Wake com preço de e preço por, variantes, categorias, EAN, gênero e dimensões, e as fotos são reescritas para alta resolução, já que a Wake entrega miniatura por padrão. Produto novo entra na próxima sincronização.
A adição usa a própria addOrCreateCheckout da loja, com o productVariantId da variante escolhida. Não é clique simulado em botão: é a mesma chamada que o tema faria.
O Wake Storefront novo guarda o número da variante no botão de adicionar; o Fbits clássico, num input próprio. O adapter lê os dois, então a mesma tag serve para lojas migradas e não migradas.
Ao escolher um tamanho no provador, o adapter dispara a mesma seleção que o cliente faria na página e espera o tema re-renderizar. Produto matriz de cor e tamanho cai na variante certa sem regex e sem adivinhação.
O botão é injetado em Shadow DOM fechado, ancorado ao lado do adicionar ao carrinho nativo, com aparência controlada pelo painel. O tema da loja não precisa de um único componente novo.
A Wake tem gaveta lateral, então o SDK atualiza e abre o mini-cart em vez de levar o cliente para a página de carrinho. A pessoa vê o item e continua onde estava.
Visita, produto, carrinho e compra são detectados por sinais que a loja já emite. Nenhum evento manual, nenhuma mudança no checkout.
A integração tem duas metades, e vale entender a diferença porque elas resolvem problemas distintos.
O catálogo é servidor com servidor. A metaKosmos conecta na API da Wake com uma credencial e importa produtos, variantes, preços, imagens, categorias e status de exibição. Isso é o que faz o provador saber que peça é aquela, com que grade e com que foto. A re-sincronização é agendada por projeto, então lançamento de coleção entra sozinho.
A loja é a tag no tema. Ela roda no navegador do cliente final, reconhece a página de produto, injeta o botão e adiciona ao carrinho. É a metade que aparece na tela.
As duas se encontram no identificador do produto: o mesmo id que veio da API da Wake é o que a tag lê da página. Por isso não existe planilha de URLs públicas para manter em sincronia, e mudar o endereço de um produto na loja não quebra a experiência.
O mk-sdk é um script único que roda em todas as páginas da loja. Ao carregar, ele identifica a plataforma pelos objetos que a própria Wake publica na página e passa a usar o módulo dedicado a ela.
A partir daí, tudo que o provador precisa vem da página: o identificador do produto, os tamanhos disponíveis na PDP e o caminho para adicionar ao carrinho.
Na página de produto, o SDK confere se aquele item tem provador disponível. Se tiver, injeta o botão ancorado ao botão de comprar nativo, em Shadow DOM fechado, com o CSS da loja isolado do nosso e vice-versa.
A posição é resolvida automaticamente e pode ser ajustada por projeto no painel, inclusive com âncoras diferentes para desktop e mobile. Se a loja preferir o próprio botão, a API pública mk.open e mk.isAvailable continuam disponíveis para chamar o provador de onde quiser.
O cliente escolhe o tamanho dentro do provador. O adapter aciona a mesma seleção de atributo que existe na página, aguarda o tema re-renderizar a variante e então chama a API de checkout da Wake com o productVariantId correspondente.
Em seguida, o mini-cart é recarregado e aberto. A Wake mostra a gaveta lateral sozinha, então não há redirecionamento para a página de carrinho: o provador segue aberto para a avaliação e o item já está lá quando o cliente fecha.
Este é o ponto que mais trava integração em loja Wake ou Fbits. A política de segurança de conteúdo da loja precisa permitir o domínio de onde o script é servido.
Por isso a tag padrão aponta para o unpkg: é o CDN que essas lojas costumam já ter liberado. Quando o console acusa bloqueio de CSP no script, basta incluir https://unpkg.com na diretiva script-src. Há também distribuição por jsDelivr, para o caso de a loja liberar esse e não o outro.
A integração é validada em lojas Wake em produção, nos dois temas da plataforma, incluindo produto matriz com cor e tamanho.
Para conferir na sua loja, existe uma extensão de navegador que injeta o SDK em qualquer site e mostra a detecção de plataforma, o SKU resolvido e o fluxo de carrinho. Dá para validar a integração inteira antes de a loja instalar a tag.
Sim, com módulo dedicado. O SDK reconhece a loja Wake sozinho e usa a API nativa da plataforma para ler o produto e adicionar ao carrinho, tanto no Wake Storefront quanto no Fbits clássico.
Não. A única alteração é a tag no <head> do template base, que vale para todas as páginas. O botão do provador é injetado automaticamente na página de produto.
Não. Na Wake, o produto é identificado pelo próprio id da loja, lido da página. Trocar o endereço de um produto não quebra a experiência nem exige atualizar cadastro.
Por conector nativo: com uma credencial de API da Wake, o catálogo é importado com produtos, variantes, preços, imagens, categorias e status de exibição, e re-sincronizado em horário configurado. Não há cadastro manual nem importação por planilha.
Pode, e é o problema mais comum em lojas Wake e Fbits. Por isso o CDN padrão é o unpkg, normalmente já liberado. Se houver bloqueio, inclua https://unpkg.com na diretiva script-src da política da loja.
Sim. Ao escolher o tamanho no provador, o adapter dispara a seleção de atributo do próprio tema e espera a página re-renderizar antes de adicionar, então a variante enviada ao carrinho é a correta.