"Los buenos artistas copian, los grandes roban". - Steve Jobs

Inspirado por pimoroni.com Quería implementar una búsqueda similar en nuestra tienda web, buyzero.de buyzero.de está actualmente gestionado por Shopify.

La búsqueda muestra los resultados a medida que se escribe - en la página principal, sustituyendo dinámicamente el contenido previamente mostrado. Muy bueno, muy útil - y muy, muy rápido (gracias a Algolia!)

Como he tenido problemas con la documentación disponible sobre Algolia, y su servicio de incorporación no me ha ayudado mucho, he tenido que averiguar las cosas por mi cuenta, y buscando mucho en Google.

Este es un resumen de mi experiencia en la implementación de Algolia. Lo hice en un solo día, en una sola sesión de unas 12 - 14 horas de codificación.

Preparación sugerida: inyección de código de desarrollo en su página

Sugiero utilizar la extensión de Google Chrome Tampermonkey para inyectar CSS y Javascript desde su disco duro local mientras desarrolla.

Para ello, tiene que habilitar el acceso a los archivos para Tampermonkey. Abrir:

chrome://extensions

Haga clic en Detalles y active la opción "Permitir el acceso a las URL de los archivos".

Cree el siguiente usercript nuevo en Tampermonkey:

// ==UserScript==
// @nombre Algolia-Inject
// @namespace https://pi3g.com/
// @versión 0.5
// @description ¡inyectar archivo local para probar Algolia!
// @autor Maximilian Batz
// @grant GM_getResourceText
// @grant GM_addStyle
// @noframes
// @include https://buyzero.de/*
// @recurso 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);

Explicación:

• tienes que conceder getResourceText y addStyle para poder acceder e inyectar el archivo CSS
• noframes para no ejecutar una segunda vez en los marcos que aparentemente carga Shopify, y que además coincidiría con el dominio
• include -> coincidirá en buyzero.de. Es posible que desee cambiar esa línea
• recurso utilizado para importar el archivo CSS. Proporcione la ruta ... en Linux podría ser file:///home/whatever/whatever - fíjese en la triple barra diagonal
• require - incluye tu archivo javascript
• userscript: este es el userscript para añadir el archivo CSS

Añadir el código Algolia

Con la parte de "cómo desarrollar" fuera del camino, aquí está mi código de muestra en un pequeño archivo ZIP.

Por favor, no copie y pegue desde este blog, ya que no estoy seguro de si WordPress destruirá el formato del código... use el .js en el archivo ZIP para copiar.

Tenga en cuenta que las dependencias de Algolia / archivos JavaScript ya estaban instalados en nuestro tema de Shopify - mediante la instalación del plugin Algolia Shopify. También nuestro almacén de datos estaba configurado, etc. Algolia ya estaba (y sigue estando) sirviendo resultados de búsqueda en un desplegable mientras escribías en la caja de búsqueda.

Te guiaré a través de las partes importantes del código:

iniciamos aj_setup() una vez que el documento está listo, para inyectar nuestra nueva funcionalidad de búsqueda.

Por favor, tenga en cuenta que utilizo aj para preagregar mis funciones e id's para este script. Puedes usar lo que quieras, no es requerido por Algolia.

El contenedor

en aj_setup() configuré un nuevo contenedor para poner los resultados de la búsqueda (probablemente sería mejor práctica incluir esto directamente en su archivo de tema - para el desarrollo esto fue más fácil).

esta es la parte HTML de la búsqueda

$(".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>Talresultado für: <span id='sc-query'></span></h1>" +
                           "
" +
                             "
" +
                             "
" +
                             "
" +
                             "
" +
                           "
" +
                           "
" +
                               "
" +
                               "
" +
                               "
" +
                           "</DIV" +
                       "
" +
                       '</div></div></div></div></div></div></div></div>'
                       );

• Le doy la identificación aj-search-container, poder mostrar/ocultar todos los resultados del contenedor de búsqueda
• la mayoría de las divisiones, incluyendo contenedor son necesarios para que el estilo sea compatible con nuestro tema actual - utilícelos según sea necesario
• sc-query se utiliza para reflejar la búsqueda que el usuario ha introducido en ese momento, para mostrar que el sistema actualiza los resultados dinámicamente en su nombre (hay código para hacer esto - siga leyendo)
• aj-right-container contiene filtros para llegar a las "facetas" de la búsqueda. El usuario puede elegir una o varias marcas para mostrar, categorías de productos, e incluimos un filtro de precios
• aj-clear-all contendrá un enlace para borrar las facetas - para devolver todos los resultados que coincidan con la consulta del usuario
• aj-left-container contiene los resultados de la búsqueda. aj-stats contendrá las estadísticas sobre la búsqueda (resultados de la búsqueda + tiempo de búsqueda), aj-search-results contendrá los resultados, y aj-search-pagination contendrá la paginación

La plantilla de éxitos

de nuevo, esto probablemente iría directamente en su página en lugar de ser inyectado a través de Javascript.

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

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

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

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

'            </div>'+

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

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

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

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

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


'                <div  class="aj-hit-link"><a href="/es/{{product_link}}/">para la producción</a></div>'+

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

Esta plantilla se inserta como "script". Esta es la forma recomendada por los documentos de Algolia.

Se utiliza para obtener un resultado de búsqueda, o un acierto.

Aquí, en el interior aj-hit que tenemos:

• aj-hit-imageUtilizando {{product_link}} y {{image}} como marcadores de posición para insertar posteriormente los valores correctos
• aj-hit-titleTambién enlazo en el {{variant_title}} para proporcionar un título completo para las variaciones
• aj-hit-descriptionpara mostrar la descripción del producto - {{{_highlightResult.body_html_safe.value}}
• aj-hit-price para el {{precio}} - no olvides añadir tu moneda (o añadirla modificando la variable pasada a la plantilla)
• aj-hit-stockpara mostrar la cantidad de {{inventory_quantity}} que tenemos
• aj-hit-link - por último, un enlace a la página del producto. {{enlace_del_producto}}

Todo esto está muy bien (IMHO) estilizado con mi archivo CSS. El estilo está fuera del alcance de este blogpost, consulte buyzero.de para inspirarse y luego codificar el suyo propio.

Más sobre {{{highlightResult.title.value}}

Las variables que se muestren con tres corchetes no serán escapadas por Algolia for HTML. Esto se utiliza aquí, para permitir el resaltado.

Algolia pondrá automáticamente las etiquetas alrededor de las partes del título, etc., que hayan coincidido en el Resultado destacado variable. Puede utilizar la en la salida, para mostrar al usuario por qué se cree que el resultado de la búsqueda es relevante para su búsqueda.

	
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