No Interago, a extensão Catálogo (atalho #extensionEditor.panel?5) permite criar informações extras para cada produto. A seção ➕ Campos (#extensionEditor.panel?5?filter) é onde você define quais campos existem no site. Por exemplo “Garantia”, “Vídeo de uso” ou “Ficha técnica”. Depois, ao editar um produto, você só preenche esses campos.
O que é: um par nome + valor, como uma etiqueta na ficha do produto. Serve muito bem para textos curtos e organizados (material, voltagem, prazo de garantia em uma linha, etc.).
Como você usa no dia a dia: ao editar o produto, esses campos aparecem na área “Campos para filtros personalizados”, com dois campos por definição: um para o nome (rótulo) e outro para o valor. Ao focar no campo, o sistema pode sugerir valores já usados em outros produtos, ajudando a manter tudo padronizado. Depois de alterar, use o botão para aplicar as mudanças.
Em uma frase: Simples é o tipo mais direto. Pense em “rótulo e conteúdo” sem formatação especial.
O que é: um bloco de texto com formatação rica: parágrafos, negrito, listas, links, etc. Como um mini editor de página.
Como você usa: na edição do produto, campos desse tipo ficam na seção de edição avançada (cartões com ícone de texto). Ao clicar, abre-se um editor em que você monta o conteúdo visualmente.
Em uma frase: use Editor quando a descrição precisa de estrutura e estilo, não só uma linha de texto.
O que é: uma sequência de mídias ligada àquele campo. Em geral imagens e também pode incluir vídeos (por exemplo do YouTube), conforme o que o layout do site estiver preparado para exibir.
Como você usa: na edição do produto, esse tipo aparece junto dos outros avançados, com ícone de imagem. Você adiciona ou ordena as mídias daquele campo específico.
Em uma frase: Galeria é para quando o conteúdo é visual e pode ter vários arquivos ou vídeos, não um único texto.
O que é: conteúdo em HTML, ou seja, marcação de página com tags (<div>, <section>, classes, etc.). Oferece liberdade total na estrutura, mas exige mais cuidado: um erro de sintaxe pode afetar a página.
Como você usa: também na área de edição avançada do produto, com ícone de código. Abre-se um editor adequado para HTML.
Em uma frase: reserve HTML para blocos muito específicos ou integrações que o Editor não cubra ou quando quem mantém o site domina HTML.
Importante: criar o campo em ➕ Campos só define o “tipo de informação”. Para o visitante ver isso na página do produto, o layout do catálogo precisa exibir esse dado, isso é tema da Parte 2.
No template/script, você lê tudo por productFiltersByIdJson:
<script> const filtersById = JSON.parse('{{productFiltersByIdJson}}');</script>
Retorno esperado em filtersById['1430']: string JSON com:
<script> const rawSimple = filtersById['1430']; // ex: '{"filterKey":"Cor","filterValue":"Azul",...}' let simple = null; try { simple = JSON.parse(rawSimple); } catch(e) {} if (simple) { console.log(simple.filterKey, simple.filterValue, simple.filterSearchKey, simple.filterSearchValue); }</script>
Retorno esperado em filtersById['1431']: string HTML (ou '')
<div id="richTextFilterBox"></div><script> const richHtml = filtersById['1431'] || ''; document.getElementById('richTextFilterBox').innerHTML = richHtml;</script>
Retorno esperado em filtersById['1432']: array de strings JSON, cada item com:
<script> const mediaRows = Array.isArray(filtersById['1432']) ? filtersById['1432'] : []; const mediaList = mediaRows .map((row) => { try { return JSON.parse(row); } catch(e) { return null; } }) .filter(Boolean); mediaList.forEach((m) => { console.log(m.productmediasUrl, m.productmediasType); });</script>
Retorno esperado em filtersById['1433']: string HTML (ou '')
<div id="htmlFilterBox"></div><script> const htmlFilter = filtersById['1433'] || ''; document.getElementById('htmlFilterBox').innerHTML = htmlFilter;</script>
