"I buoni artisti copiano, i grandi artisti rubano". - Steve Jobs

Ispirato da pimoroni.com Volevo implementare una ricerca simile sul nostro webshop, buyzero.de buyzero.de è attualmente alimentato da Shopify.

La ricerca mostra i risultati mentre si digita - nella pagina principale, sostituendo dinamicamente il contenuto precedentemente visualizzato. Molto bello, molto utile - e molto, molto veloce (grazie a Algolia!)

Dal momento che ho lottato con la documentazione disponibile su Algolia, e il loro servizio di onboarding non è stato molto utile, ho dovuto capire le cose da solo, e con una vasta ricerca su Google.

Questo è un riassunto della mia esperienza nell'implementazione di Algolia. L'ho fatto in un solo giorno, in una sola sessione di circa 12 - 14 ore di codifica.

Preparazione suggerita: iniezione di codice di sviluppo nella tua pagina

Suggerisco di usare l'estensione di Google Chrome Tampermonkey per iniettare CSS e Javascript dal tuo hard disk locale mentre sviluppi.

Per fare questo, devi abilitare l'accesso ai file per Tampermonkey. Aprire:

chrome://extensions

Clicca su Dettagli e attiva "Consenti l'accesso agli URL dei file" su

Crea il seguente nuovo userscript in Tampermonkey:

// ==UserScript==
// @nome Algolia-Inject
// @namespace https://pi3g.com/
// @versione 0.5
// @description inietta un file locale per testare Algolia!
// @autore Maximilian Batz
// @concessione 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);

Spiegazione:

• dovete concedere getResourceText e addStyle per poter accedere e iniettare il file CSS
• noframes per non eseguire una seconda volta nei frame che Shopify apparentemente carica, e che corrisponderebbe anche al dominio
• include -> corrisponderà a buyzero.de. Potresti voler cambiare quella linea
• risorsa usata per importare il file CSS. Fornisci il percorso ... in Linux potrebbe essere file:///home/whatever/whatever - notare la tripla barra in avanti
• require - includi il tuo file javascript
• userscript: questo è l'userscript per aggiungere il file CSS

Aggiungere il codice Algolia

Con il "come sviluppare" fuori dai piedi, ecco il mio codice come codice d'esempio in un piccolo file ZIP.

Per favore non copiate da questo blog, perché non sono sicuro che WordPress distruggerà la formattazione del codice ... usate il .js nel file ZIP per copiarlo.

Si prega di notare che le dipendenze Algolia / file JavaScript erano già installati nel nostro tema Shopify - installando il plugin Algolia Shopify. Anche il nostro datastore era impostato, ecc. Algolia serviva (e serve ancora) già i risultati della ricerca in un menu a tendina mentre si digitava nella casella di ricerca.

Vi guiderò attraverso le parti importanti del codice:

avviamo aj_setup() una volta che il documento è pronto, per iniettare la nostra nuova funzionalità di ricerca.

Si prega di notare che io uso aj per aggiungere le mie funzioni e gli id per questo script. Potete usare quello che volete, non è richiesto da Algolia.

Il contenitore

in aj_setup() ho impostato un nuovo contenitore in cui mettere i risultati della ricerca (sarebbe probabilmente una pratica migliore includere questo direttamente nel file del tema - per lo sviluppo è stato più facile).

questa è la parte HTML della ricerca

$(".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>Tali risultati sono stati ottenuti per: <span id='sc-query'></span></h1>" +
                           "
" +
                             "
" +
                             "
" +
                             "
" +
                             "
" +
                           "
" +
                           "
" +
                               "
" +
                               "
" +
                               "
" +
                           "</DIV" +
                       "
" +
                       '</div></div></div></div></div></div></div></div>'
                       );

• Gli do l'ID aj-search-container, essere in grado di mostrare/nascondere l'intero contenitore dei risultati della ricerca
• la maggior parte dei div, tra cui contenitore sono necessari per uno stile compatibile con il nostro tema attuale - utilizzare come necessario
• sc-query è usato per rispecchiare la ricerca che l'utente ha attualmente inserito, per mostrare che il sistema aggiorna dinamicamente i risultati per suo conto (c'è del codice per farlo - continua a leggere)
• aj-right-container contiene dei filtri per ottenere delle "sfaccettature" della ricerca. L'utente può scegliere una o più marche da mostrare, categorie di prodotti, e noi includiamo un filtro di prezzo
• aj-clear-all conterrà un link per cancellare la sfaccettatura - per restituire tutti i risultati che corrispondono alla query dell'utente
• aj-left-container contiene i risultati della ricerca. aj-stats conterrà le statistiche sulla ricerca (risultati della ricerca + tempo impiegato per la ricerca), aj-search-results conterrà i risultati, e aj-search-pagination conterrà la paginazione

Il modello di colpo

Di nuovo, questo andrebbe probabilmente direttamente nella tua pagina invece di essere iniettato tramite Javascript.

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

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

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

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

'            </div>'+

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

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

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

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

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


'                <div  class="aj-hit-link"><a href="/it/{{product_link}}/">per il sito di produzione</a></div>'+

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

Questo modello è inserito come "script". Questo è il modo raccomandato dai documenti di Algolia.

È usato per rendere un risultato di ricerca, o hit.

Qui, dentro aj-hit abbiamo:

• aj-hit-imageusando {{prodotto_link}} e {{immagine}} come segnaposto per inserire i valori corretti in seguito
• aj-hit-titleusando {{{_highlightResult.title.value}} - mi collego anche al {{variant_title}} per fornire un titolo completo per le variazioni
• aj-hit-descriptionper rendere la descrizione del prodotto - {{{_highlightResult.body_html_safe.value}}}
• aj-hit-price per il {{prezzo}} - non dimenticare di aggiungere la tua valuta (o aggiungerla modificando la variabile passata al modello)
• aj-hit-stockper mostrare quanto {{inventario_quantità}} abbiamo
• aj-hit-link - infine, un link alla pagina del prodotto. {{link_prodotto}}

Tutto questo è ben (IMHO) stilizzato con il mio file CSS. Lo styling è al di fuori dello scopo di questo blogpost, fate riferimento a buyzero.de per un po' di ispirazione e poi codificate il vostro.

Più su {{{_highlightResult.title.value}}

Le variabili visualizzate utilizzando tre parentesi graffe non saranno sottoposte a escape da Algolia per HTML. Questo è usato qui, per permettere l'evidenziazione.

Algolia metterà automaticamente i tag intorno alle parti del titolo, ecc. che sono state abbinate nel _highlightResultato variabile. Potete usare la variabile nell'output, per mostrare all'utente perché il risultato della ricerca è ritenuto pertinente alla sua ricerca.

	
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