Lista de controles para templates

VTEX Team

VTEX Team

Última atualização

Os controles que serão listados abaixo são compatíveis com quase todas as páginas. Alguns deles não funcionam em algumas páginas.

ViewpartDescrição
<vtex.cmc:breadCrumb />Bread Crumb — Funciona apenas nas páginas de Produto, Departamento, Categoria e Busca.
<vtex.cmc:fullTextSearchBox/>Busca Total
Ver artigo completo
<vtex.cmc:navigationHistory/>Histórico de Navegação — Utilizado apenas para compor o conteúdo dos controles <vtex:contentPlaceHolder id="ColecaoQVVT"/> <vtex:contentPlaceHolder id="ColecaoQVCT" /> <vtex:contentPlaceHolder id="ColecaoQCCT" />
<vtex.cmc:storeFlagLocator/>Localizador de Lojas — Requisitos: Cadastrar no ADMIN as Lojas Físicas e seus endereços. Além disso, pesquisar cada endereço no Google Maps e preencher os devidos campos. Necessário configurar no banco de conexão da Loja a chave do Google Maps adquirida pela Loja.
<vtex.cmc:welcomeMessage/>Mensagem de Boas Vindas — No admin, na aba Configurações > Textos, é possível alterar a frase de Bem vindo.
<vtex:metaTags/>META TAGs
<vtex.cmc:canonicalPage disable="true"/>Desabilita a TAG canonical
<vtex.cmc:departmentLinks/>Links de Departamentos — Apresenta o primeiro nível de categorias criado no Admin. Necessário configurar no Departamento que o mesmo será apresentado no Menu Superior.
<vtex.cmc:departmentNavigator/>Menu de Departamentos — Os Departamentos e Categorias são apresentadas de acordo com o cadastro dos 1º e 2º Níveis. Para exibir o Link “Lista Completa”, também é necessário uma configuração nas Categorias Ativas do Departamento.
<vtex.cmc:searchTitle />Título da Página — Exibe o título das páginas de Departamento, Categoria e Busca.
<vtex.cmc:productQuickView/>Espiar (QuickView) — Controle deve ser adicionado antes do fechamento da tag </body> do template de página de Quickview. Ele é fundamental para o carregamento dos arquivos necessários da página.

<vtex.cmc:ProductQueryStringReferenceShelf/>

Atributo da TagDescrição do Atributo
layoutID do template da prateleira. Atributo obrigatório.
itemCountQuantidade de itens a serem apresentados. Atributo obrigatório.
columnCountQuantidade de colunas. Atributo obrigatório.
showUnavailableQuando o atributo está setado para true significa que deve exibir os produtos esgotados.
selectionMode=”batch-buy”Atributo não obrigatório que permite a realização de compra em lote.
isTrackableQuando o atributo está setado para true significa que este controle deve ser rastreável.
InternalCampaignNome da campanha interna.
InternalPartNome da view part interna.

Exemplo de uso:

<vtex.cmc:ProductQueryStringReferenceShelf layout="e2ed81f5-6241-4418-a47b-018d7482fcf0" itemCount="3" columnCount="3" showUnavailable="true" isTrackable="true" InternalCampaign="Destaque landing" InternalPart="Prateleira destaque" />

Controles para Página de Produto

