Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Para que serve o Controle Customizado?
Para que serve o Controle Customizado?

Em diversos projetos existe a necessidade de criar um banner, uma vitrine ou até mesmo um código HTML que será utilizado em várias páginas do site. Um exemplo é o banner de frete grátis e descontos, normalmente localizado no header, logo abaixo do menu.

Para evitar o trabalho de adicionar manualmente o mesmo conteúdo várias vezes em cada página, temos a área de Controles Customizados (Custom Elements).

Os controles customizados são muito úteis no desenvolvimento e facilitam a atualização do conteúdo. Podem ser usados em templates e subtemplates.

Criando um controle customizado

Para criar um controle customizado, acesse o Admin e entre no menu Storefront. Clique em Layout, depois na pasta CMS e em Custom Elements.

Dentro da área de Controles Customizados, podemos criar até quatro tipos de características para personalizar cada tag.

Os tipos são:

  • Banner
  • BannerDHTML
  • Coleção
  • HTML

Para criar uma tag personalizada de controle customizado, basta clicar em Add e cadastrar um nome e uma tag, e então selecionar o tipo.

{"base64":"  ","img":{"width":1176,"height":635,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":50410,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/para-que-serve-o-controle-customizado_1.png"}}

Atenção: não crie um controle do tipo HTML com um elemento title. Isso pode interferir no funcionamento correto da sua loja.

Aplicando um controle customizado a um template de página

A aplicação da tag de um controle customizado é semelhante ao uso de outros elementos como controles normais e subtemplates. A tag deve ser colocada no local onde queremos que o conteúdo seja carregado.

Para identificar o controle customizado a ser usado, inserimos o nome da tag cadastrada na sintaxe do controle.

Abaixo, seguem as sintaxes para cada tipo de controle:

  1. Tipo Banner: <vtex:nomedatag />
  2. Tipo HTML: <vtex.cmc:nomedatag />
  3. Tipo Coleção: <vtex.cmc:nomedatag />
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback