Blog na vitrine

Depois de estruturar o blog no Vnda Conteúdo, precisamos acessar a coleção do Vnda Conteúdo no front-end da loja. Iremos acessar e incluir esse arquivos em uma seção específica para o blog. Será com os arquivos dessa seção que você poderá definir a exibição dos conteúdos de blog. Para acessar e incluir o conteúdo do Vnda Conteúdo na vitrine da loja:

• Gere a chave de acesso da API do Vnda Conteúdo: para gerar o acesso do front-end nos conteúdos inseridos no Vnda Conteúdo.
• Crie diretórios para o blog: para armazenar e organizar os arquivos que irão compor as páginas do blog na vitrine.
• Utilize a tag load_media para acessar os conteúdos do Vnda Conteúdo.

Acesso na API Vnda Conteúdo

Você precisa possibilitar que o front end possa acessar o conteúdo do Vnda Conteúdo. Para isso você deve gerar uma chave de API do Vnda Conteúdo e utilizá-la no liquid da loja. Para gerar a chave:

1. Acesse o Admin;
2. Clique em Vnda Conteúdo no menu lateral esquerdo;
3. Faça o login com seu username e password na página de acesso do Vnda Conteúdo;
4. Clique no logo de Cockipt no canto superior esquerdo da página;
5. Clique em Settings;
6. Clique em API Access;
7. Clique no ícone azul Gerar Token;
8. Copie a chave gerada.

Salve esta chave para utilizar nos arquivos liquid da loja. Nas chamadas da tag que carregam os posts, há o campo api_key que vai precisar dessa informação

Diretórios de blog

A estrutura comum para blog que desenvolvemos já disponibiliza os arquivos prontos e com instruções de onde colocá-los. Para simplificar, os passos mínimos para exibir posts do cockpit no frontend da loja são:

1. Crie uma pasta de arquivos chamada media;
2. Crie um arquivo chamado blog.liquid;
3. Crie um arquivo chamado blog_post.liquid.

Esta estrutura de nomes é muito importante!!

• Quando nomeamos um arquivo blog.liquiud dentro da pasta media, indicamos que a URL da loja https://nome_da_loja.vnda.dev/m/blog deve carregar as informações a partir desse arquivo liquid, que recebeu o mesmo nome da URL.
• O arquivo blog_post.liquid indica que as páginas internas dos posts dessa URL, https://nome_da_loja.vnda.dev/m/blog/url_gerada_automaticamente, deve montar a página interna do post usando este arquivo

Isso significa que, caso você precise criar uma segunda Collection, você também vai precisar definir uma nova URL de exibição, e a URL é ditada pelo nome dos arquivos que você colocou acima.

❗

Cuidados com os campos de URL do Cockpit

No Liquid, quando o cockpit retorna uma URL de post, ele vai retornar por padrão um caminho que contém /m/cockpit.

Como a URL de exibição é definida no frontend, pelo nome dos arquivos (conforme explicado acima), você precisa fazer o replace manual dessa informação, para que direcione para a URL correta.

No caso da estrutura comum, o replace já está definido de /m/cockpit para /m/blog, mas fique atento caso você prentede usar outra URL para exibição dos posts para esta ou outras Collections.

Tag load_media

A Vnda possui uma tag própria para listar e filtrar posts do blog: a tag load_media Essa tag permite acessar, filtrar, ordenar e percorrer os conteúdos do Cockpit.

Utilize a api_key gerada na etapa anterior.

{% load_media from: "cockpit" collection: "posts" api_key: "xxx" %

Conheça mais sobre a tag load_media.