ViewpartDescrição
<vtex.cmc:ProductGifts />Exibir brindes na página do produto
<vtex.cmc:productPageTitle />Título de Produto<title><vtex.cmc:productPageTitle /></title>
<vtex.cmc:productName/>Nome do Produto
<vtex.cmc:brandName/>Marca do produto com link
<vtex.cmc:ProductImage/>Imagem principal do produto com thumbs — Na versão SmartCheckout, para ativar o zoom, é necessário adicionar o atributo “zoom” na tag. Ex.: <vtex.cmc:ProductImage zoom="on"/>
<vtex.cmc:productReference/>Cód. de Referência do Produto
<vtex.cmc:StockKeepingUnitPriceHistory Months="6" Percentile="100"/>Histórico de Preço
<vtex.cmc:skuReference/>Cód. de Referencia do SKU
<vtex.cmc:skuPrice/>Preço de, Preço por, Parcelamento e Economia deADMIN: Depende do cadastro dos preços de um determinado SKU. Por exemplo, se o preço novo cadastrado for menor do que o antigo, o “de/para” é mostrado, bem como a “economia de”. A exibição de parcelamentos considera a regra do PCI que tiver valor do parcelamento mais caro. O parcelamento na página do produto não inclui custo de Frete.
<vtex.cmc:stockKeepingUnitSelection />Seleção de SKU — Parâmetro descontinuado, agora você deve utilizar o skuSelection. No comportamento anterior, funcionava quando a categoria está configurada para exibir os SKUs como combo.
<vtex.cmc:skuRichSelection changeImage="1" />Seleção de SKU Checkbox — Força o modo de seleção para o tipo radio
<vtex.cmc:skuSelection />Seleção de SKUs — Seguindo a configuração do admin (radio, checkbox, combo, etc.).
<vtex.cmc:OtherPaymentMethod/>Ver outras formas de pagamento
<vtex.cmc:Delivery/>Disponibilidade — Tempo com cidade e estado default
<vtex.cmc:shippingValue/>Calcular valor do frete e prazo de entrega
<vtex.cmc:stockKeepingUnitRewardValue/>Valor para Fidelidade
<vtex.cmc:stockKeepingUnitService/>Serviços do SKU
<vtex.cmc:BuyTogether/>Compre-Junto
<vtex.cmc:ProductDescription/>Descrição do produto
<vtex.cmc:productDescriptionShort />Descrição Curta do produto — Campo “Nome Complemento” do formulário de cadastro do produto
<vtex.cmc:productSpecification/>Especificação do produto
<vtex.cmc:stockKeepingUnitMeasures/>Dimensões reais do SKU
<vtex.cmc:ProductTag/>Tags associadas
<vtex.cmc:PageSearch/>Busca dentro da página de produto
<vtex.cmc:BuyButton/>Botão Comprar — Se o SKU estiver esgotado, exibirá o Avise-me se o mesmo estiver configurado no admin
<vtex.cmc:BuyInPage/>Botão Comprar (Assíncrono) — Esse controle adicionará o item ao carrinho de maneira assíncrona, ou seja, sem sair da página de produto. Para seu perfeito funcionamento, é obrigatória a utilização do controle AmountItemsInCart, também descrito nesse post.
<vtex.cmc:stockKeepingUnitAmountAndUnitSelection />Seletor de quantidade com unidade multiplicadora — Renderiza um campo de quantidade fracionada, trabalhando em conjunto com a unidade de medida e multiplicador de unidade (cadastrados no SKU) e resultando na quantidade a ser comprada.
<vtex.cmc:evaluationRate/>Avaliações dos consumidores (estrelas) — Retorna o total de classificações feitas pelos usuários
<vtex.cmc:UserReview/>Avaliações e comentários — Adiciona opção de avaliar e resultado das avaliações, formulário para comentar e visualização de comentários
<vtex.cmc:giftListInsertSku/>Adicionar produto a uma lista
<vtex.cmc:GiftListFormV2/>Form para criação de uma lista
<vtex.cmc:HightLight/>Flag de Destaque de Coleção
<vtex.cmc:discountHightLight/>Flags Destaques de Promoções
<vtex.cmc:SellerOptions />SellerOptions — Exibe as demais lojas que entregam o produto da página, o preço nesta loja e o parcelamento.
<vtex.cmc:sellerDescription />SellerDescription — Descrição cadastrada para o seller.
<vtex.cmc:sellerInfo />SellerInfo — Exibe informações do Seller. Esse controle deve ser utilizado na pasta “seller-info”.
<vtex.cmc:SalesChannelDropList />Lista de Políticas Comerciais — Lista com as Políticas Comerciais disponíveis
<vtex:contentPlaceHolder id="ColecaoQVVT" />Prateleira “Quem viu viu também” — No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Quem_Viu_Viu_Tambem” no campo Tipo e criar novo template de prateleira (o pré-requisito deste controle é que se tenha na página do produto o controle <vtex.cmc:navigationHistory/>)
<vtex:contentPlaceHolder id="ColecaoQVCT" />Prateleira “Quem comprou comprou também” — No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Quem_Comprou_Comprou_Tambem” no campo Tipo e criar novo template de prateleira. Para funcionar de forma adequada, sua loja precisa de um fluxo elevado de visitantes e compras (O pré-requisito deste controle é que se tenha na página do produto o controle <vtex.cmc:navigationHistory/>).
<vtex:contentPlaceHolder id="ColecaoQCCT" />Estante “Quem comprou comprou também” — En el portal, agregar un control del tipo “Produtos Relacionados”. Al editar el elemento, seleccionar “Quem_Comprou_Comprou_Tambem” en el campo Tipo. – Crear nuevo template de estante. – El prerrequisito de este control es que se tenga en la página del producto el control <vtex.cmc:navigationHistory/>
<vtex:contentPlaceHolder id="Similares" />Produtos Similares — No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Produtos_Similares” no campo Tipo.
<vtex:contentPlaceHolder id="Acessorios" />Accesórios — No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Acessorios” no campo Tipo.
<vtex:contentPlaceHolder id="Sugestoes" />Sugestões — No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Sugestao” no campo Tipo.
<vtex.cmc:facebookLike />Facebook Like

