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.

Viewpart Descrição
<vtex.cmc:breadCrumb/> Bread Crumb
Funciona apenas nas páginas de Produto, Departamento, Categoria e Busca.
<vtex.cmc:fullTextSearchBox/> Busca Total
<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: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:ProductQueryStringReferenceShelf/> Produtos em destaque (Landing Page)
Atributos da Tag:
layout: ID do template da prateleira. Atributo obrigatório.
itemCount: Quantidade de itens a serem apresentados. Atributo obrigatório.
columnCount: Quantidade de colunas. Atributo obrigatório.
showUnavailable: Quando 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.
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 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" />
<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.

Controles para Página de Produto

Viewpart Descrição
<vtex.cmc:ProductGifts /> Exibir brindes na página do produto
<vtex.cmc:productPageTitle/> Título do 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 Referência do Sku
<vtex.cmc:skuPrice/> Preço de, Preço por, Parcelamento e Economia de
ADMIN: 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”.
<vtex.cmc:stockKeepingUnitSelection /> Seleção de SKU
Atenção!
Parâmetro descontinuado, você deve utilizar o skuSelectionComportamento anterior: Funcionava quando a categoria está configurada para exibir os SKUs como combo.
<vtex.cmc:skuRichSelectionchangeImage="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: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:contentPlaceHolderid="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.
– Criar novo template de prateleira.
– O pré-requisito deste controle é que se tenha na página do produto o controle <vtex.cmc:navigationHistory/>.
<vtex:contentPlaceHolderid="ColecaoQVCT" /> Prateleira “Quem viu comprou também”
No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Quem_Viu_Comprou_Tambem” no campo Tipo.
– Criar novo template de prateleira.
– O pré-requisito deste controle é que se tenha na página do produto o controle <vtex.cmc:navigationHistory/>.
<vtex:contentPlaceHolderid="ColecaoQCCT" /> 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.
– Criar novo template de prateleira.
– Para funcionar de forma adequada a 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:contentPlaceHolderid="Similares" /> Produtos Similares
No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Produtos_Similares” no campo Tipo.
<vtex:contentPlaceHolderid="Acessorios" /> Acessórios
No portal, adicionar um controle do tipo “Produtos Relacionados”. Ao editar o elemento, selecionar “Acessorios” no campo Tipo.
<vtex:contentPlaceHolderid="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
<vtex.cmc:productRichSnippets /> Rich Snippets
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:

  • showGoogle, valores possiveis: { “1”, “true”, “on”, “sim” };
  • showFacebook, valores possiveis: { “1”, “true”, “on”, “sim” };
  • fbAdmins
  • fbAppId
  • Twitter, o valor deve ser a conta do Twitter;
  • doNotshowPrice, valores possiveis: { “1”, “true”, “on”, “sim” };
  • googleRate, valores possiveis: { “1”, “true”, “on”, “sim” };

Exemplos de uso 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:productRichSnippetsshowFacebook="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 podem ser agrupadas:
<vtex.cmc:productRichSnippets showGoogle="1" Twitter="[TwitterAccount]" />

Controles para Páginas de Departamento, Categoria e Busca

Viewpart Descrição
<vtex.cmc:advancedSearchFilter/> Filtro de Busca Avançada
<vtex.cmc:singleDepartmentNavigator/> Menu de Departamento
Atributos da Tag:
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” 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).