
Como utilizar o Multi-Reference no Framer
Desde quando comecei a utilizar o Framer que penso sobre CMS: como criar um blog dinâmico nessa plataforma? Será que ela poderia substituir a tradicional integração (com o site principal) do WordPress como CMS Headless?
Bom, um tempo de experiência depois, e também com algumas novas atualizações, a resposta é, sem dúvida, que sim. E uma atualização que fez total diferença sobre como podemos criar conteúdo dinâmico foi a feature de Collection Reference e Multi-Reference.
Isso aqui muda tudo.
Como eu acabei quebrando a cabeça durante um bom tempo sobre qual é o funcionamento perfeito, principalmente pela falta de tutoriais claros na web, acho que vale a documentação em espécie de tutorial para ajudar quem está na jornada do no-coding.
Breve resumo:
CMS Collection References, no Framer, é a integração dos itens entre diferentes coleções do CMS.
Basicamente ele conecta os itens de uma coleção na outra, tipo vincular um banco de dados de autores com o banco de dados de categorias, que estão relacionados a cada postagem.
Nesse caso aqui, eu tenho uma coleção de categorias, uma de autores, e a de postagens.
E qual a vantagem? Você pode gerenciar e automatizar todo o conteúdo relacionado em um só lugar.
Isso significa que, depois que a estrutura está completa, o usuário do blog pode editar todo o conteúdo apenas pelo painel de CMS, preenchendo apenas campos. Fica fácil de adicionar uma nova categoria a um artigo antigo, sem ter que tocar em nada do design ou do código.
Mas filtrar as coisas ainda é meio confuso, o que conecta no que, como usar a conversão de variantes, etc.
Eu perdi um bom tempo tentando entender como funciona esse referenciamento e acho que vale o registro e compartilhamento do aprendizado.
Vou explicar como faço para construir um blog interativo utilizando este de exemplo, focando no display de múltiplas categorias, habilitar filtros e relacionar os bancos de dados.
Relacionando banco de dados e componentes:
Inicialmente criei as coleções que vou utilizar, e cada item da coleção será uma tag de categoria

Na coleção dos posts, um dos campos é o "multi-reference", onde você pode selecionar qual será a coleção de referência

Assim, para cada novo item da coleção de artigos que eu criar, vou poder inserir os itens da coleção "categorias" no campo tags

Agora no front:
Criei um componente com variantes de texto e cor para cada tag fazendo referência aos itens criados no CMS.
A ideia é que a variante seja selecionada automaticamente de acordo com a adição ou remoção das categorias aos posts

E agora eu posso utilizar as tags em qualquer lugar.
Nesse caso, vou utilizar na página do post, em cima da imagem inicial de cada artigo, e também na home do blog, em cada minatura de post.
Para posicionar o componente na página, você precisa inserir a coleção de referência antes, e nesse caso, tornar o componente o Collection Item (ou seja, o componente vai estar dentro do agrupamento da coleção)


Feito isso, vamos filtrar:
O lance aqui é selecionar a propriedade "is included in" e relacionar no campo value o multi-reference das tags

Agora, no componente das tags, estará habilitada a opção de transform no campo das variantes. Aqui a gente seta o campo principal (o que contém o nome das categorias) como a variável e seleciona a função convert, e aí é só correlacionar os conjuntos (quando for [x texto], utilizar a [x tag])

Observações finais
Dessa forma, as coleções devem estar bem integradas.
O que me consumiu muito tempo foi entender quais funções de filtro utilizar, e uma coisa muito importante:
Sempre que for referenciar algo de um CMS, é necessário inserir o agrupamento da coleção em que as informações estão contidas.
No exemplo acima a coleção foi inserida diretamente na página de CMS (do artigo). Mas se fizéssemos dentro de um componente, a coleção deve ser referenciada lá dentro, e os filtros propriamente configurados, exatamente como mostrado anteriormente

Gostou do conteúdo? Me segue aí porque em breve vem mais (: