Uma linha no <head> do tema e pronto. O catálogo entra pela layer REST da DCG, com produtos, SKUs, preços, estoque e imagens, e na loja o mK Fashion+ usa o fluxo de carrinho do próprio tema, respeitando variante obrigatória como aro de anel.
No <head> do tema 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 o usuário e a senha do lojista na layer REST da DCG, o catálogo é importado: produtos, SKUs, preços por lista, estoque por SKU e as imagens. A re-sincronização roda em horário configurado por projeto, sem ninguém reimportar nada.
A tag precisa valer em todas as páginas, não só na de produto: é assim que o funil inteiro, da visita à compra, é medido. Se a sua operação usa gerenciador de tags, configure o disparo para todas as páginas.
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 ou aro, adicione e confira o item no mini-cart lateral.
Uma credencial do lojista dá acesso a produtos, variações, estoque por SKU, preço por lista e mídia. As imagens vêm na mesma consulta do produto, então a importação de uma loja grande não vira centenas de chamadas soltas.
O adapter aciona o botão de compra da loja, e é o tema que serializa o formulário, registra o item e abre o mini-cart. Carrinho, contador e resumo ficam consistentes porque quem adicionou foi a própria loja.
Em joalheria, anel com aro obrigatório é recusado pela loja se nada estiver escolhido. O provador marca a variante que o cliente selecionou e só então adiciona, então a peça entra no carrinho com o aro certo em vez de esbarrar no aviso da loja.
O tema registra a variante escolhida num estado interno de forma assíncrona. O adapter aguarda esse registro antes de adicionar, porque adicionar cedo demais mandaria o valor padrão em vez do aro que o cliente escolheu.
A página costuma ter mais de um botão de adicionar, incluindo os de blocos de produtos relacionados que estão ocultos. O adapter usa o botão visível da página de produto, então a adição é sempre da peça aberta.
Depois de adicionar, o SDK atualiza e abre a gaveta lateral do tema. O provador segue aberto para a avaliação e o cliente retoma a navegação de onde parou.
A integração tem duas metades, e elas resolvem problemas distintos.
O catálogo é servidor com servidor. A metaKosmos conecta na layer REST da DCG com o usuário e a senha do lojista e importa produtos, variações, estoque por SKU, preço por lista e imagens. 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 pelos controles que o tema publica, injeta o botão e adiciona ao carrinho.
As duas se encontram no id do produto, o mesmo número que aparece no fim da URL da página. Por isso não existe planilha de URLs públicas para manter em sincronia.
Na Linx, o produto e a variação têm números diferentes e próximos, o que é uma armadilha fácil: o produto pode ser 1045317 e a variação 1045318.
O catálogo do provador usa o id do produto. O adapter o lê do fim da URL da página e, se precisar, da classe que o tema coloca no corpo do documento. É esse número que o cadastro na metaKosmos usa, então não há tradução no meio nem risco de casar com a peça vizinha.
Esse é o ponto mais específico desta plataforma, e ele aparece em joalheria. Produto com variante obrigatória, como o aro de um anel, é recusado pela própria loja se nada estiver selecionado: o cliente recebe um aviso pedindo para escolher antes de adicionar.
O provador resolve isso marcando a variante que o cliente escolheu, do mesmo jeito que ele marcaria na página. Só que o tema registra essa escolha num estado interno de forma assíncrona, e não no instante do clique.
Se a adição acontecesse imediatamente, o que seria enviado é o valor padrão, e o cliente receberia em casa um anel de aro errado depois de provar o aro certo. Por isso o adapter aguarda o registro terminar antes de adicionar. É um detalhe invisível que separa uma integração que funciona de uma que gera troca.
O cliente escolhe o tamanho ou o aro dentro do provador. O adapter marca a variante correspondente, espera o tema registrá-la e aciona o botão de compra visível da página de produto.
A partir daí quem trabalha é a loja: o tema serializa o formulário, registra o item no carrinho e abre o mini-cart lateral com o resumo. Como existe gaveta, não há redirecionamento para a página de carrinho.
O caminho completo é validado em loja Linx Commerce em produção, incluindo produto com aro obrigatório e leitura do total no mini-cart.
Para conferir na sua loja antes de qualquer alteração, existe uma extensão de navegador que injeta o SDK em qualquer site e mostra a detecção de plataforma, o id resolvido e o fluxo de carrinho. Dá para validar a integração inteira sem tocar no tema.
Sim, com módulo dedicado. O SDK reconhece a loja pelos controles que o tema publica e adiciona ao carrinho pelo fluxo nativo, e o catálogo entra pela layer REST da DCG.
Não. É uma linha no <head> do tema, válida para todas as páginas, mais a credencial da layer da DCG para o catálogo.
Não. Com o usuário e a senha do lojista na layer da DCG, entram produtos, variações, preços por lista, estoque por SKU e imagens, com re-sincronização em horário configurado.
Sim, e esse caso recebeu tratamento próprio. O provador seleciona o aro escolhido e espera o tema registrar a escolha antes de adicionar, porque adicionar antes disso enviaria o valor padrão em vez do aro do cliente.
Pelo id do produto, não pelo SKU da variação. São números diferentes e parecidos, e o adapter lê o id certo da URL da página.
Não. O tema tem gaveta lateral, então o SDK a atualiza e abre. O provador segue aberto para a avaliação.