Blog na vitrine

Depois de estruturar o blog no Olist Ecommerce Conteúdo, precisamos acessar a coleção do Olist Ecommerce 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 Olist Ecommerce Conteúdo na vitrine da loja:

• Gere a chave de acesso da API do Olist Ecommerce Conteúdo: para gerar o acesso do front-end nos conteúdos inseridos no Olist Ecommerce 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 Olist Ecommerce Conteúdo.

Acesso na API Olist Ecommerce Conteúdo

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

1. Acesse o Admin;
2. Clique em Olist Ecommerce Conteúdo no menu lateral esquerdo;
3. Faça o login com seu username e password na página de acesso do Olist Ecommerce 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 Olist Ecommerce 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.