Erleichtern Sie Ihren Kunden das Auffinden von Artikeln.
Mit dieser Suche erhält der Kunde Vorschläge für die Suche während er ein Suchwort in das Formular eingibt.

Dieses Turorial beschreibt wie Sie die Suche mit automatischen Vorschlägen in Ihr Shopprojekt einbinden können.



Laden Sie sich zunächst das Archiv herunter.
[ Archiv ]

Es enthält alle benötigten Dateien:
Der Ordner "ajax" enthält

• http/Request.js
• JSON/Converter.pm
• JSON/Parser.pm
• ajaxsearch.html
• ajaxsearch.js
• json.js
• JSON.pm

Kopieren Sie den gesamten Ordner "ajax" in das root-Verzeichnis Ihres Shopprojektes und tragen Sie im Shoppilot-Workcenter alle Dateien,
außer "ajaxsearch.html", als zusätzliche Dateien ein.

Nun gilt es eine neue Informationsseite im SP-Workcenter anzulegen, in welcher Sie die Datei "ajaxsearch.html" aus dem Ordner "ajax" als Vorlage eintragen. Der Titel der Seite ist frei wählbar. Eine Beschreibung muss nicht hinterlegt werden.
Wenn Sie die Seite nun mit einem klick auf "OK" anlegen und erneut öffnen sehen Sie die von ShopPilot vergebene Seitennummer. Kopieren oder notieren Sie sich die Seitennummer. Sie wird im weiteren Verlauf des Tutorials noch benötigt.




Tragen Sie in alle Shop-Vorlagen, in denen die Suche verwendet werden soll, folgenden Code in den Head-Bereich der Vorlage ein:


<script type="text/javascript" src="ajax/json.js"></script>
<script type="text/javascript" src="ajax/http/Request.js"></script>
<script type="text/javascript" src="ajax/ajaxsearch.js"></script>

Die Pfade zu den Script-Dateien können abweichen. Dies ist abhängig davon, an welcher Stelle Ihre *.html Dateien liegen.
Liegen die Dateien nicht im Hauptverzeichnis Ihres Shopprojektes, sondern in einem dafür angelegten Unterordner muss den Pfaden ein "../" vorangestellt werden.

Beispiel:

<script type="text/javascript" src="../ajax/json.js"></script>



Außerdem muss folgender Code in den head-Bereich eingetragen werden:


<script type="text/javascript">
      var myinterface = "__xxpath__?ajax1200000370,__xxsession__";
</script>

Tragen Sie hier, an die Stelle "1200000370", die Seitennummer der zuvor in Shoppilot angelegten Informationsseite ein.
Ersetzen Sie also die "1200000370" durch Ihre eigene Seitennummer.


Sind die Scripte in die Vorlagen eingebunden, kann das Suchformular in die Vorlagen eingefügt, bzw. das bestehende Suchformular angepasst werden.
Ein Suchformular, dass diese Suche verwendet, könnte folgendermaßen aussehen:


<form method="post" action="http://__xsuchen__">
   <input name="suchbegriff" type="text" id="suchbegriff" onkeyup="autocomplete_js();">
   <input type="submit" value="Go"> <br>
   <div class="ajaxsearch" id="results"></div>
</form>

Das erste Input ist für den Suchbegriff zuständig. onKeyup ruft die Funktion "autocomplete()" jedesmal dann auf, wenn etwas im Suchfeld verändert wird.
Die id="suchbegriff" darf nicht verändert werden und auf keinen Fall ein weiteres mal in der selben Vorlage verwendet werden.

Das div class="ajaxsearch" stellt die Vorschläge für die Suchworte dar. Es ist standardmäßig ausgeblendet (display:none;) und wird nur sichtbar wenn etwas dargestellt werden soll.
Am div darf nichts verändert werden. Alle notwendigen Änderungen können per css oder in der Datei "ajaxsearch.js" vorgenommen werden, doch dazu später mehr.
Auch hier darf die id="results" nicht verändert und auch nicht ein weiters mal in der Volage verwendet werden.

Zuletzt muss noch die Darstellung der Suchergebnisse eingestellt/angepasst werden.

Im Ordner "ajax/css" befindet sich die Datei "ajax.css", welche in alle Vorlagen, welche für die Suche verwendet werden sollen eingebunden werden muss.
In der Css-Datei lässt sich fast das gesamte Erscheinungsbild der Suche anpassen.

Anstatt Hintergrundfarben können auch Hintergrundbilder in der Css-Datei definiert werden. Beispielbilder befinden sich im Ordner "ajax/PIC".

---

Weitere Einstellungen:

