Como instalar o visualizador 3D da Complete na VTEX

Antes de começar

No Complete Dashboard, abra "Meus produtos", escolha a peça e copie o código de incorporação:

<iframe src="https://www.completemagazine.com.br/ar/CODIGO-DO-PRODUTO" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

O trecho depois de /ar/ é o código daquela peça. É ele que identifica o produto no visualizador.

Caminho 1: na descrição do produto

1. 01

   Abra o produto no catálogo

   No painel administrativo da VTEX, entre no catálogo e abra o produto que vai receber o 3D.

2. 02

   Cole o código na descrição

   O campo de descrição do produto aceita HTML. Cole o código de incorporação no ponto em que o visualizador deve aparecer.

3. 03

   Salve e confira na loja

   Salve, aguarde a atualização do catálogo e abra a página do produto no computador e no celular.

Nem todo tema da VTEX mostra o HTML da descrição como ele foi escrito. Alguns temas passam a descrição por um filtro que retira iframes, e o visualizador simplesmente não aparece, sem mensagem de erro. Por isso a conferência na loja, depois de salvar, não é opcional.

Caminho 2: um bloco no tema

Para o catálogo inteiro, o caminho mais sólido é o tema da loja ler o código da peça num campo do produto e montar o visualizador perto da galeria. Na VTEX, isso costuma ser feito assim:

1. 01

   Crie uma especificação de produto

   No catálogo, crie um campo de especificação de texto, por exemplo "Complete 3D", no grupo de especificações da categoria que vai receber as peças.

2. 02

   Preencha em cada produto

   Cole no campo apenas o código da peça, o trecho que vem depois de /ar/ no código de incorporação.

3. 03

   Peça o bloco a quem cuida do tema

   Quem desenvolve a loja cria, na página de produto, um bloco que lê essa especificação e monta o iframe com o mesmo endereço, a mesma largura e as mesmas permissões do código do Dashboard. Quando o campo estiver vazio, o bloco não aparece.

4. 04

   Teste antes de publicar

   O teste deve ser feito num ambiente de desenvolvimento do tema, em um produto com o campo preenchido e em outro sem, antes de levar a mudança para a loja no ar.

O detalhe que costuma ficar para trás é o atributo allow do iframe. Sem "xr-spatial-tracking; fullscreen; camera", a peça gira na página, mas o celular não abre a realidade aumentada. Vale mandar o código do Dashboard inteiro para quem vai desenvolver o bloco, e não só o endereço.

Se algo não aparecer

Se o visualizador não surgir pela descrição, o mais provável é o filtro de HTML do tema, e o caminho passa a ser o bloco. Se surgir em branco, confira se o código da peça está completo. Se a peça girar e a realidade aumentada não abrir, confira as permissões do iframe e teste no próprio celular, fora do editor.