"Gute Künstler kopieren, große Künstler stehlen." - Steve Jobs

Inspiriert durch pimoroni.de Ich wollte eine ähnliche Suche in unserem Webshop einführen, buyzero.de auch. buyzero.de wird derzeit von Shopify betrieben.

Die Suche zeigt Ergebnisse an, während Sie tippen - auf der Hauptseite, wobei der zuvor angezeigte Inhalt dynamisch ersetzt wird. Sehr cool, sehr nützlich - und sehr, sehr schnell (dank der Algolia!)

Da ich mit der verfügbaren Dokumentation über Algolia nicht zurechtkam und der Onboarding-Service nicht sehr hilfreich war, musste ich die Dinge selbst herausfinden und ausgiebig googeln.

Dies ist eine Zusammenfassung meiner Erfahrungen mit der Implementierung von Algolia. Ich habe es an einem einzigen Tag gemacht, in einer einzigen Sitzung von etwa 12 - 14 Stunden Programmierung.

Empfohlene Vorbereitung: Einfügen von Entwicklungscode in Ihre Seite

Ich empfehle die Verwendung der Google Chrome-Erweiterung Stampermonkey zum Einfügen von CSS und Javascript von Ihrer lokalen Festplatte, während Sie entwickeln.

Dazu müssen Sie den Dateizugriff für Tampermonkey aktivieren. Öffnen:

chrome://extensions

Klicken Sie auf Details und schalten Sie "Zugriff auf Datei-URLs zulassen" ein

Erstellen Sie das folgende neue Benutzerskript in Tampermonkey:

// ==Benutzerskript==
// @Name Algolia-Inject
// @Namensraum https://pi3g.com/
// @Version 0.5
// @Beschreibung Lokale Datei zum Testen von Algolia injizieren!
// @Autor Maximilian Batz
// @Grant GM_getResourceText
// @Grant GM_addStyle
// @noframes
// @include https://buyzero.de/*
// @resource YOUR_CSS file://D:\algolia_jr.css
// @require datei://D:\algolia_jr.js

// ==/UserScript==

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

Erläuterung:

• Sie müssen getResourceText und addStyle zulassen, um auf die CSS-Datei zugreifen und sie einfügen zu können
• noframes, um die Frames, die Shopify anscheinend lädt, nicht ein zweites Mal auszuführen, was auch der Domain entsprechen würde
• include -> wird auf buyzero.de passen. Vielleicht möchten Sie diese Zeile ändern
• Ressource, die für den Import von CSS-Dateien verwendet wird. Geben Sie den Pfad an ... unter Linux könnte er lauten file:///home/whatever/whatever - Beachten Sie den dreifachen Schrägstrich
• require - fügt Ihre Javascript-Datei ein
• userscript: Dies ist das Userscript zum Hinzufügen der CSS-Datei

Hinzufügen des Algolia-Codes

Damit ist die Frage, wie man sich entwickelt, vom Tisch, hier ist mein Code als Beispielcode in einer netten kleinen ZIP-Datei.

Bitte kopieren Sie nicht von diesem Blog, da ich nicht sicher bin, ob WordPress die Formatierung des Codes zerstört ... verwenden Sie die .js in der ZIP-Datei zum Kopieren.

Bitte beachten Sie, dass die Algolia-Abhängigkeiten / JavaScript-Dateien bereits in unserem Shopify-Theme installiert wurden - durch die Installation des Algolia-Shopify-Plugins. Auch unser Datenspeicher wurde eingerichtet, etc. Algolia lieferte (und liefert immer noch) bereits Suchergebnisse in einer Dropdown-Liste, während Sie in das Suchfeld eintippten.

Ich werde Sie durch die wichtigsten Teile des Codes führen:

wir starten aj_setup(), sobald das Dokument fertig ist, um unsere neue Suchfunktionalität einzubinden.

Bitte beachten Sie, dass ich aj verwende, um meine Funktionen und IDs für dieses Skript voranzustellen. Sie können verwenden, was Sie wollen, es ist nicht erforderlich für Algolia.

Der Container

in aj_setup() habe ich einen neuen Container für die Suchergebnisse eingerichtet (es wäre wahrscheinlich besser, dies direkt in die Theme-Datei aufzunehmen - für die Entwicklung war dies einfacher).

Dies ist der HTML-Teil der Suche

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

• Ich gebe ihm die ID aj-such-container, die Möglichkeit, die gesamten Ergebnisse des Suchcontainers ein- und auszublenden
• die meisten der Div's, einschließlich Container sind für die Kompatibilität mit unserem aktuellen Thema erforderlich - verwenden Sie sie nach Bedarf
• sc-abfrage wird verwendet, um die Suche zu spiegeln, die der Benutzer gerade eingegeben hat, um zu zeigen, dass das System die Ergebnisse in seinem Namen dynamisch aktualisiert (es gibt Code, um dies zu tun - lesen Sie weiter)
• aj-rechts-container enthält Filter, um die "Facetten" der Suche zu erfassen. Der Nutzer kann eine oder mehrere Marken auswählen, die angezeigt werden sollen, sowie Produktkategorien und einen Preisfilter.
• aj-clear-all enthält einen Link zum Löschen der Facettierung - um alle Ergebnisse zurückzugeben, die mit der Anfrage des Nutzers übereinstimmen
• aj-left-container enthält die Suchergebnisse. aj-stats enthält Statistiken über die Suche (Suchergebnisse + Suchzeit), aj-search-results enthält die Ergebnisse, und aj-search-pagination enthält die Paginierung

Die Treffervorlage

wieder, würde dies wahrscheinlich direkt in Ihre Seite gehen, anstatt über Javascript injiziert werden.

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

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

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

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

'            </div>'+

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

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

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

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

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


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

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

Diese Vorlage wird als "Skript" eingefügt. Dies ist der empfohlene Weg in den Algolia-Dokumenten.

Sie wird verwendet, um ein Suchergebnis oder einen Treffer darzustellen.

Hier, im Inneren aj-hit haben wir:

• aj-hit-image, mit {{product_link}} und {{image}} als Platzhalter, um später die richtigen Werte einzufügen
• aj-hit-title, unter Verwendung von {{_highlightResult.title.value}}} - ich verlinke auch in den {{variant_title}}, um einen vollständigen Titel für Variationen bereitzustellen
• aj-hit-description, um die Produktbeschreibung darzustellen - {{_highlightResult.body_html_safe.value}}
• aj-hit-price für den {{Preis}} - Vergessen Sie nicht, Ihre Währung hinzuzufügen (oder fügen Sie sie hinzu, indem Sie die an die Vorlage übergebene Variable ändern)
• aj-hit-stock, um zu zeigen, wie viel {{Bestandsmenge}} wir haben
• aj-hit-link - schließlich einen Link zur Produktseite. {{product_link}}

All dies ist (IMHO) mit meiner CSS-Datei schön gestaltet. Styling ist außerhalb des Rahmens dieses Blogposts, siehe buyzero.de um sich inspirieren zu lassen und dann Ihren eigenen Code zu erstellen.

Mehr zu {{_highlightResult.title.value}}

Variablen, die mit drei geschweiften Klammern dargestellt werden, werden von Algolia for HTML nicht escaped. Dies wird hier verwendet, um die Hervorhebung zu ermöglichen.

Algolia setzt automatisch Tags um die Teile des Titels usw., die in der _highlightResult Variable. Sie können die in der Ausgabe verwenden, um dem Nutzer zu zeigen, warum das Suchergebnis als relevant für seine Suche angesehen wird.

	
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