Configurar template no SmartCheckout

VTEX Team

VTEX Team

Última atualização

O novo portal hoje é utilizado para renderizar as telas de Checkout (Carrinho > Dados pessoais > Endereço > Forma de Pagamento) e OrderPlaced (Tela de confirmação de compra). Aqui aprenderemos como cadastrar e configurar seus recursos. Vamos lá.

Primeiramente, acesse o módulo Portal como indica a imagem abaixo. Cuidado para não confundir esse módulo com o “Gerenciador de Portal”, presente no módulo Catalog.

Já no módulo Portal, a primeira tela exibirá os Sites que estão cadastrados para a conta. Cada site cadastrado corresponde a um multi domínio, se a conta possuir multi domínio contratado. Para as contas que não utilizam multi domínio, o cadastro de mais de um Site, nesse módulo, não fará sentido. Leia mais sobre multi domínio clicando aqui.

Como indicado na imagem, nessa tela é possível Criar um novo site, Editar dados básicos de sites já existentes ou Configura-los.

Para criar um novo site clique em “Novo Site”.

Agora, preencha os campos abaixo seguindo as instruções:

  • Título: Campo livre
  • Nome do site: Esse campo deve ser preenchido com um valor que corresponda a algum host da loja desejada. É impossível cadastrar dois (ou mais) Sites com esse campo preenchido com o mesmo valor.

Veja imagem abaixo:

Clique em salvar para concluir o cadastro do novo site.

Como indica na imagem abaixo, também é possível alterar essas informações. As regras são as mesmas.

Como indica na próxima imagem, ao clicar no nome do Site, o sistema exibe todas as informações de configuração e permite navegação pelas seguintes opções de menu:

  • Sites: Retorna para a tela inicial;
  • Configuração: Permite configurações básicas (veremos a diante);
  • Páginas: Exibe as páginas existentes para o site. Por padrão, são criadas duas páginas: checkout e checkout/orderPlaced. Como já dito, no inicio desse post, a página checkoutcorresponde às páginas de carrinho, dados pessoais, endereço e forma de pagamento. A página checkout/orderPlaced corresponde à página de Confirmação de Compra;
  • Código: Templates relacionados ao site.

Em Páginas é possível Criar novas páginas, Editar e Excluir páginas existentes. Veja as duas imagens seguintes demonstrando Edição e Exclusão. A criação segue mesmas regras de edição.

Edição de Página:

Exclusão de Página:

Em Configurações podemos editar os campos abaixo:

  • Título: Caso informado, será exibido no título das páginas de carrinho, finalização de compra e pedido confirmado.
  • Google Tag Manager: Informe o ID (GTM-XXXX) do seu contêiner do Google Tag Manager caso deseje usá-lo automaticamente
  • Ativar interface específica para Totem: Caso ativado, o site passará a ter uma interface específica para o Totem.
  • Timeout: Tempo de expiração em segundos para a sessão do usuário no Totem. O padrão é 600 segundos.
  • Url: Quando a sessão expirar, o usuário será redirecionado para url configurada. A url padrão é a página inicial do site.

Segue imagem exemplificando preenchimento desse formulário:

Em Código, serão exibidos, a direita, todos os templates relacionados ao Site. Por padrão, o sistema configura os templates exemplificados na imagem abaixo:

Desses templates, os únicos que não podem ser alterados são vtex-checkout e vtex-orderPlaced. Esses templates correspondem ao funcionamento nativo da plataforma, ou seja, são eles que renderizam o conteúdo principal dessas páginas, tanto o checkout quanto o orderPlaced.

Na imagem seguinte, demonstramos a área afetada, no checkout, pela configuração do template checkout-footer. Esse é apenas um exemplo de template vazio.

Na próxima imagem, temos um exemplo equivalente ao anterior, porém, dessa vez, com código HTML preenchido. Note que o código preenchido na esquerda corresponde a área superior da direita. Esse é o template checkout-header.

Como podemos ver na próxima imagem, todos os templates que possuem o prefixo checkoutserão utilizados em todas as páginas do Checkout. Nesse exemplo, já estamos na página Forma de Pagamento e note que o header carregado é o mesmo do exemplo anterior.

Como nos templates do checkout, o mesmo acontece com os templates de orderPlaced. Ou seja, os templates com prefixo orderPlaced correspondem unicamente a página OrderPlaced (Confirmação de Compra).

Como explicado acima, os únicos templates que não são permitidas alterações são vtex-checkout e vtex-orderPlaced. Esses templates renderizam ao conteúdo básico das páginas Checkout e OrderPlaced. A seguir, exemplos do conteúdo renderizado pelos templates.

Template vtex-checkout:

Template vtex-orderPlaced:

As contas que possuem multi domínio podem usar apenas um site, se não houver necessidade de configurações específicas. Isso porque, ainda que exista apenas um Site, a plataforma inclui uma classe na tag <body> de acordo com o domínio acessado. Dessa forma, é simples aplicar layouts diferentes para o mesmo site.

Classe inserida na tag <body> de acordo com o domínio acessado:

Importante: Todo javascript que for incluído diretamente em qualquer template do Portal será ignorado pela plataforma, ou seja, no momento da renderização da página, a plataforma o removerá. Isso porque o SmartCheckout apenas aceita scripts originados no Google Tag Manager. Assim, sempre que houver necessidade de realizar alguma customização (ou mesmo inserção de tags específicas) via javascript, faça essa inclusão via Google Tag Manager.