"Goede artiesten kopiëren, grote artiesten stelen." - Steve Jobs

Geïnspireerd door pimoroni.com Ik wilde een soortgelijke zoekopdracht implementeren op onze webshop, buyzero.de ook. buyzero.de wordt momenteel aangedreven door Shopify.

De zoekopdracht toont resultaten terwijl je typt - in de hoofdpagina, dynamisch vervangen van de eerder getoonde inhoud. Erg cool, erg nuttig - en erg, erg snel (dankzij Algolia!)

Aangezien ik moeite had met de beschikbare documentatie over Algolia, en hun onboarding service niet erg behulpzaam was, heb ik zelf dingen moeten uitzoeken, en door uitgebreid te Googlen.

Dit is een samenvatting van mijn ervaring met het implementeren van Algolia. Ik deed het in één dag, in een enkele sessie van ongeveer 12 - 14 uur coderen.

Voorgestelde voorbereiding: injectie van ontwikkelingscode in uw pagina

Ik stel voor om de Google Chrome extensie te gebruiken Tampermonkey voor het injecteren van CSS en Javascript van je lokale harde schijf terwijl je ontwikkelt.

Om dit te doen, moet je bestandstoegang voor Tampermonkey inschakelen. Open:

chrome://extensions

Klik op Details en schakel "Toegang tot bestands-URL's toestaan" aan

Maak het volgende nieuwe gebruikerscript in Tampermonkey:

// ==UserScript==
// @name Algolia-Inject
// @namespace https://pi3g.com/
// @versie 0.5
// @description injecteer een lokaal bestand om Algolia te testen!
// @auteur 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);

Uitleg:

• moet je getResourceText en addStyle toekennen om het CSS bestand te kunnen openen en injecteren
• noframes voor het niet een tweede keer uitvoeren in de frames die Shopify blijkbaar laadt, en die ook zou overeenkomen met het domein
• include -> zal overeenkomen op buyzero.de. Je zou die regel kunnen veranderen
• bron gebruikt voor het importeren van CSS bestand. Geef het pad ... in Linux kan dat zijn file:///home/whatever/whatever - let op de drievoudige voorwaartse schuine streep
• require - neem je javascript bestand op
• userscript: dit is het userscript om het CSS bestand toe te voegen

De Algolia-code toevoegen

Met het "hoe te ontwikkelen" gedeelte uit de weg, hier is mijn code als voorbeeldcode in een mooi klein ZIP-bestand.

Gelieve niet te kopiëren plakken van deze blog, omdat ik niet zeker ben, of WordPress zal vernietigen de opmaak van de code ... gebruik de .js in het ZIP-bestand om te kopiëren van.

Houd er rekening mee dat de Algolia afhankelijkheden / JavaScript-bestanden al waren geïnstalleerd in ons Shopify-thema - door het installeren van de Algolia Shopify plugin. Ook onze datastore was opgezet, enz. Algolia bood (en biedt nog steeds) al zoekresultaten in een dropdown terwijl u in het zoekvak typt.

Ik zal je door de belangrijke delen van de code leiden:

we starten aj_setup() zodra het document klaar is, om onze nieuwe zoekfunctionaliteit te injecteren.

Merk op dat ik aj gebruik om mijn functies en id's voor dit script te preppen. U mag alles gebruiken wat u wilt, het is niet vereist door Algolia.

De container

in aj_setup() stel ik een nieuwe container in voor de zoekresultaten (het zou waarschijnlijk beter zijn om dit rechtstreeks in je thema-bestand op te nemen - voor het ontwikkelen was dit eenvoudiger).

dit is het HTML-gedeelte van de zoekopdracht

$(".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>Dergelijk resultaat voor: <span id='sc-query'></span></h1>" +
                           "
" +
                             "
" +
                             "
" +
                             "
" +
                             "
" +
                           "
" +
                           "
" +
                               "
" +
                               "
" +
                               "
" +
                           "</DIV" +
                       "
" +
                       '</div></div></div></div></div></div></div></div>'
                       );

• Ik geef het de ID aj-zoek-container, om de volledige resultaten van de zoekcontainer te kunnen tonen/verbergen
• de meeste van de div's, inclusief container zijn nodig voor compatibele styling met ons huidige thema - gebruik waar nodig
• sc-query wordt gebruikt om de zoekopdracht te spiegelen die de gebruiker op dat moment heeft ingevoerd, om te laten zien dat het systeem de resultaten dynamisch namens hem bijwerkt (er is code om dit te doen - lees verder)
• aj-rechts-container bevat filters om de "facetten" van de zoekopdracht te bereiken. De gebruiker kan één of meerdere merken kiezen om te tonen, productcategorieën, en we voegen een prijsfilter toe
• aj-clear-all zal een link bevatten om facetting op te heffen - om alle resultaten terug te geven die overeenkomen met de zoekopdracht van de gebruiker
• aj-links-container bevat de zoekresultaten. aj-stats bevat de statistieken over de zoekopdracht (zoekresultaten + zoektijd), aj-search-results bevat de resultaten, en aj-search-pagination bevat de paginering

Het treffersjabloon

nogmaals, dit zou waarschijnlijk direct in uw pagina gaan in plaats van te worden geïnjecteerd via Javascript.

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

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

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

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

'            </div>'+

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

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

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

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

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


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

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

Dit sjabloon wordt ingevoegd als "script". Dit is de aanbevolen manier door de Algolia docs.

Het wordt gebruikt om een zoekresultaat, of treffer, weer te geven.

Hier, binnen aj-hit hebben we:

• aj-hit-image, met {{product_link}} en {{image}} als plaatshouders om later de juiste waarden in te voegen
• aj-hit-title, met behulp van {{_highlightResult.title.value}} - Ik link ook in de {{variant_title}} om een volledige titel voor variaties te geven
• aj-hit-beschrijving, om de productbeschrijving weer te geven - {{_highlightResult.body_html_safe.value}}
• aj-hit-prijs voor de {{prijs}} - vergeet niet uw munteenheid toe te voegen (of voeg ze toe door de variabele te wijzigen die aan de template wordt doorgegeven)
• aj-hit-voorraadom te laten zien hoeveel {{inventory_quantity}} we hebben
• aj-hit-link - tenslotte, een link naar de productpagina. {{product_link}}

Dit alles is mooi (IMHO) gestyled met mijn CSS bestand. Styling valt buiten het bestek van deze blogpost, verwijs naar buyzero.de voor wat inspiratie en codeer dan je eigen.

Meer over {{_highlightResult.title.value}}

Variabelen die met drie gekrulde haakjes worden weergegeven, worden door Algolia voor HTML niet geëscaped. Dit wordt hier gebruikt, om de markering mogelijk te maken.

Algolia zal automatisch Tags voor u plaatsen rond de delen van de titel, enz. die overeenkwamen in de _highlightResult variabele. U kunt de in de uitvoer gebruiken, om de gebruiker te laten zien waarom het zoekresultaat relevant wordt geacht voor zijn zoekopdracht.

	
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