Controles de RichSnippets

<vtex.cmc:productRichSnippets />

Esse controle adiciona tags específicas de compartilhamento de informações com redes sociais (Google microformats, Facebook Open Graph e Twitter card). As ferramentas de teste são:

  1. https://www.google.com/webmasters/tools/richsnippets
  2. https://developers.facebook.com/tools/debug/
  3. https://cards-dev.twitter.com/validatorPropriedades
PropriedadeValores Possíveis
showGoogle{ “1”, “true”, “on”, “sim” }
showFacebook{ “1”, “true”, “on”, “sim” }
Twitter@accountname da conta do Twitter
doNotshowPrice{ “1”, “true”, “on”, “sim” }
googleRate{ “1”, “true”, “on”, “sim” }
fbAdmins
fbAppId
Exemplo de usoCódigo do Viewpart
Para que o produto seja indexado pelo Google o controle deve ser inserido dentro do tag body<vtex.cmc:productRichSnippets showGoogle="1" />
No caso de Facebook deve ser inserido dentro do tag head<vtex.cmc:productRichSnippets showFacebook="1" fbAdmins="[fbAdmins]" fbAppId="[fbAppId]" /> (as configurações de fbAdmins e fbAppId são opcionais.)
No caso de Twitter pode ser inserido dentro de head ou body<vtex.cmc:productRichSnippets Twitter="[TwitterAccount]" />
As configurações também podem ser agrupadas<vtex.cmc:productRichSnippets showGoogle="1" Twitter="[TwitterAccount]" />

Controles para Páginas de Departamento, Categoria e Busca

ViewpartDescrição
<vtex.cmc:advancedSearchFilter/>Filtro de Busca Avançada
<vtex.cmc:singleDepartmentNavigator/>Menu de Departamento — Atributo disponível: keepCurrentPath: Quando o atributo está setado para true significa que a exibição dos produtos devem acontecer na página exibida.
<vtex.cmc:searchNavigator/>Menu / Filtro de Busca — Os Departamentos e Categorias são apresentadas de acordo com o cadastro dos 1º e 2º nível e a configuração de apresentação no Menu. Para o Link “Lista Completa” também é necessário uma configuração nas Categorias Ativas do Departamento.
<vtex.cmc:searchResult/>Resultado da busca de produtos. Atributos da tag:
layout: Atributo obrigatório. Código do template da prateleira que exibirá o(s) produtos.
itemCount: Atributo obrigatório. Quantidade de itens a serem apresentados.
columnCount: Atributo obrigatório. Quantidade de colunas.
showUnavailable: Quando o atributo está setado para true significa que devem ser exibidos os produtos esgotados.
selectionMode=”batch-buy”: Atributo não obrigatório que permite a realização de compra em lote.
isTrackable: Quando o atributo está setado para true significa que este controle deve ser rastreável.
InternalCampaign: Nome da campanha interna.
InternalPart: Nome da view part interna.
Exemplo: <vtex.cmc:searchResult layout="48e223e6-da80-4610-b3d5-4e5cfaf94f13" itemCount="10" columnCount="4" /> Podem ser utilizados outros parâmetros como: isTrackable=”true”, InternalCampaign=”Resultado busca landing” e InternalPart=”Resultado Busca”
<vtex.cmc:miniCart/>Controle Minicart Controle de carrinho utilizado no menu superior em todas as páginas, exceto checkout e orderPlaced. Esse controle exibirá informações do carrinho: Itens, quantidades e preços
<vtex.cmc:AmountItemsInCart/>Controle AmountItemsInCart Esse controle exibe informações básicas do carrinho. Sua utilização é obrigatória caso seja utilizado o controle BuyInPage (Para utilizações de KitLook, por exemplo)

Para informações veja o tutorial controles do template de prateleira.

Outros controles

ViewpartDescrição
<vtex.cmc:orderList/>Exibe a listagem de pedidos do cliente para a página Meus Pedidos - “/account/orders”
<vtex.cmc:accountUserProfile />Exibe os dados de cadastro do cliente para a página Minha conta - “/account”
<vtex.cmc:accountAddress/>Exibe os endereços cadastrados do cliente para a página Minha conta - “/account”