"Bons artistas copiam, grandes artistas roubam." - Steve Jobs

Inspirado por pimoroni.com Eu queria implementar uma pesquisa semelhante na nossa loja virtual, buyzero.de Também. buyzero.de é actualmente alimentado por Shopify.

A pesquisa mostra os resultados à medida que você digita - na página principal, substituindo dinamicamente o conteúdo préviamente exibido. Muito legal, muito útil - e muito, muito rápido (graças a Algolia!)

Desde que lutei com a documentação disponível sobre a Algolia, e o seu serviço de bordo não foi muito útil, tive que descobrir as coisas sozinho, e através do Googling extensivo.

Este é um resumo da minha experiência na implementação da Algolia. Fi-lo num único dia, numa única sessão de cerca de 12 - 14 horas de codificação.

Preparação Sugerida: injeção de código de desenvolvimento em sua página

Sugiro a utilização da extensão Google Chrome Tampermonkey para injetar CSS e Javascript do seu disco rígido local enquanto você se desenvolve.

Para fazer isso, você tem que habilitar o acesso a arquivos para o Tampermonkey. Abrir:

chrome://extensions

Clique em Detalhes e mude "Permitir acesso a URLs de arquivos" em

Crie o seguinte novo script de usuário em Tampermonkey:

// ==UserScript====
// @nome Algolia-Inject
// @namespace https://pi3g.com/
// @versão 0.5
// @description injectar ficheiro local para testar Algolia!
// @author Maximilian Batz
// @grant GM_getResourceText
// @grant GM_addStyle
// @noframes
// @include https://buyzero.de/*
// @resource YOUR_CSS file://D:\algolia_jr.css
// @require file://D:\algolia_jr.js

// ===/UserScript====

var my_css = GM_getResourceText ("YOUR_CSS");
GM_addStyle(my_css);

Explicação:

• você tem que conceder o getResourceText e o addStyle para poder acessar e injetar o arquivo CSS
• noframes por não executar uma segunda vez nos frames que Shopify aparentemente carrega, e que também coincidiriam com o domínio
• incluir -> irá coincidir no buyzero.de. Você pode querer mudar essa linha
• recurso utilizado para importar arquivo CSS. Forneça o caminho ... no Linux ele pode ser file:///home/whatever/whatever - notar a tripla barra oblíqua para a frente
• exija - inclua seu arquivo javascript
• userscript: este é o userscript para adicionar o arquivo CSS

Adicionando o Código Algolia

Com a parte de "como se desenvolver" fora do caminho, aqui está o meu código como código de amostra num pequeno e agradável ficheiro ZIP.

Por favor, não copie pasta deste blog, pois não tenho certeza se o WordPress vai destruir a formatação do código ... use o .js no arquivo ZIP para copiar.

Por favor note que as dependências Algolia / arquivos JavaScript já foram instalados em nosso tema Shopify - instalando o plugin Algolia Shopify. Também a nossa datastore foi configurada, etc. O Algolia já estava (e ainda está) a servir resultados de pesquisa numa gota abaixo enquanto você digitava na caixa de pesquisa.

Eu acompanho-o através das partes importantes do código:

começamos aj_setup() uma vez que o documento esteja pronto, para injetar nossa nova funcionalidade de busca.

Por favor, note que eu uso aj para preender as minhas funções & id's para este script. Você pode usar o que quiser, não é exigido por Algolia.

O recipiente

em aj_setup() eu preparei um novo container para os resultados da busca (provavelmente seria melhor incluir isso diretamente no seu arquivo temático - para desenvolver isso foi mais fácil).

esta é a parte HTML da pesquisa

$(".main-content").before('<div id="aj-search-container" class="aj-main-content full-width"><div class="background"><div class="pattern"><div class="container"><div class="row"><div class="col-md-12"><div class="row"><div class="col-md-12 center-column content-without-background">'+
                         "
"+
                           "<h1>Suchresultate für: <span id='sc-query'></span></h1>" +
                           "
" +
                             "
" +
                             "
" +
                             "
" +
                             "
" +
                           "
" +
                           "
" +
                               "
" +
                               "
" +
                               "
" +
                           "</DIV" +
                       "
" +
                       '</div></div></div></div></div></div></div></div>'
                       );

