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.
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:
- Tipo Banner:
<vtex:nomedatag /> - Tipo HTML:
<vtex.cmc:nomedatag /> - Tipo Coleção:
<vtex.cmc:nomedatag />