Alle nötigen Einstellungen werden in der Datei ajaxsearch.js vorgenommen. Hierzu dient der abgetrennte obere Bereich der Datei.


//NEHMEN SIE HIER IHRE EINSTELLUNGEN VOR
var m_over = '';                                   //Farbe wenn Mauszeiger über Wort geführt wird
var m_out = '';                                    //Farbe wenn  Mauszeiger das Wort wieder verlässt
var m_cursor = 'pointer';                       //Form des Mauszeigers über Wort
var m_scrollAt = '20';                            //Ab wievielen Suchergebnissen soll die Anzeige gescrollt werden?

var m_SearchFrom = '2';                         // Ab wie vielen eingegebenen Buchstaben soll gesucht werden?
var m_delayTime = '1000';                      // Wieviel Zeit soll vergehen bis die nächste Anfrage an die Datenbank gesendet wird. So wird verhindert,
                                                           //dass hunderte von Abfragen gestartet werden  sehr schnell getippt wird (MILISEKUNDEN)
var m_autoSend = '1';                            // Wenn 1 dann wird Suchformular automatisch abgesendet. Bei 0  muss es manuell abgesendet werden

var m_searchType = 1;                            // 1 ODER 0 
                                                            // 1 steht für Teilwortsuche
                                                             // 0 steht für Suche am Wortanfang
var m_readVariants = 1;                            //Auch Varianten einlesen?
var m_VariantPic = '';                                  //Ben. Def. Feld für Variantenbilder, wenn vorhanden, ansonsten leer lassen.

var m_findVouchers = 0;                              // 1 ODER 0
                                                             // 1 GUTSCHEINE WERDEN GEFUNDEN
                                                                 // 0 GUTSCHEINE WERDEN NICHT GEFUNDEN
var m_maxToDisplay = 0;                              // Anzahl maximal anzuzeigender Ergebnisse.  Bei 0 werden alle angezeigt.                       

var m_head = 'Suchvorschläge:';         //Tragen Sie hier "optional eine Überschrift ein   

var m_ShopRoot = '../';                            //Pfad zum Shop-Hauptverzeichnis, relativ von HTML-Dateien (liegen Dateien in Unterordner, dann "../" liegen Sie im Hauptverzeichnis wird der Wert leer gelassen, liegen Sie in html/html_ger/ dann "../../"

var m_showPics = 1;                               //Wenn bilder Vorhanden skalieren und anzeigen
var m_noPic = 1;                                   //Platzhalter anzeigen wenn kein Bild vorhanden? m_showPics muss 1 sein
var m_noPicSrc = '../ajax/PIC/arrow.gif';   // Pfad zum Platzhalter, relativ von den HTML-Vorlagen gesehen

var m_picHeight = '20px';                      //Bilder werden automatisch skaliert, nur Höhe muss angegeben werden

var m_showAddInfo = 1;
var m_additionalInfo_item = '';               // Gibt es Zusatzinformationen die angezeigt werden sollen? Geben Sie ein bn. def. Feld  oder ein anderes Datenbankfeld an. Sonst leer!

var m_additionalInfo_vitem = '';             // selbes für Varianten
/* ---------------------------------------------------------------------- AB HIER NICHTS MEHR ÄNDERN ---------------------------------------------------------------------------------------------*/



Haben Sie alles angepasst und starten den Shop im LiveView oder im Onlinebetrieb sollte die Suche einwandfrei funktionieren.  8)

Dieses Turial liegt auch im PDF-Format zum Download bereit: PDF-Datei

mfg
cru

---

Livedemo:
Die Suche ist eingebaut im Demoshop "carshop" und auf shoppilot.de

shoppilot.de
carshop

---

Download Dateien:
Archiv

---

weitere Ansichten:
Suche nach "front" ...

---

Suche nach "enter" ...

Kleiner Nachtrag:

Je nach Browsereinstellung des Nutzers kann es passieren das die Suche durch die Autovervollständigung des Browsers überlagert wird.



Wer verhindern möchte das die Suche durch die Autovervollständigung des IE oder Firefox überlagert wird, muss das Formular um die Eigenschaft:
autocomplete="off"
erweitern.



Das Suchformular könnte dann z.B. folgendermaßen aussehen:


<form method="post" action="http://__xsuchen__" autocomplete="off">
   <input name="suchbegriff" type="text" id="suchbegriff" onkeyup="autocomplete_js();">
   <input type="submit" value="Go"> <br>
   <div class="ajaxsearch" id="results"></div>
</form>


mfg

cru

Die Ajaxsuche wurde überarbeitet.

Ein Archiv mit den aktuellen Dateien finden Sie hier:

Dateien und Anleitung

Die Anleitung befindet sich im Verzeichnis "doc".

mfg
cru