Integração Algolia para post

Para integrar os produtos da sua loja com o Algolia, você precisa criar um Index para os posts do blog:

1. Acesse sua conta Algolia;
2. Clique no ícone Search no menu esquerdo;
3. Clique Creat Index;
4. Preencha o campo com posts. Você deve preencher esse campo com o mesmo nome da coleção criada durante a estruturação do Olist Conteúdo. Caso a sua coleção não esteja nomeada com posts, preencha esse campo exatamente como na sua estrutura do Olist conteúdo.
5. Clique em Creat.

Criação de index para post

Para saber mais sobre o gerenciamento de Index no Algolia, confira Creating a new index.

Depois de criar o index para os posts do blog, você precisa fazer um ajuste no Olist Conteúdo.

1. Acesse o Admin da Olist Ecommerce;
2. Clique em Olist Conteúdo no menu lateral esquerdo;
3. Faça o login com seu username e password na página de acesso.
4. Clique em Settings no menu superior;
5. Clique em Settings novamente;
6. No código da página procure o bloco detektivo e comente as linhas desse bloco. Veja como deve ficar no código e animação a seguir

#    'detektivo' => [
#        'engine' => 'algolia',
#        'app_id' => '',
#        'api_key'=> '',
#        'collections' => [
#            'posts' => ['title', 'fullbanner', 'authorphoto', 'thumb', 'subtitle', 'authorpost', 'description', 'section', 'permalink', 'publish', 'gallery', 'translatedpost', 'title_slug', 'url', 'excerpt', 'content']
#        ]
#    ],

Comentando o bloco detektivo

O próximo passo é alterar o front-end da vitrine a busca dos posts:

1. Acesse pasta do projeto no seu editor de código;
2. Acesse o diretório assets > javascripts > store.js.
3. Inclua o código abaixo no arquivo store.js:

      const $postsWrapper = document.querySelector('[data-posts-search-result]')
      const $searchForm = document.querySelector('[data-blog-search]')

      $searchForm.onsubmit = event => {
        event.preventDefault()
        const keyword = $searchForm.querySelector('.input').value

        searchClient.initIndex('Blog').search(keyword)
          .then(response => template_store.buildPosts(response, $postsWrapper))
          .then($posts => {
            $postsWrapper.querySelectorAll(':not(.no-results)').forEach(el => el.remove())

            if ($posts.length) {
              $posts.forEach(post => $postsWrapper.appendChild(post))
              $postsWrapper.querySelector('.no-results').classList.remove('visible')
            } else {
              $postsWrapper.querySelector('.no-results').classList.add('visible')
            }

            if (document.querySelector('.pagination')) {
              document.querySelector('.pagination').remove()
            }

            window.scrollTo(0, 300)
          })
      }
    },

   buildPosts: function(response, $postsWrapper) {
      const baseURL = $postsWrapper.getAttribute('data-home-blog-url')

      const posts = response.hits.map(post => {
        return `<div class="post-block">
          <a href="${baseURL}/${post.objectID}">
            <div class="image">
              <figure>
                <img
                  src="${post.attachment_url.path}"
                  alt="Imagem de capa do post: ${post.attachment_url.meta.title}"
                />
              </figure>
              ${ post.category && `<div class="tag">${post.category}</div>` }
            </div>
            <div class="description">
              <div class="title">${post.title}</div>
              <div class="details">
                <div class="team">${post.creator}</div>
                <div class="date">${post.post_date_gmt.split('-').reverse().join('.')}</div>
              </div>
              <div class="resume">${post.seo_description.slice(0, 130).concat('...')}</div>
            </div>
          </a>
        </div>`
      })

      const $posts = new DOMParser()
        .parseFromString(posts, 'text/html')
        .querySelectorAll('div.post-block')

      return $posts
    },
    blog: {
      init: function () {
        const _this = this;

        template_store.searchBlogPosts()
      },
    },
    post: {
      init: function () {
        const _this = this;

        template_store.searchBlogPosts()
      },

👍

Os posts do blog da loja estão integrados com o Algolia.