• Eu dou-lhe a identificação entre recipientes de busca, ser capaz de mostrar / esconder todos os resultados do contentor de pesquisa
• a maioria dos div's, incluindo contentor são necessários para um estilo compatível com o nosso tema atual - use conforme necessário
• sc-query é usado para espelhar a pesquisa que o usuário digitou atualmente, para mostrar que o sistema atualiza os resultados dinamicamente em seu nome (há código para fazer isso - ler em)
• aj-right-container contém filtros para chegar às "facetas" da busca. O usuário pode escolher uma ou várias marcas para mostrar, categorias de produtos, e nós incluímos um filtro de preço
• aj-clear-all conterá um link para uma facetadura clara - para retornar todos os resultados que correspondam à consulta do usuário
• aj-left-container contém os resultados da pesquisa. aj-stats conterão estatísticas sobre a pesquisa (resultados da pesquisa + tempo gasto na pesquisa), aj-search-results conterão os resultados e aj-search-pagination conterá a paginação

O modelo de sucesso

mais uma vez, isto provavelmente iria directamente para a sua página em vez de ser injectado via Javascript.

    $(".main-content").before(''+
       '+

'          <div class="aj-hit">'+

'            <div class="aj-hit-image">'+

'              <a href="/pt/{{product_link}}/"><img src="{{image}}" alt="{{título}}"></a>'+

'            </div>'+

'            <div class="aj-hit-content">'+

'              <div class="aj-hit-title"><a href="/pt/{{product_link}}/">{{{{_highlightResultado.title.value}}}{{{variant_title}}}</a></div>'+
               '<p class="aj-hit-description">{{{{_highlightResult.body_html_safe.value}}}} &nbsp; <a href="/pt/{{product_link}}/">" mehr</a></p>'+
               '<p class="aj-hit-sku"><a href="/pt/{{product_link}}/">{{sku}}</a></p>'+

'              <div class="aj-hit-bottominfos">' +

'                <div class="aj-hit-price">{{preço}} €</div>' +

'                <div class="aj-hit-stock">auf Lager </div>'+


'                <div  class="aj-hit-link"><a href="/pt/{{product_link}}/">zur Produktseite</a></div>'+

'             </div>'+
             '</div>'+
             ">" +
           '</div>'+
         '+
     '');

Este modelo é inserido como "script". Esta é a forma recomendada pelos documentos da Algolia.

É usado para renderizar um resultado de pesquisa, ou hit.

Aqui, dentro aj-hit Já o fizemos:

• aj-hit-imagee {{{imagem}}} como espaços reservados para inserir os valores correctos mais tarde
• aj-hit-titleusando {{{{_highlightResult.title.value}}}} - Também ligo no {{{{variant_title}}} para fornecer um título completo para variações
• aj-hit-descriptionpara tornar a descrição do produto - {{{{_highlightResult.body_html_safe.value}}}}
• aj-hit-price para o {{{preço}} - não se esqueça de adicionar a sua moeda (ou adicioná-la modificando a variável passada para o modelo)
• aj-hit-stockpara mostrar o quanto {{{inventory_quantity}} temos
• aj-hit-link - finalmente, um link para a página do produto. {{link_do_produto}}

Tudo isto é bem (IMHO) com o meu ficheiro CSS. Styling está fora do escopo deste post do blog, consulte buyzero.de para alguma inspiração e depois codifique a sua.

Mais sobre {{{_highlightResultado.title.value}}}

Variáveis exibidas usando três colchetes não serão escapadas por Algolia para HTML. Isto é usado aqui, para permitir o destaque.

Algolia irá automaticamente colocar Tags para você ao redor das partes do título, etc. que foram combinadas no _aluzResultado variável. O usuário pode usar a na saída, para mostrar ao usuário porque o resultado da pesquisa é considerado relevante para sua pesquisa.

	
var search = instantsearch({
	  appId: 'YOUR_APP_ID',
	  apiKey: 'YOUR_API_KEY', // search only API key, no ADMIN key
	  indexName: 'shopify_buyzero_de_products',
	  urlSync: true,
	  searchParameters: {
		hitsPerPage: 10
	  },
	  searchFunction(my_helper){
		  point_both.ihelper = my_helper;
		  //search.helper.setQuery('Pi 3'); //sic!
		  //my_helper.search(); //sic!
		  
		  if(my_helper.state.query === '') {	
				return;
			}
		  my_helper.search();
	  } //end searchFunction
	});//end instantsearch setup