Controle customizado HTML

Um controle customizado é utilizado normalmente para inserir um conteúdo que pode se repetir em várias páginas e para não ter de editar o conteúdo diversas vezes esse controle se torna a melhor opção.

Dependendo de como seu layout estiver programado alguns controles customizados já estarão criados e basta você editar com suas informações. Os mais comuns que poderão estar na sua loja são:

Endereço de e-mail - emailAdress
SLA de E-mail - emailSla
Telefone de Contato - phoneNumber
Horário de atendimento - workingTime
Informação Legal (CNPJ) - legalInformation
Copyright - copyRight
Amazing Menu - qdAmazingMenu
Texto do rodapé - footerText
Menu lateral de páginas institucionais - institucionalSideMenu (é criado com a mesma estrutura do amazing menu, reaproveite a estrutura e use a ferramenta da quatro digital)
Links do rodapé - footerLinksList (é criado com a mesma estrutura do amazing menu, reaproveite a estrutura e use a ferramenta da quatro digital)
Texto de introdução da captação de e-mail - newsletterText

Editando um controle customizado

1. Para editar esse conteúdo basta acessar o admin do portal da sua loja em CMS > Customs Elements e você pode pesquisar pelo controle desejado no ícone de busca e digitar.

Ao encontrar basta clicar em cima do controle e assim que o mesmo estiver com fundo azul clique em "Update" na barra de ferramentas acima da lista. Veja na imagem abaixo.

2. Dentro da área determinada como "Content" procure o ícone de lápis a esquerda dos objetos já cadastrados para editar o conteúdo interno desse controle customizado.

3. Ao clicar uma janela irá se abrir e dentro de "HTML" o conteúdo com o texto desse controle irá aparecer para ser editado.

4. Verifique sempre se o campo "Active Content" está ativado para que o conteúdo realmente esteja aparecendo em sua loja.

Criando um controle customizado

Caso precise criar um controle customizado para sua loja basta acessar o admin do portal da sua loja em CMS > Customs Elements e clicar em "Add" na caixa de ferramentas acima da lista de controles.

1. Preencha todos os campos que são necessários para inserir o conteúdo do controle customizado:

Name: O nome para seu controle customizado
Tag Name: O nome que irá utilizar para chamar o controle customizado em seu HTML junto ao controle da VTEX.

Ex.: <vtex.cmc:institucionalSideMenu />, no lugar de "institucionalSideMenu" insira o que escreveu

Type: O tipo do controle customizado que irá criar, nesse caso é o tipo HTML.

2. O próximo passo é clicar em "add object" no canto esquerdo da tela e preencha os campos que são necessários:

Content Name: Nome para o conteúdo que será inserido
HTML: É o conteúdo que será exibido ao chamar o controle customizado
Marque a opção Active Content para que o conteúdo sempre apareça em sua loja