"Les bons artistes copient, les grands artistes volent." - Steve Jobs

Inspiré par pimoroni.com Je voulais mettre en place une recherche similaire sur notre boutique en ligne, buyzero.de buyzero.de est actuellement géré par Shopify.

La recherche affiche les résultats au fur et à mesure que vous tapez - dans la page principale, remplaçant dynamiquement le contenu affiché précédemment. Très cool, très utile - et très, très rapide (merci à Algolia!)

Comme je me suis débattu avec la documentation disponible sur Algolia et que leur service d'accueil n'a pas été d'une grande aide, j'ai dû me débrouiller tout seul et faire de nombreuses recherches sur Google.

Voici un résumé de mon expérience de mise en œuvre d'Algolia. Je l'ai fait en un seul jour, en une seule session d'environ 12 à 14 heures de codage.

Préparation suggérée : injection de code de développement dans votre page

Je suggère d'utiliser l'extension Google Chrome Tampermonkey pour injecter du CSS et du Javascript depuis votre disque dur local pendant que vous développez.

Pour ce faire, vous devez activer l'accès aux fichiers pour Tampermonkey. Ouvrez :

chrome://extensions

Cliquez sur Détails et activez l'option "Autoriser l'accès aux URL des fichiers".

Créez le nouveau script utilisateur suivant dans Tampermonkey :

// ==UserScript==
// @name Algolia-Inject
// @namespace https://pi3g.com/
// Version 0.5
// @description injecter un fichier local pour tester 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) ;

Explication :

• vous devez accorder getResourceText et addStyle pour pouvoir accéder et injecter le fichier CSS
• noframes pour ne pas s'exécuter une seconde fois dans les cadres que Shopify charge apparemment, et qui correspondrait également au domaine
• include -> correspondra à buyzero.de. Vous pourriez vouloir changer cette ligne
• ressource utilisée pour importer le fichier CSS. Indiquez le chemin d'accès ... sous Linux, ce pourrait être file:///home/whatever/whatever - remarquez la triple barre oblique
• require - inclure votre fichier javascript
• userscript : c'est le userscript pour ajouter le fichier CSS

Ajout du code Algolia

Maintenant que la partie "comment développer" est réglée, voici mon code en tant qu'exemple de code dans un joli petit fichier ZIP.

Veuillez ne pas faire de copier-coller à partir de ce blog, car je ne suis pas sûr que WordPress détruira le formatage du code ... utilisez le .js dans le fichier ZIP pour copier.

Veuillez noter que les dépendances Algolia / les fichiers JavaScript étaient déjà installés dans notre thème Shopify - en installant le plugin Algolia Shopify. Notre datastore était également configuré, etc. Algolia proposait déjà (et propose toujours) des résultats de recherche dans une liste déroulante lorsque vous tapez dans le champ de recherche.

Je vais vous guider à travers les parties importantes du code :

nous lançons aj_setup() une fois que le document est prêt, pour injecter notre nouvelle fonctionnalité de recherche.

Veuillez noter que j'utilise aj pour précéder mes fonctions et id's pour ce script. Vous pouvez utiliser ce que vous voulez, ce n'est pas requis par Algolia.

Le conteneur

Dans aj_setup(), j'ai créé un nouveau conteneur pour les résultats de la recherche (il serait probablement préférable d'inclure ceci directement dans votre fichier de thème - pour le développement, c'était plus facile).

Voici la partie HTML de la recherche

$(".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>Ces résultats sont pour : <span id='sc-query'></span></h1>" +
                           "
" +
                             "
" +
                             "
" +
                             "
" +
                             "
" +
                           "
" +
                           "
" +
                               "
" +
                               "
" +
                               "
" +
                           "</DIV" +
                       "
" +
                       '</div></div></div></div></div></div></div></div>'
                       );

• Je lui donne l'identité aj-search-container, pouvoir afficher / masquer l'ensemble des résultats du conteneur de recherche
• la plupart des div's, dont conteneur sont nécessaires pour un style compatible avec notre thème actuel - utilisez-les si nécessaire.
• sc-query est utilisé pour refléter la recherche que l'utilisateur est en train de saisir, afin de montrer que le système met à jour les résultats de manière dynamique en son nom (il y a du code pour faire cela - lisez la suite).
• aj-right-container contient des filtres pour obtenir des "facettes" de la recherche. L'utilisateur peut choisir une ou plusieurs marques à afficher, des catégories de produits, et nous incluons un filtre de prix.
• aj-clear-all contiendra un lien pour effacer les facettes - pour retourner tous les résultats qui correspondent à la requête de l'utilisateur.
• aj-left-container contient les résultats de la recherche. aj-stats contient des statistiques sur la recherche (résultats de la recherche + temps de recherche), aj-search-results contient les résultats et aj-search-pagination contient la pagination.

Le modèle de frappe

Encore une fois, il est probable que cela soit intégré directement dans votre page au lieu d'être injecté via Javascript.

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

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

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

'              <a href="/fr/{{product_link}}/"><img src="{{image}}" alt="{titre}}"></a>'+

'            </div>'+

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

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

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

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

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


'                <div  class="aj-hit-link"><a href="/fr/{{product_link}}/">sur la page des produits</a></div>'+

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

Ce modèle est inséré comme "script". C'est la méthode recommandée par la documentation d'Algolia.

Il est utilisé pour rendre un résultat de recherche, ou hit.

Ici, à l'intérieur aj-hit nous avons :

• aj-hit-imageen utilisant {{lien_produit}} et {{image}} comme espaces réservés pour insérer les valeurs correctes ultérieurement.
• aj-hit-titleJ'utilise {{{_highlightResult.title.value}} - Je crée également un lien vers {{variant_title}} pour fournir un titre complet aux variantes.
• aj-hit-descriptionpour rendre la description du produit - {{{_highlightResult.body_html_safe.value}}}.
• aj-hit-price pour le {{prix}} - n'oubliez pas d'ajouter votre devise (ou de l'ajouter en modifiant la variable passée au modèle).
• aj-hit-stockpour montrer combien de {{inventory_quantity}} nous avons
• aj-hit-link - enfin, un lien vers la page du produit. {{lien_produit}}

Tout ceci est joliment (IMHO) stylé avec mon fichier CSS. Le stylisme n'entre pas dans le cadre de ce billet de blog. buyzero.de pour vous inspirer et coder le vôtre.

Plus sur {{{_highlightResult.title.value}}}

Les variables affichées à l'aide de trois accolades ne seront pas échappées par Algolia pour HTML. Ceci est utilisé ici, pour permettre la mise en évidence.

Algolia placera automatiquement des balises autour des parties du titre, etc. qui ont été trouvées dans la base de données. _highlightResult variable. Vous pouvez utiliser le dans la sortie, pour montrer à l'utilisateur pourquoi le résultat de la recherche est considéré comme pertinent pour sa recherche.

	
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